@use "../tokens" as *;

// Paginación compacta de listados (BasePagination.vue): anterior /
// números de página (con elisión «…») / siguiente.
.base-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $space-2;

  // Anterior/siguiente: fondo SEMIOPACO + borde; el chevron (lucide,
  // stroke: currentColor) hereda el color del TEXTO del botón — nunca el
  // acento.
  &__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    // 32px a propósito: control secundario, un punto por debajo de los 36px
    // de los controles de formulario.
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, $surface 65%, transparent);
    border: 1px solid $border;
    border-radius: $radius-sm;
    color: $text-2;
    transition: color 0.15s ease, border-color 0.15s ease;

    &:not(:disabled):hover {
      color: $text-1;
      border-color: $border-strong;
    }

    &:disabled {
      opacity: $disabled-opacity;
      cursor: not-allowed;
    }
  }

  // Números de página clicables; el actual, marcado con aria-current.
  // Los que NO son el actual van en caja como prev/next (fondo semiopaco +
  // borde visibles ya en reposo); al hover, acento sutil: tinte de acento
  // al 12% de fondo y el número en color de acento. El actual, como
  // siempre: relleno de acento con texto de contraste.
  &__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 $space-1;
    background: color-mix(in srgb, $surface 65%, transparent);
    border: 1px solid $border;
    border-radius: $radius-sm;
    color: $text-2;
    font-size: $fs-13;
    // Más peso sin tocar el tamaño de la caja (32px se quedan como están).
    font-weight: $k-fw-semibold;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

    &:hover {
      color: $accent-500;
      background: color-mix(in srgb, $accent-500 12%, transparent);
    }

    &[aria-current="page"] {
      background: $accent-500;
      border-color: $accent-500;
      @include contrast-text($accent-500);
      cursor: default;
    }
  }

  &__ellipsis {
    min-width: 20px;
    text-align: center;
    color: $text-3;
    font-size: $fs-13;
    user-select: none;
  }
}