pager.pcss.css

/**
 * @file
 * Styles for Admin's Pagination.
 */

.pager {
  --pager-size: 2rem; /* --admin-space-m × 2 */
  --pager-border-width: 0.125rem; /* 2px */
  --pager-border-radius--action: var(--pager-border-width);

  margin-block: var(--admin-space-m);
}

.pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  margin: var(--admin-space-m) 0;
  list-style: none;
  text-align: center;
  font-weight: bold;
}

.pager__item {
  display: inline-block;
  margin-inline: calc(var(--admin-space-xs) / 2);
  vertical-align: top;
}

.pager__link,
.pager__item--current {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: var(--pager-size);
  block-size: var(--pager-size);
  padding-inline: var(--admin-space-xs);
  text-decoration: none;
  color: var(--admin-color-text);
  border-radius: var(--admin-space-m); /* Pager size ÷ 2 */
  background: transparent;
  line-height: 1;
}

.pager__link {
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  &:hover,
  &.is-active:hover {
    color: var(--admin-color-text-on-primary);
    background: var(--admin-color-primary-hover);
  }

  &:dir(rtl) {
    &::before,
    &::after {
      scale: -1 1;
    }
  }
}

.pager__link--action-link {
  border-radius: var(--pager-border-radius--action);
}

/* Active number link. */
.pager__link.is-active,
.pager__item--current {
  color: var(--admin-color-bg);
  border: var(--pager-border-width) solid transparent;
  background: var(--admin-color-primary);
}

.pager__item--first .pager__link::before {
  mask-image: var(--admin-icon-first);
}

.pager__item--previous .pager__link::before {
  mask-image: var(--admin-icon-prev);
}

.pager__item--next .pager__link::after {
  mask-image: var(--admin-icon-next);
}

.pager__item--last .pager__link::after {
  mask-image: var(--admin-icon-last);
}

.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
  position: relative;
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  content: "";
  background: currentColor;

  @media (forced-colors: active) {
    background-color: linktext;
  }
}

.pager__item--mini {
  margin-inline: calc(var(--admin-space-m) / 2);
}

.pager__link--mini {
  border-radius: 50%;

  /**
   * On the mini pager, remove margins for the previous and next icons.
   * Margins are not needed here as there is no accompanying text.
   */
  &::before {
    margin-inline: 0;
  }
}

.pager__item-title--backwards {
  margin-inline-start: 0.5rem;
}

.pager__item-title--forward {
  margin-inline-end: 0.5rem;
}

@media (forced-colors: active) {
  .pager__item a:hover {
    text-decoration: underline;
  }
}