@import "@/styles/variables";
@import "@/styles/mixins";

@mixin pagination {
  @include p1;
  color: rgba(44, 44, 44, 0.6);
}
.pagination {
  span {
    @include pagination;
    padding-bottom: 0.5rem;
  }
  button {
    border-radius: 0.375rem;
    @include pagination;
    &[data-attr="prev"] {
      margin-right: 1rem !important;
    }
    &[data-attr="next"] {
      margin-left: 0.5rem;
    }
  }
  button:disabled {
    background: rgba(44, 44, 44, 0.1);
    color: rgba(44, 44, 44, 0.4);
  }
  &:global(.buttons) {
    justify-content: flex-end;
  }
  .active {
    background-color: $blue;
    color: $white;
  }
  .inputContainer {
    flex: 0 1 9rem;
    align-items: center;
    input {
      flex: 0 1 5rem;
      text-align: center;
      margin: 0 0.5rem 0.5rem;
      padding: 0.375rem 1.5rem;
    }
  }
}
@media screen and (max-width: $desktop) {
  .pagination {
    button {
      height: 2rem;
      padding: 0.21875rem 1rem;
      font-size: 0.875rem;
      line-height: 1.5rem;
      border-radius: 2px;
    }
    .inputContainer {
      flex: 0 1 7rem;
      input {
        border-radius: 2px;
        font-size: 0.75rem;
        flex: 0 1 3rem;
        padding: 0;
      }
    }
  }
}