/*
Pagination

<nav class="pagination">
  <ul class="pagination-content">
    <li class="pagination-item">
      <a|button class="button is-ghost|is-outline pagination-link [is-square]">
      <span class="pagination-ellipsis">

Page links are .button (ghost, or outline for the current page); both
have the same border width, so the current page never changes size.
Numbers are tabular so a page of the same digit count is the same width.
Previous and Next drop their text on a phone.
*/

@layer components {

.pagination {
  display:         flex;
  justify-content: center;
  width:           100%;
  min-width:       0;
}

.pagination-content {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1);
  margin:      0;
  padding:     0;
  list-style:  none;
}

.pagination-item {
  display: flex;
  margin:  0;
  padding: 0;
}

/* Every page slot (page buttons and ellipses) reserves the width of the
   widest page number (--pagination-digits, set by Pagination from total),
   so page 600 is as wide as page 2 and nothing moves as the page changes.
   Tabular digits are 1ch each. */
.pagination {
  --pagination-height: var(--control-height);
  --pagination-pad:    var(--space-2);
  --pagination-font:   var(--text-ui);
  --pagination-slot:   max(var(--pagination-height), calc(var(--pagination-digits, 2) * 1ch + 2 * var(--pagination-pad) + 2 * var(--control-border-width)));
}

.pagination.is-sm {
  --pagination-height: var(--control-height-sm);
  --pagination-pad:    var(--space-1-5);
  --pagination-font:   var(--text-ui-sm);
}

.pagination.is-lg {
  --pagination-height: var(--control-height-lg);
  --pagination-pad:    var(--space-2-5);
  --pagination-font:   var(--text-ui-lg);
}

.pagination-link.button {
  min-width:            var(--control-height);
  padding:              0 var(--space-2);
  font-variant-numeric: tabular-nums;
}

.pagination-link.button.is-sm {
  min-width: var(--control-height-sm);
  padding:   0 var(--space-1-5);
}

.pagination-link.button.is-lg {
  min-width: var(--control-height-lg);
  padding:   0 var(--space-2-5);
}

.pagination .pagination-link.button[data-page] {
  min-width: var(--pagination-slot);
  padding:   0 var(--pagination-pad);
}

.pagination-link.button.is-square {
  width:   var(--control-height);
  padding: 0;
}

.pagination-link.button.is-sm.is-square {
  width: var(--control-height-sm);
}

.pagination-link.button.is-lg.is-square {
  width: var(--control-height-lg);
}

/* variant="outlined" (MUI): every page and control has a border; the
   current page is marked by its accent border and a muted fill. */
.pagination.is-outlined .pagination-link.button[data-active] {
  background:   var(--bg-muted);
  border-color: var(--accent);
}

/* color="primary" | "secondary" (MUI, Mantine): the current page fills with
   that button role, in either variant; the other pages keep their look. */
.pagination.is-primary .pagination-link.button[data-active] {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--accent-ink);
}

.pagination.is-secondary .pagination-link.button[data-active] {
  background:   var(--secondary);
  border-color: var(--secondary);
  color:        var(--secondary-ink);
}

/* The icon slot of a control and an ellipsis: the caller's icon or the default. */
.pagination-icon {
  display:     inline-flex;
  align-items: center;
}

.pagination-link.button[data-active] {
  pointer-events: none;
}

.pagination-previous.button,
.pagination-next.button {
  gap:     var(--space-1);
  padding: 0 var(--space-2-5);
}

.pagination-previous svg,
.pagination-next svg,
.pagination-first svg,
.pagination-last svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.pagination.is-lg .pagination-link svg,
.pagination.is-lg .pagination-ellipsis svg {
  width:  var(--icon-size-lg);
  height: var(--icon-size-lg);
}

:dir(rtl) .pagination-previous svg,
:dir(rtl) .pagination-next svg,
:dir(rtl) .pagination-first svg,
:dir(rtl) .pagination-last svg {
  scale: -1 1;
}

.pagination-ellipsis {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--control-height);
  height:          var(--control-height);
  color:           var(--ink-dim);
}

/* Inside Pagination an ellipsis is a page slot: as wide as a page button,
   measured in the same font so 1ch matches. */
.pagination .pagination-item.is-number > .pagination-ellipsis {
  width:       var(--pagination-slot);
  height:      var(--pagination-height);
  font-family: var(--font-ui);
  font-size:   var(--pagination-font);
  font-weight: var(--weight-ui);
}

.pagination.is-sm .pagination-ellipsis {
  width:  var(--control-height-sm);
  height: var(--control-height-sm);
}

.pagination-ellipsis svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.pagination-status {
  display:              flex;
  flex-direction:       column;
  justify-content:      center;
  align-items:          center;
  padding:              0 var(--space-2);
  font-family:          var(--font-ui);
  font-size:            var(--text-ui);
  font-variant-numeric: tabular-nums;
  color:                var(--ink-soft);
  white-space:          nowrap;
}

/* The longest status, reserved as a zero-height line, so the status is as
   wide as its longest text and Next stays put as the page changes. */
.pagination-status::after {
  content:    attr(data-reserve);
  height:     0;
  overflow:   hidden;
  visibility: hidden;
}

/* PHONE: the controls keep their icons. */
@media (max-width: 40rem) {
  .pagination-text {
    position:    absolute;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip:        rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Seven items and two controls fit a 390px screen at the small height. */
  .pagination-content {
    gap: 0;
  }

  .pagination-link.button,
  .pagination-previous.button,
  .pagination-next.button {
    height:    var(--control-height-sm);
    min-width: var(--control-height-sm);
    padding:   0 var(--space-1);
  }

  .pagination-link.button.is-square {
    width: var(--control-height-sm);
  }

  /* size=lg steps down with the rest, so the pager still fits one line. */
  .pagination-link.button.is-lg {
    height:    var(--control-height-sm);
    min-width: var(--control-height-sm);
    padding:   0 var(--space-1);
  }

  .pagination-link.button.is-lg.is-square {
    width: var(--control-height-sm);
  }

  .pagination-ellipsis {
    width:  var(--control-height-sm);
    height: var(--control-height-sm);
  }

  .pagination,
  .pagination.is-sm,
  .pagination.is-lg {
    --pagination-height: var(--control-height-sm);
    --pagination-pad:    var(--space-1);
  }

  .pagination .pagination-link.button[data-page] {
    height: var(--control-height-sm);
  }
}

/* layout="responsive" (Mantine): the nav is a container, and in a narrow
   one, a sidebar or a phone, the pages give way to the "Page X of Y"
   status between Previous and Next, which keep only their chevrons. It
   answers the container's width, not the viewport's. */
.pagination.is-responsive {
  container: pagination / inline-size;
}

.pagination-item.is-compact {
  display: none;
}

@container pagination (max-width: 30rem) {
  .pagination-item.is-number {
    display: none;
  }

  .pagination-item.is-compact {
    display: flex;
  }

  /* Icons keep Previous and Next on the status's line. */
  .pagination-text {
    position:    absolute;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip:        rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Dim from the effective state: the disabled prop, or every page button
   disabled for input by an ancestor (a disabled fieldset). */
.pagination:is([data-disabled], :has(button.pagination-link:disabled):not(:has(button.pagination-link:enabled))) :is(.pagination-ellipsis, .pagination-status) {
  opacity: var(--opacity-disabled);
}

}