/* ═══════════════════════════════════════════════════════════════
   PAGINATION-N — Page navigation with numbers and prev/next.
   ═══════════════════════════════════════════════════════════════ */

@scope (pagination-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --pagination-gap-default:          var(--a-space-1);
    --pagination-button-size-default:  var(--a-size-sm);
    --pagination-button-px-default:    var(--a-space-1);
    --pagination-radius-default:       var(--a-radius-sm);

    /* ── Typography ── */
    --pagination-font-default:         var(--a-ui-size);

    /* ── Colors ── */
    --pagination-fg-default:           var(--a-fg-subtle);
    --pagination-fg-hover-default:     var(--a-fg);
    --pagination-fg-active-default:    var(--a-chrome-light);
    --pagination-fg-muted-default:     var(--a-fg-muted);
    --pagination-bg-hover-default:     var(--a-bg-muted);
    --pagination-bg-active-default:    var(--a-accent);
    --pagination-fg-disabled-default:  var(--a-ui-text-disabled);

    /* ── Transition ── */
    --pagination-duration-default:     var(--a-duration-fast);
    --pagination-easing-default:       var(--a-easing);

    /* ── State ── */
    --pagination-focus-ring-default:   var(--a-focus-ring);

    /* ── Nav (button variant chrome) ── */
    --pagination-nav-bg-default:           transparent;
    --pagination-nav-border-default:       transparent;
    --pagination-nav-border-hover-default: transparent;
    --pagination-nav-bg-disabled-default:  transparent;
    --pagination-nav-border-disabled-default: transparent;
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
  }

  /* ── Nav container ── */
  [slot="nav"] {
    display: flex;
    align-items: center;
    gap: var(--pagination-gap, var(--pagination-gap-default));
  }

  /* ── All buttons ── */
  [slot="nav"] button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
    height: var(--pagination-button-size, var(--pagination-button-size-default));
    padding: 0 var(--pagination-button-px, var(--pagination-button-px-default));
    border: none;
    background: none;
    border-radius: var(--pagination-radius, var(--pagination-radius-default));
    font: inherit;
    font-size: var(--pagination-font, var(--pagination-font-default));
    color: var(--pagination-fg, var(--pagination-fg-default));
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition:
      background var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
      border-color var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
      color var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
      box-shadow var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default));
  }

  [slot="nav"] button:not([disabled]):hover {
    background: var(--pagination-bg-hover, var(--pagination-bg-hover-default));
    color: var(--pagination-fg-hover, var(--pagination-fg-hover-default));
  }

  /* ── Active page ── */
  [slot="nav"] button[data-active] {
    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
  }

  [slot="nav"] button[data-active]:hover {
    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
  }

  /* ── Disabled (prev/next at boundaries) ── */
  [slot="nav"] button[disabled] {
    color: var(--pagination-fg-disabled, var(--pagination-fg-disabled-default));
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── Ellipsis ── */
  [slot="nav"] [data-ellipsis] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
    height: var(--pagination-button-size, var(--pagination-button-size-default));
    color: var(--pagination-fg-muted, var(--pagination-fg-muted-default));
    font-size: var(--pagination-font, var(--pagination-font-default));
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }

  /* ── Focus visible ── */
  [slot="nav"] button:focus-visible {
    outline: none;
    box-shadow: var(--pagination-focus-ring, var(--pagination-focus-ring-default));
  }

  /* ═══════════════════════════════════════════════════════════
     VARIANT: button — square 1:1 aspect-ratio page buttons
     ═══════════════════════════════════════════════════════════ */

  :scope[variant="button"] {
    --pagination-nav-bg-default:              var(--a-bg);
    --pagination-nav-border-default:          var(--a-border-subtle);
    --pagination-nav-border-hover-default:    var(--a-border);
    --pagination-nav-bg-disabled-default:     var(--a-bg);
    --pagination-nav-border-disabled-default: var(--a-border-subtle);
  }

  :scope[variant="button"] [slot="nav"] button {
    width: var(--pagination-button-size, var(--pagination-button-size-default));
    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
    height: var(--pagination-button-size, var(--pagination-button-size-default));
    padding: 0;
    aspect-ratio: 1;
    border: 1px solid var(--pagination-nav-border, var(--pagination-nav-border-default));
    border-radius: var(--pagination-radius, var(--pagination-radius-default));
    background: var(--pagination-nav-bg, var(--pagination-nav-bg-default));
  }

  :scope[variant="button"] [slot="nav"] button:not([disabled]):hover {
    border-color: var(--pagination-nav-border-hover, var(--pagination-nav-border-hover-default));
    background: var(--pagination-bg-hover, var(--pagination-bg-hover-default));
  }

  :scope[variant="button"] [slot="nav"] button[data-active] {
    border-color: transparent;
    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
  }

  :scope[variant="button"] [slot="nav"] button[data-active]:hover {
    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
  }

  :scope[variant="button"] [slot="nav"] button[disabled] {
    border-color: var(--pagination-nav-border-disabled, var(--pagination-nav-border-disabled-default));
    background: var(--pagination-nav-bg-disabled, var(--pagination-nav-bg-disabled-default));
  }
}
