_pager.scss

// @file
// Styles for Pager.
@use '../../01-core' as *;

$pager-font-size: var(--font-size-00) !default;
$pager-font-family: var(--font-systemmedium) !default;
$pager-background-color: var(--uw-white) !default;
$pager-background-color-hover: var(--uw-black) !default;
$pager-background-color-active: var(--uw-black) !default;
$pager-link-color: var(--uw-black) !default;
$pager-link-color-active: var(--uw-white) !default;
$pager-link-focus-outline-color: var(--uw-black) !default;
$pager-ellipsis-bp: 800px !default;
$pager-bp: 600px !default;

.pager__items {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.pager__item {
  display: inline-block;
  font-family: $pager-font-family;
  font-size: $pager-font-size;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;

  &:not([class*='pager__item--']) {
    display: none;

    @media (min-width: $pager-bp) {
      display: inline-block;
    }
  }
}

%pager__link {
  background-color: $pager-background-color;
  color: $pager-link-color;
  min-width: var(--size-3);
  padding: var(--size-05) var(--size-1);
  transition:
    color var(---dur-short) var(--ease-out-1),
    background-color var(--dur-standard) var(--ease-out-1);
  &:focus {
    outline: 1px dotted $pager-link-focus-outline-color;
  }
}

.pager__item--ellipsis {
  @extend %pager__link;
  background-color: transparent;
  display: none;

  @media(min-width: $pager-ellipsis-bp) {
    display: inline-block;
  }
}

.pager__item--current.pager__item {
  @extend %pager__link;
  background-color: $pager-background-color-active;
  color: $pager-link-color-active;
}

.pager__link {
  @extend %pager__link;
  display: inline-block;
  text-decoration: none;
  &:hover,
  &:focus {
    background-color: $pager-background-color-hover;
    color: var(--uw-white);
  }
  &:active {
    background-color: $pager-background-color-active;
    color: $pager-link-color-active;
  }
}

.pager__link--previous,
.pager__link--next {
  background-color: $pager-background-color;
  color: $pager-link-color;
  position: relative;

  &:hover,
  &:focus {
    background-color: $pager-background-color-hover;
    color: var(--uw-white);

    .pager__link-icon g {
      fill: $pager-background-color;
    }
  }
}

.pager__item--previous {
  margin-right: var(--size-3);
}

.pager__item--next {
  margin-left: var(--size-3);
}