/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :root, :host, [data-theme] {
    --pico-pagination-item-size: 2.25rem;
    --pico-pagination-gap: .25rem;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) {
    margin-bottom: var(--pico-typography-spacing-vertical);
    justify-content: center;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) ol {
    justify-content: center;
    align-items: center;
    gap: var(--pico-pagination-gap);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) li {
    margin: 0;
    padding: 0;
    display: block;
  }

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

  nav:where([aria-label="pagination" i], [data-pagination]) a, nav:where([aria-label="pagination" i], [data-pagination]) [aria-disabled="true"] {
    box-sizing: border-box;
    min-inline-size: var(--pico-pagination-item-size);
    block-size: var(--pico-pagination-item-size);
    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);
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) a:hover {
    background-color: color-mix(in oklab, var(--_nav-color) 6%, transparent);
    color: var(--_nav-color);
  }

  nav:where([aria-label="pagination" i], [data-pagination]) a:focus-visible {
    outline-color: var(--pico-primary-focus);
    outline-offset: .125rem;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) a[aria-current="page"] {
    border-color: var(--pico-primary-background);
    background-color: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    font-weight: 600;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) a[aria-current="page"]:hover {
    border-color: var(--pico-primary-hover-background);
    background-color: var(--pico-primary-hover-background);
    color: var(--pico-primary-inverse);
  }

  nav:where([aria-label="pagination" i], [data-pagination]) :is(a[rel="prev"], li:first-child > [aria-disabled="true"]):not(:has( > [aria-hidden])):before, nav:where([aria-label="pagination" i], [data-pagination]) :is(a[rel="next"], li:last-child > [aria-disabled="true"]):not(:has( > [aria-hidden])):after {
    font-size: 1.25em;
    line-height: 1;
    display: inline-block;
    translate: 0 -.0625em;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) :is(a[rel="prev"], li:first-child > [aria-disabled="true"]):not(:has( > [aria-hidden])):before {
    content: "‹";
    content: "‹" / "";
    margin-inline-end: .375em;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) :is(a[rel="next"], li:last-child > [aria-disabled="true"]):not(:has( > [aria-hidden])):after {
    content: "›";
    content: "›" / "";
    margin-inline-start: .375em;
  }

  nav:where([aria-label="pagination" i], [data-pagination]) [aria-disabled="true"] {
    color: var(--pico-muted-color);
    opacity: var(--pico-form-element-disabled-opacity);
    cursor: default;
    pointer-events: none;
  }

  [dir="rtl"] :is(nav:where([aria-label="pagination" i], [data-pagination])) a[rel] > [aria-hidden="true"], nav:where([aria-label="pagination" i], [data-pagination])[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;
    }
  }
}

@layer pico.utilities;