@import '../../styles/variables';

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-gap-md);
  padding: var(--tk-gap-md) 0;

  &__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: $r-sm;
    background: var(--tk-card-bg);
    border: 1px solid $bd;
    font-size: var(--tk-font-body-sm);
    color: $tx;
    min-height: var(--tk-touch-min);

    &:active:not(&--disabled) {
      background: $bd-l;
    }

    &--disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }

  &__info {
    font-size: var(--tk-font-body-sm);
    color: $tx2;
    min-width: 60px;
    text-align: center;
  }
}