/* pagination-enhanced.css */

/**
 * Complete Pagination Component System
 * Full WCAG 2.2 & ARIA compliance
 * All variants and styles
 */

/* ========================================
   BASE VARIABLES
   ======================================== */

:root {
  /* Pagination specific tokens */
  --c-pagination-gap: var(--ds-space-xs);
  --c-pagination-item-size: 2.5rem;
  --c-pagination-item-min-width: 2.5rem;
  --c-pagination-item-padding-inline: var(--ds-space-m);
  --c-pagination-item-padding-block: var(--ds-space-s);
  --c-pagination-border-radius: var(--ds-radius-m);
  --c-pagination-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Typography */
  --c-pagination-font-size: var(--ds-font-size-m);
  --c-pagination-font-weight: var(--ds-font-weight-medium);
  
  /* Colors */
  --c-pagination-bg: transparent;
  --c-pagination-bg-hover: var(--ds-color-button-hover);
  --c-pagination-bg-active: var(--ds-color-accent);
  --c-pagination-border-color: var(--ds-color-border);
  --c-pagination-text-color: var(--ds-color-text);
  --c-pagination-text-color-active: var(--ds-color-text-on-accent);
}


/* ========================================
   STANDARD PAGINATION
   ======================================== */

.c-pagination-wrapper {
  display: flex;
  align-items: center;
  gap: var(--ds-space-m);
  flex-wrap: wrap;
}

.c-pagination-wrapper--center {
  justify-content: center;
}

.c-pagination-wrapper--end {
  justify-content: flex-end;
}

.c-pagination-wrapper--space-between {
  justify-content: space-between;
}

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

.c-pagination__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Base link/button styles */
.c-pagination__link,
.c-pagination__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-pagination-item-min-width);
  height: var(--c-pagination-item-size);
  padding: var(--c-pagination-item-padding-block) var(--c-pagination-item-padding-inline);
  background: var(--c-pagination-bg);
  border: 1px solid transparent;
  border-radius: var(--c-pagination-border-radius);
  color: var(--c-pagination-text-color);
  font-size: var(--c-pagination-font-size);
  font-weight: var(--c-pagination-font-weight);
  font-family: var(--ds-font-family-sans);
  text-decoration: none;
  cursor: pointer;
  transition: var(--c-pagination-transition);
  position: relative;
  user-select: none;
  white-space: nowrap;
  gap: var(--ds-space-xs);
  outline: none;
}

/* Hover state */
.c-pagination__link:hover:not(:disabled),
.c-pagination__control:hover:not(:disabled) {
  background: var(--c-pagination-bg-hover);
  z-index: 1;
}

/* Active/Current page */
.c-pagination__link--active,
.c-pagination__link[aria-current="page"] {
  background: var(--c-pagination-bg-active);
  color: var(--c-pagination-text-color-active);
  font-weight: var(--ds-font-weight-semibold);
}

/* Focus state */
.c-pagination__link:focus-visible,
.c-pagination__control:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
  z-index: 2;
}

/* Disabled state */
.c-pagination__link:disabled,
.c-pagination__link[aria-disabled="true"],
.c-pagination__control:disabled,
.c-pagination__control[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Control specific */
.c-pagination__control {
  gap: var(--ds-space-s);
}

.c-pagination__control--icon-only {
  padding: var(--c-pagination-item-padding-block);
  min-width: var(--c-pagination-item-size);
}

.c-pagination__control-text {
  font-size: var(--c-pagination-font-size);
}

/* Icons */
.c-pagination__link [data-lucide],
.c-pagination__control [data-lucide] {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Ellipsis */
.c-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-pagination-item-min-width);
  height: var(--c-pagination-item-size);
  color: var(--c-pagination-text-color);
  font-size: var(--c-pagination-font-size);
  user-select: none;
}

/* Info text */
.c-pagination__info {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  color: var(--ds-color-text-weak);
  font-size: var(--ds-font-size-s);
}

.c-pagination__info-text {
  white-space: nowrap;
}

/* Page selector */
.c-pagination__select {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-s);
}

.c-pagination__select-label {
  color: var(--ds-color-text-weak);
  font-size: var(--ds-font-size-s);
  white-space: nowrap;
}

.c-pagination__select-input {
  min-width: 4rem;
  padding: var(--ds-space-xs) var(--ds-space-s);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-s);
  cursor: pointer;
}

.c-pagination__select-input:hover {
  border-color: var(--ds-color-border-hover);
}

