/* Pagination: nav[aria-label=pagination] (or nav[data-pagination]) with ol, li, a and aria-disabled items */

:root,
:host,
[data-theme] {
  --pico-pagination-item-size: 2.25rem;
  --pico-pagination-gap: 0.25rem;
}

/* data-pagination is the hook for navs whose label is not "Pagination", like "Search results pages" */
nav:where([aria-label="pagination" i], [data-pagination]) {
  justify-content: center;
  margin-bottom: var(--pico-typography-spacing-vertical);

  & ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pico-pagination-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    display: block;
    margin: 0;
    padding: 0;
  }

  & li[aria-hidden="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--pico-pagination-item-size);
    block-size: var(--pico-pagination-item-size);
    color: var(--pico-muted-color);
    font-weight: 500;
    line-height: 1;
    user-select: none;
  }

  /* The border stays on every state so the current page is still visible in forced colors */
  & a,
  & [aria-disabled="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--pico-pagination-item-size);
    block-size: var(--pico-pagination-item-size);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--pico-nav-link-spacing-horizontal);
    border: var(--pico-border-width) solid transparent;
    border-radius: var(--pico-border-radius);
    outline: var(--pico-outline-width) solid transparent;
    color: var(--_nav-color);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  & a:hover {
    background-color: color-mix(in oklab, var(--_nav-color) 6%, transparent);
    color: var(--_nav-color);
  }

  & a:focus-visible {
    outline-color: var(--pico-primary-focus);
    outline-offset: 0.125rem;
  }

  /* A solid fill, the border keeps it visible in forced colors */
  & a[aria-current="page"] {
    border-color: var(--pico-primary-background);
    background-color: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    font-weight: 600;

    &:hover {
      border-color: var(--pico-primary-hover-background);
      background-color: var(--pico-primary-hover-background);
      color: var(--pico-primary-inverse);
    }
  }

  /* Chevrons on text prev and next links (and their disabled stand-ins). Arrow-only links
     bring their own glyph. The single angle quotes are mirrored characters, so they already
     point the other way in right to left text. */
  & :is(a[rel="prev"], li:first-child > [aria-disabled="true"]):not(:has(> [aria-hidden]))::before,
  & :is(a[rel="next"], li:last-child > [aria-disabled="true"]):not(:has(> [aria-hidden]))::after {
    display: inline-block;
    font-size: 1.25em;
    line-height: 1;
    translate: 0 -0.0625em;
  }

  & :is(a[rel="prev"], li:first-child > [aria-disabled="true"]):not(:has(> [aria-hidden]))::before {
    content: "\2039";
    content: "\2039" / "";
    margin-inline-end: 0.375em;
  }

  & :is(a[rel="next"], li:last-child > [aria-disabled="true"]):not(:has(> [aria-hidden]))::after {
    content: "\203A";
    content: "\203A" / "";
    margin-inline-start: 0.375em;
  }

  & [aria-disabled="true"] {
    color: var(--pico-muted-color);
    opacity: var(--pico-form-element-disabled-opacity);
    cursor: default;
    pointer-events: none;
  }

  /* Arrow-only prev and next point the other way in RTL */
  [dir="rtl"] & a[rel] > [aria-hidden="true"],
  &[dir="rtl"] a[rel] > [aria-hidden="true"] {
    display: inline-block;
    transform: scaleX(-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  nav:where([aria-label="pagination" i], [data-pagination]) a {
    transition: none;
  }
}