Pager

$pager__fullBreakpoint: 40rem;
$pager__itemRadius: $border-radius-md;


@mixin pagination__root {
  margin: $spacing-4xl 0;
  @include typescale('lg');

  @media (min-width: $pager__fullBreakpoint) {
    @include typescale('md');
  }
}

@mixin pagination__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-2xs;
}

@mixin pagination__item {
  background: $offwhite;
  border-radius: $pager__itemRadius;
}

@mixin pagination__item--hideshow {
  display: none;

  @media (min-width: $pager__fullBreakpoint) {
    display: block;
  }
}

@mixin pagination__item--navigation {
  //min-width: 4em;

  > a {
    background: white;

    &:hover,
    &:focus {
      box-shadow: 0 0 0.2em rgba(black, 0.1), 0 0 1em rgba(black, 0.2);
    }
  }
}

@mixin pagination__item--active {
  > a, > span {
    background: $secondary;
    color: choose-contrast-color($secondary);
    cursor: default;
    text-decoration: none;

    &:hover,
    &:focus {
      box-shadow: none;
    }
  }
}

@mixin pagination__link {
  min-width: 1em;
  text-align: center;
  padding: $spacing-2xs $spacing-sm;
  border-radius: $pager__itemRadius;
  box-sizing: border-box;

  &:hover,
  &:focus {
    text-decoration: none;
    box-shadow: 0 0 0.2em rgba(black, 0.1), 0 0 1em rgba(black, 0.2);
  }
}

@mixin pagination__link--active {
  &:hover,
  &:focus {
    box-shadow: none;
  }
}

@mixin pagination__ellipsis {
  background: $offwhite;
  color: $grey;
  border-radius: $pager__itemRadius;
  min-width: 1em;
  text-align: center;
  padding: $spacing-2xs $spacing-4xs;
  @media (min-width: $pager__fullBreakpoint) {
    padding: $spacing-2xs $spacing-xs;
  }
}

@mixin pagination__link--navigation {
}

// --

.pager {

  @include pagination__root;

  &__items {
    @include pagination__list;
  }

  &__item {
    @include pagination__item;
  }

  &__item:where(:not(.pager__item--ellipsis):not(.pager__item--first):not(.pager__item--previous):not(.pager__item.is-active):not(.pager__item--next):not(.pager__item--last)) {
    @include pagination__item--hideshow;
  }

  a {
    display: block;
    border: 0.1rem solid transparent;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  a {
    @include pagination__link;
  }

  &__item--ellipsis {
    @include pagination__ellipsis;
  }

  .is-active {
    @include pagination__item--active;
  }

  &__item--first,
  &__item--last,
  &__item--next,
  &__item--previous {
    @include pagination__item--navigation;

    a {
      @include pagination__link--navigation;
    }
  }

  &__item--next,
  &__item--previous {
    a {
      background: $primary;
      color: white;
    }
  }

  &__item--first,
  &__item--last {
    a {
      border: 0.1rem solid $primary;
    }
  }
}