.c-pagination__select-input:focus {
  border-color: var(--ds-color-accent);
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Extra Small */
.c-pagination--xs {
  --c-pagination-item-size: 1.75rem;
  --c-pagination-item-min-width: 1.75rem;
  --c-pagination-item-padding-inline: var(--ds-space-s);
  --c-pagination-item-padding-block: var(--ds-space-xs);
  --c-pagination-font-size: var(--ds-font-size-xs);
  --c-pagination-gap: 2px;
}

/* Small */
.c-pagination--small {
  --c-pagination-item-size: 2rem;
  --c-pagination-item-min-width: 2rem;
  --c-pagination-item-padding-inline: var(--ds-space-s);
  --c-pagination-item-padding-block: calc(var(--ds-space-xs) * 1.5);
  --c-pagination-font-size: var(--ds-font-size-s);
  --c-pagination-gap: var(--ds-space-xs);
}

/* Large */
.c-pagination--large {
  --c-pagination-item-size: 3rem;
  --c-pagination-item-min-width: 3rem;
  --c-pagination-item-padding-inline: var(--ds-space-l);
  --c-pagination-item-padding-block: var(--ds-space-m);
  --c-pagination-font-size: var(--ds-font-size-l);
  --c-pagination-gap: var(--ds-space-s);
}

/* ========================================
   STYLE VARIANTS
   ======================================== */

/* Bordered */
.c-pagination--bordered .c-pagination__link,
.c-pagination--bordered .c-pagination__control {
  border-color: var(--c-pagination-border-color);
}

/* Rounded */
.c-pagination--rounded {
  --c-pagination-border-radius: var(--ds-radius-circle);
}

/* Pills */
.c-pagination--pills {
  --c-pagination-border-radius: var(--ds-radius-pill);
}

/* Minimal */
.c-pagination--minimal .c-pagination__link,
.c-pagination--minimal .c-pagination__control {
  border: none;
  background: transparent;
}

.c-pagination--minimal .c-pagination__link:hover:not(:disabled),
.c-pagination--minimal .c-pagination__control:hover:not(:disabled) {
  background: var(--ds-color-button-hover);
}

/* Compact */
.c-pagination--compact {
  --c-pagination-gap: 0;
}

.c-pagination--compact .c-pagination__link,
.c-pagination--compact .c-pagination__control {
  border-radius: 0;
  border-right-width: 0;
}

.c-pagination--compact .c-pagination__item:first-child .c-pagination__link,
.c-pagination--compact .c-pagination__item:first-child .c-pagination__control {
  border-top-left-radius: var(--c-pagination-border-radius);
  border-bottom-left-radius: var(--c-pagination-border-radius);
}

.c-pagination--compact .c-pagination__item:last-child .c-pagination__link,
.c-pagination--compact .c-pagination__item:last-child .c-pagination__control {
  border-top-right-radius: var(--c-pagination-border-radius);
  border-bottom-right-radius: var(--c-pagination-border-radius);
  border-right-width: 1px;
}

/* ========================================
   DOT PAGINATION
   ======================================== */

.c-pagination-dots {
  padding: var(--ds-space-m);
}

.c-pagination-dots__list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-pagination-dots__item {
  margin: 0;
  padding: 0;
}

.c-pagination-dots__dot {
  display: block;
  border-radius: var(--ds-radius-circle);
  background: var(--ds-color-border-strong);
  border: none;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  position: relative;
  padding: 0;
}

/* Focus ring for dots */
.c-pagination-dots__dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--ds-radius-circle);
}

.c-pagination-dots__dot:hover {
  background: var(--ds-color-border-hover);
  transform: scale(1.2);
}

.c-pagination-dots__dot--active,
.c-pagination-dots__dot[aria-current="page"] {
  background: var(--ds-color-accent);
}

.c-pagination-dots__dot:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* Dot sizes */
.c-pagination-dots__list--small .c-pagination-dots__dot {
  width: 8px;
  height: 8px;
}

.c-pagination-dots__list--medium .c-pagination-dots__dot {
  width: 10px;
  height: 10px;
}

.c-pagination-dots__list--large .c-pagination-dots__dot {
  width: 12px;
  height: 12px;
}

/* ========================================
   LINE PAGINATION
   ======================================== */

.c-pagination-lines {
  padding: var(--ds-space-m);
}

.c-pagination-lines__list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 200px;
}

.c-pagination-lines__item {
  margin: 0;
  padding: 0;
  flex: 1;
}

.c-pagination-lines__line {
  display: block;
  width: 100%;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-border);
  border: none;
  cursor: pointer;
  transition: all var(--ds-duration-normal) var(--ds-ease-out);
  position: relative;
  padding: 0;
}

/* Focus ring for lines */
.c-pagination-lines__line::after {
  content: '';
  position: absolute;
  inset: -8px -4px;
  border-radius: var(--ds-radius-s);
}

