@use 'button';

$padding-vertical: var(--wds-pagination-padding-vertical, var(--wds-space-50));
$button-size: var(--wds-button-size-small, var(--wds-space-700));
$button-border-radius: var(
  --wds-button-border-radius-small,
  var(--wds-border-radius-200)
);
$fill-hover: var(
  --wds-pagination-fill-hover,
  var(--wds-color-fill-standard-primary-hover)
);
$fill-active: var(
  --wds-pagination-fill-active,
  var(--wds-color-fill-standard-primary)
);
$arrow-fill: var(--wds-pagination-arrow-fill, var(--wds-color-text-primary));

.pagination {
  & &__core &__page-button:focus-visible,
  & &__core &__nav-button:focus-visible {
    border-radius: $button-border-radius;
  }

  &__core &__page-button,
  &__core &__current-page,
  &__core &__nav-button,
  &__core &__empty-button,
  &__core &__gap {
    @include button.common(
      $padding-vertical,
      $button-size,
      $button-border-radius
    );
  }

  @media (hover: hover) {
    &__core &__page-button:hover,
    &__core &__nav-button:hover {
      background-color: $fill-hover;
    }
  }

  &__core &__current-page {
    background-color: $fill-active;
  }

  &__core &__nav-button {
    color: $arrow-fill;
  }
}