@use '../../theme/styles' as theme;

.wr-pagination {
  display: block;

  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  // Opt-in (`responsive`): query the control's own width so it collapses to a
  // compact pager when narrow. `inline-size` containment drops content-based
  // sizing, so pin the box to its container's width.
  &--responsive {
    container: wr-pagination / inline-size;
    width: 100%;
  }

  &__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  &--start &__inner {
    justify-content: flex-start;
  }
  &--center &__inner {
    justify-content: center;
  }
  &--end &__inner {
    justify-content: flex-end;
  }

  &__total {
    color: var(--wr-color-medium);
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-text-sm);
  }

  &__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    .wr-btn {
      min-width: var(--wr-pagination-cell, 2rem);
      // Lock height to the cell so every size renders square cells —
      // the button's own padding would otherwise make them taller than
      // wide. Wider page numbers still grow past min-width.
      height: var(--wr-pagination-cell, 2rem);
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }

  &__ellipsis {
    display: inline-flex;
    min-width: var(--wr-pagination-cell, 2rem);
    justify-content: center;
    color: var(--wr-color-medium);
    user-select: none;
  }

  // Compact pager label ("3 / 10"). Hidden until responsive mode swaps it in
  // for the numbered cells on a narrow box.
  &__current {
    display: none;
    align-items: center;
    padding: 0 0.375rem;
    color: var(--wr-color-dark);
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  &__size {
    min-width: 0;
  }

  // Size variants — set the cell size; each button gets the matching [size].
  &--sm {
    --wr-pagination-cell: 1.75rem;
  }
  &--md {
    --wr-pagination-cell: 2rem;
  }
  &--lg {
    --wr-pagination-cell: 2.5rem;
  }

  // Shape variants. `rounded` is the default the buttons already render.
  // `square` flattens every cell for a tighter numeric grid — useful
  // when the pagination sits inside a data table. End caps keep a small
  // radius so the strip still reads as a single grouped control.
  &--square &__nav .wr-btn {
    --wr-btn-radius: 0;
    corner-shape: round;
    border-radius: 0;
  }
  &--square &__nav .wr-btn:first-child {
    border-top-left-radius: var(--wr-border-radius-sm);
    border-bottom-left-radius: var(--wr-border-radius-sm);
  }
  &--square &__nav .wr-btn:last-child {
    border-top-right-radius: var(--wr-border-radius-sm);
    border-bottom-right-radius: var(--wr-border-radius-sm);
  }
}

// Responsive pagination collapses the numbered strip to a compact
// `‹ page / total ›` pager when its own box is too narrow.
@container wr-pagination (max-width: 24rem) {
  .wr-pagination--responsive .wr-pagination__page,
  .wr-pagination--responsive .wr-pagination__ellipsis {
    display: none;
  }

  .wr-pagination--responsive .wr-pagination__current {
    display: inline-flex;
  }
}