.c-pagination-lines__line:hover {
  background: var(--ds-color-border-hover);
  transform: scaleY(1.3);
}

.c-pagination-lines__line--active,
.c-pagination-lines__line[aria-current="page"] {
  background: var(--ds-color-accent);
  transform: scaleY(1.5);
}

.c-pagination-lines__line:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* Line sizes */
.c-pagination-lines__list--thin .c-pagination-lines__line {
  height: 6px;
}

.c-pagination-lines__list--medium .c-pagination-lines__line {
  height: 8px;
}

.c-pagination-lines__list--thick .c-pagination-lines__line {
  height: 10px;
}

/* ========================================
   BUTTON GROUP PAGINATION
   ======================================== */

.c-pagination-group {
  display: flex;
  width: 100%;
}

.c-pagination-group__container {
  display: inline-flex;
  border-radius: var(--ds-radius-l);
  box-shadow: var(--ds-shadow-s);
  overflow: hidden;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
}

.c-pagination-group__container--center {
  margin: 0 auto;
}

.c-pagination-group__container--left {
  margin-right: auto;
}

.c-pagination-group__container--right {
  margin-left: auto;
}

.c-pagination-group__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-s);
  padding: var(--ds-space-s) var(--ds-space-m);
  background: var(--ds-color-surface);
  border: none;
  border-right: 1px solid var(--ds-color-border);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  font-family: var(--ds-font-family-sans);
  text-decoration: none;
  cursor: pointer;
  transition: var(--ds-duration-fast) var(--ds-ease-out);
  position: relative;
  user-select: none;
  white-space: nowrap;
  min-width: 3rem;
  height: 2.5rem;
}

.c-pagination-group__button:last-child {
  border-right: none;
}

.c-pagination-group__button:hover:not(:disabled) {
  background: var(--ds-color-button-hover);
  z-index: 1;
}

.c-pagination-group__button--active,
.c-pagination-group__button[aria-current="page"] {
  background: var(--ds-color-accent);
  color: var(--ds-color-text-on-accent);
  font-weight: var(--ds-font-weight-semibold);
}

.c-pagination-group__button:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: -2px;
  z-index: 2;
}

.c-pagination-group__button:disabled,
.c-pagination-group__button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-weakest);
}

.c-pagination-group__button--first {
  padding-left: var(--ds-space-m);
  padding-right: var(--ds-space-m);
  min-width: auto;
}

.c-pagination-group__button--last {
  padding-left: var(--ds-space-m);
  padding-right: var(--ds-space-m);
  min-width: auto;
}

.c-pagination-group__button [data-lucide] {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ========================================
   MOBILE SPECIFIC
   ======================================== */

.c-pagination--mobile-simplified .c-pagination__item:not(:first-child):not(:last-child):not(.c-pagination__item--mobile-info) {
  display: none;
}

.c-pagination__item--mobile-info {
  flex: 1;
  text-align: center;
}

.c-pagination__mobile-text {
  color: var(--ds-color-text-weak);
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
  .c-pagination-wrapper {
    justify-content: center;
  }
  
  .c-pagination--responsive .c-pagination__item:not(:first-child):not(:last-child) {
    display: none;
  }
  
  .c-pagination--responsive .c-pagination__item--active,
  .c-pagination--responsive .c-pagination__item--active + .c-pagination__item,
  .c-pagination--responsive .c-pagination__item:has(+ .c-pagination__item--active) {
    display: block;
  }
  
  .c-pagination__control-text {
    display: none;
  }
  
  .c-pagination__control {
    padding: var(--c-pagination-item-padding-block);
    min-width: var(--c-pagination-item-size);
  }
  
  .c-pagination__info {
    width: 100%;
    justify-content: center;
  }
  
  .c-pagination-group__button span:not([data-lucide]) {
    display: none;
  }
  
  .c-pagination-group__button--first,
  .c-pagination-group__button--last {
    padding: var(--ds-space-s);
  }
}

@media (min-width: 641px) {
  .c-pagination__item--mobile-info {
    display: none;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  .c-pagination__link,
  .c-pagination__control {
    border: 2px solid currentColor;
  }
  
  .c-pagination__link--active,
  .c-pagination__link[aria-current="page"] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
  
  .c-pagination-dots__dot {
    border: 2px solid currentColor;
  }
  
  .c-pagination-lines__line {
    border: 1px solid currentColor;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .c-pagination__link,
  .c-pagination__control,
  .c-pagination-dots__dot,
  .c-pagination-lines__line,
  .c-pagination-group__button {
    transition: none;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-pagination,
  .c-pagination-dots,
  .c-pagination-lines,
  .c-pagination-group {
    display: none;
  }
}