/* ============================================
   <xm-pagination> — numbered page controls.

   Surface / ink (AD-13): a transparent control row tracing its host surface.
   Idle controls take var(--md-sys-color-on-surface-variant) ink; the CURRENT
   page is a coral chip — var(--md-sys-color-primary) fill + var(--md-sys-color-on-primary)
   ink (matched to the coral fill). Hairline 1px borders only (2px is reserved
   for drag-active, not used here). Disabled edges use the shared reduced-
   emphasis treatment — no error color.

   BEM: block `pagination`; elements `__item` `__page` `__prev` `__next`
   `__ellipsis`; modifiers `__page--current`, size `--xs|sm|md|lg`.
   ============================================ */

.pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* ---------- Shared control chrome ---------- */
.pagination__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-button);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.pagination__item:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
}
.pagination__item:focus {
  outline: none;
}
.pagination__item:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}
.pagination__item svg {
  flex-shrink: 0;
}

/* ---------- Sizes — one shared control height per size ---------- */
.pagination--xs .pagination__item { min-width: 22px; height: 22px; padding: 0 var(--s-1); font-size: var(--md-sys-typescale-label-small-size); }
.pagination--sm .pagination__item { min-width: 26px; height: 26px; padding: 0 var(--s-2); font-size: var(--md-sys-typescale-body-small-size); }
.pagination--md .pagination__item { min-width: 32px; height: 32px; padding: 0 var(--s-2); font-size: var(--md-sys-typescale-body-medium-size); }
.pagination--lg .pagination__item { min-width: 42px; height: 42px; padding: 0 var(--s-3); font-size: var(--md-sys-typescale-title-small-size); }

/* ---------- Current page — coral chip ----------
   The page digit is text on the coral fill, so it uses --xm-color-primary-fill
   (the darker coral) for WCAG AA, not the lighter --md-sys-color-primary. */
.pagination__page--current {
  background: var(--xm-color-primary-fill);
  border-color: var(--xm-color-primary-fill);
  color: var(--md-sys-color-on-primary);
}
.pagination__page--current:hover {
  background: var(--xm-color-primary-fill);
  border-color: var(--xm-color-primary-fill);
  color: var(--md-sys-color-on-primary);
}

/* ---------- Ellipsis ---------- */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--md-sys-color-on-surface-variant);
  user-select: none;
}

/* ---------- Disabled edges — shared reduced emphasis ---------- */
.pagination__item[disabled] {
  cursor: not-allowed;
  color: var(--xm-color-on-surface-disabled);
  box-shadow: none;
}
.pagination__item[disabled]:hover {
  background: transparent;
  color: var(--xm-color-on-surface-disabled);
  border-color: var(--md-sys-color-outline-variant);
}