@layer lotek {
  .lt-pagination {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-pagination-gap, var(--lt-spacing-1));
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
    font-size: var(--lt-font-size-m);
  }

  /* `span[aria-disabled]` is "Next" on the last page: not a link, but it
     must have the same box, or the row jumps when it is swapped in. */
  .lt-pagination a,
  .lt-pagination button,
  .lt-pagination span[aria-disabled="true"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40 pixels in both directions. WCAG 2.2 requires 24, and a number in a
       long row is easy to miss with a finger. */
    min-inline-size: var(--lt-pagination-size, var(--lt-spacing-10));
    min-block-size: var(--lt-pagination-size, var(--lt-spacing-10));
    padding-inline: var(--lt-spacing-2);
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    color: var(--lt-color-accent-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--lt-pagination-radius, var(--lt-spacing-1));
    text-decoration: none;
    cursor: pointer;
  }

  /* The current page is excluded, and has its own hover below. Without
     `:not()` this rule won on specificity, and the page number the user is
     on stayed `accent-content` on `accent-surface`, that is 1.09:1. */
  .lt-pagination a:not([aria-current="page"]):hover,
  .lt-pagination button:hover:not(:disabled):not([aria-current="page"]) {
    background: var(--lt-color-accent-surface);
  }

  .lt-pagination a:focus-visible,
  .lt-pagination button:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-pagination [aria-current="page"] {
    color: var(--lt-color-accent-content);
    background: var(--lt-color-accent-fill);
    border-color: var(--lt-color-accent-fill);
    font-weight: var(--lt-font-weight-semibold);
  }

  /* Like the button: away from `content`, so darker in the light theme and
     lighter in the dark one, and the text on top stays readable. */
  .lt-pagination [aria-current="page"]:hover {
    background: var(--lt-color-accent-text);
    border-color: var(--lt-color-accent-text);
  }

  .lt-pagination button:disabled,
  .lt-pagination [aria-disabled="true"],
  .lt-pagination span[aria-disabled="true"] {
    color: var(--lt-color-disabled-text);
    cursor: not-allowed;
  }

  /* The gap in the row of numbers, as in "1 2 ... 9 10". */
  .lt-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--lt-pagination-size, var(--lt-spacing-10));
    color: var(--lt-color-neutral-text-subtle);
  }

  /* High contrast: the current page differs only by colour. */
  @media (forced-colors: active) {
    /* `:hover` included, or the hover rule beat this one on specificity, and
       the background was forced to `Canvas` under `HighlightText`: white on
       white, or black on black. */
    .lt-pagination [aria-current="page"],
    .lt-pagination [aria-current="page"]:hover {
      background-color: Highlight;
      color: HighlightText;
    }
  }
}