pagination.scss

// Needs refactoring
// stylelint-disable selector-max-type
.pagination {
  a,
  span,
  em {
    min-width: 32px;
    // stylelint-disable-next-line primer/spacing
    padding: 5px 10px;
    font-style: normal;
    // stylelint-disable-next-line primer/typography
    line-height: 20px;
    color: var(--fgColor-default, var(--color-fg-default));
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    // stylelint-disable-next-line primer/borders, primer/colors
    border: $border-width $border-style transparent;
    // stylelint-disable-next-line primer/borders
    border-radius: $border-radius;
    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);

    &:hover,
    &:focus {
      text-decoration: none;
      border-color: var(--borderColor-default, var(--color-border-default));
      transition-duration: 0.1s;
    }

    &:active {
      border-color: var(--borderColor-muted, var(--color-border-muted));
      transition: none;
    }
  }

  .previous_page,
  .next_page {
    color: var(--fgColor-accent, var(--color-accent-fg));
  }

  .current,
  .current:hover,
  [aria-current]:not([aria-current='false']) {
    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
    border-color: transparent;
  }

  .gap,
  .disabled,
  [aria-disabled='true'],
  .gap:hover,
  .disabled:hover,
  [aria-disabled='true']:hover {
    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
    cursor: default;
    border-color: transparent;
  }

  // chevron icons using clip-path
  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
    .previous_page::before,
    .next_page::after {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: text-bottom;
      content: '';
      background-color: currentColor;
    }

    // chevron-left
    .previous_page::before {
      margin-right: var(--base-size-4);
      clip-path:
        polygon(
          9.8px 12.8px,
          8.7px 12.8px,
          4.5px 8.5px,
          4.5px 7.5px,
          8.7px 3.2px,
          9.8px 4.3px,
          6.1px 8px,
          9.8px 11.7px,
          9.8px 12.8px
        );
    }

    // chevron-right
    .next_page::after {
      margin-left: var(--base-size-4);
      clip-path:
        polygon(
          6.2px 3.2px,
          7.3px 3.2px,
          11.5px 7.5px,
          11.5px 8.5px,
          7.3px 12.8px,
          6.2px 11.7px,
          9.9px 8px,
          6.2px 4.3px,
          6.2px 3.2px
        );
    }
  }

  // Responsive

  // Hide everything by default
  > * {
    display: none;
  }

  // 0 -> sm
  // Only show [Previous] [Next]

  > :first-child,
  > :last-child,
  > .previous_page,
  > .next_page {
    display: inline-block;
  }

  // sm -> md
  // Also show [first] [last] [current number] and [...]

  @include breakpoint(sm) {
    > :nth-child(2),
    > :nth-last-child(2),
    > .current,
    > .gap {
      display: inline-block;
    }
  }

  // md -> or more
  // Show everything

  @include breakpoint(md) {
    > * {
      display: inline-block;
    }
  }
}

// Unified centered pagination across the site
.paginate-container {
  margin-top: var(--base-size-16);
  margin-bottom: var(--base-size-16);
  text-align: center;

  .pagination {
    display: inline-block;
  }
}