@layer components {
  /* ============================================
     Pagination
     ============================================ */

  .pagination {
    margin-block-start: var(--block-space-double);
    text-align: center;
  }

  .pagy {
    display: inline-flex;
    border-radius: 0.75rem;
    background-color: oklch(var(--lch-white));
    box-shadow: var(--shadow-soft);
    margin-inline-start: -1px;
  }

  .pagy a {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 0 0 1px oklch(var(--lch-gray-100));
    color: oklch(var(--lch-gray-900));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    margin-inline-start: -1px;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    text-decoration: none;
    transition: background-color 100ms ease-out;

    &:first-child {
      border-end-start-radius: 0.75rem;
      border-start-start-radius: 0.75rem;
    }

    &:last-child {
      border-end-end-radius: 0.75rem;
      border-start-end-radius: 0.75rem;
    }

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"], [aria-current="page"]) {
        background-color: oklch(var(--lch-gray-50));
      }
    }

    &:focus-visible {
      z-index: 20;
      outline-offset: 0;
    }

    &[aria-current="page"] {
      z-index: 10;
      background-color: oklch(var(--lch-green-600));
      box-shadow: none;
      color: oklch(var(--lch-white));
    }

    &[aria-disabled="true"]:not([aria-current="page"]) {
      color: oklch(var(--lch-gray-400));
      cursor: default;
    }

    &[aria-label="Previous"],
    &[aria-label="Next"] {
      color: oklch(var(--lch-gray-400));
      padding-inline: 0.75rem;
    }

    &[role="separator"] {
      color: oklch(var(--lch-gray-700));
    }
  }
}