@use '../utils/constants.scss';
@use '../utils/tokens.scss';
@use '../utils/stateLayerVars.scss' as state-layer;
@use '../utils/mixins.scss';

@import '@viasat/beam-tokens/components/Pagination';

$paginationBaseClass: '#{constants.$prefix}pagination';
$buttonBaseClass: '#{constants.$prefix}button';

.#{$paginationBaseClass} {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &--determinate {
    gap: tokens.$bm-comp-pagination-space-controls-gap;
  }

  & &__chevrons {
    display: flex;
    flex-wrap: nowrap;
    color: tokens.$bm-comp-pagination-color-text;

    .#{state-layer.$stateLayerBaseClass} {
      outline: none;
    }

    &:dir(rtl) {
      transform: scale(-1);
    }
  }

  & &__buttons {
    font: tokens.$bm-sem-typo-label-md;
    border-radius: tokens.$bm-comp-btn-radius-container;
    color: tokens.$bm-comp-pagination-color-text;
    background-color: transparent;
    align-self: stretch;
    padding: 0;
    background: unset;

    .#{state-layer.$stateLayerBaseClass} {
      outline: none;
    }

    &:focus-visible {
      @include mixins.simulated-inset-outline;
    }

    &--active {
      color: tokens.$bm-comp-pagination-color-fg-selected;
      border: tokens.$bm-comp-btn-border-width solid
        tokens.$bm-comp-pagination-color-border-selected;
      background: tokens.$bm-comp-pagination-color-bg-selected;
    }
  }

  & &__truncation {
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    min-width: tokens.$bm-comp-btn-size-sm-width;
    min-height: tokens.$bm-comp-btn-size-sm-height;
    cursor: pointer;

    @extend .#{$paginationBaseClass}__buttons;
  }
}