%pagination-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.125rem;
  transition-property: background-color, color;
  transition-duration: 0.2s;
}

.pagination {
  --background: #ffffff;
  --background-hover: #f8f8f8;
  --background-arrow: #d7eeff;
  --background-arrow-hover: #aedcff;
  --background-arrow-active: #86cbff;
  --background-arrow-disabled: #dfdfdf;
  --semantic-highlight: #005392;
  --semantic-highlight-hover: #003c69;
  --semantic-highlight-active: #006aba;
  --semantic-border-highlight: #0c97ff;
  --pagination-border: #aeaeae;
  --pagination-border-hover: #7c7c7c;
  --pagination-text: #636363;
  --pagination-text-hover: #7c7c7c;
  --pagination-text-disabled: #7c7c7c;
  --pagination-text-inverse: #ffffff;
  display: inline-flex;
  gap: 0.5rem;
  &-arrow,
  &-page {
    @extend %pagination-buttons;
    &:focus {
      outline: 0.125rem solid var(--semantic-border-highlight) !important;
    }
  }
  &-arrow {
    border: none;
    background-color: var(--background-arrow);
    &:hover {
      background-color: var(--background-arrow-hover);
      .fa {
        color: var(--semantic-highlight-hover);
      }
    }
    &:active {
      background-color: var(--background-arrow-active);
      .fa {
        color: var(--semantic-highlight-active);
      }
    }
    &[disabled] {
      outline: none !important;
      background-color: var(--background-arrow-disabled);
      .fa {
        color: var(--pagination-text-disabled);
      }
    }
    .fa {
      color: var(--semantic-highlight);
    }
  }
  &-page {
    border: 0.5px solid var(--pagination-border);
    background-color: var(--background);
    &:hover {
      border-color: var(--pagination-border-hover);
      background-color: var(--background-hover);
      .pagination-label {
        color: var(--pagination-text-hover);
      }
    }
    &:active,
    &.--selected {
      border: none;
      background-color: var(--semantic-highlight);
      .pagination-label {
        color: var(--pagination-text-inverse);
      }
    }
  }
  &-label {
    color: var(--pagination-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

@media screen and (max-width: 1280px) {
  .pagination {
    &-arrow,
    &-page {
      width: 2.25rem;
      height: 2.25rem;
    }
    &-arrow {
      .fa {
        font-size: 1.25rem;
      }
    }
  }
}