:root {
  --nexus-pagination-height: 40px;
  --nexus-pagination-width: 40px;

  /* Spacing */
  --nexus-pagination-gap: var(--nexus-ref-spacing-10);
  --nexus-pagination-gap-sm: var(--nexus-ref-spacing-6);
  --nexus-pagination-gap-md: var(--nexus-ref-spacing-8);
  --nexus-pagination-gap-lg: var(--nexus-ref-spacing-12);
  --nexus-pagination-padding-sm: var(--nexus-ref-spacing-10);
  --nexus-pagination-padding-md: var(--nexus-ref-spacing-14);
  --nexus-pagination-padding-lg: var(--nexus-ref-spacing-8) var(--nexus-ref-spacing-14);
  --nexus-pagination-container-padding: var(--nexus-ref-spacing-20) var(--nexus-ref-spacing-24);

  /* Typography */
  --nexus-pagination-font-size: var(--nexus-ref-text-font-size-sm);
  --nexus-pagination-font-weight-medium: var(--nexus-ref-font-weight-medium);
  --nexus-pagination-font-weight-semibold: var(--nexus-ref-font-weight-semibold);
  --nexus-pagination-icon-size: 20px;

  /* Colors */
  --nexus-pagination-container-border:  var(--nexus-ref-neutral-100);
  --nexus-pagination-border: var(--nexus-ref-neutral-90);
  --nexus-pagination-border-disabled: var(--nexus-ref-neutral-100);
  --nexus-pagination-bg: var(--nexus-ref-primary-100);
  --nexus-pagination-bg-dropdown: var(--nexus-ref-primary-100);
  --nexus-pagination-hover-bg: var(--nexus-ref-primary-90);
  --nexus-pagination-active-bg: var(--nexus-ref-primary-90);
  --nexus-pagination-dropdown-active-bg: var(--nexus-ref-neutral-100);
  --nexus-pagination-text: var(--nexus-ref-neutral-50);
  --nexus-pagination-text-page: var(--nexus-ref-neutral-80);
  --nexus-pagination-text-button: var(--nexus-ref-neutral-50);
  --nexus-pagination-text-color-trigger: var(--nexus-ref-neutral-50);
  --nexus-pagination-text-current: var(--nexus-ref-primary-20);
  --nexus-pagination-text-selected: var(--nexus-ref-neutral-20);
  --nexus-pagination-text-hover: var(--nexus-ref-primary-20);
  --nexus-pagination-muted: var(--nexus-ref-neutral-50);
  --nexus-pagination-focus-color: var(--nexus-ref-primary-80);
  --nexus-pagination-button-color: var(--nexus-ref-neutral-95);
  /* Effects */
  --nexus-pagination-radius: var(--nexus-ref-shape-corner-small);
  --nexus-pagination-radius-dropdown: 10px;
  --nexus-pagination-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --nexus-pagination-focus: 0 0 0 3px var(--nexus-pagination-focus-color);

  /* Caret */
  --nexus-pagination-caret-size: 10px;

  /* Dropdown */
  --nexus-pagination-dropdown-offset: 6px;
  --nexus-pagination-dropdown-padding-y: 6px;
  --nexus-pagination-dropdown-padding-x: 12px;
  --nexus-pagination-dropdown-button-padding-y: 10px;
  --nexus-pagination-dropdown-max-height: 240px;
  --nexus-pagination-dropdown-z-index: 20;
}

.nexus-pagination {
  display: flex;
  align-items: center;
  gap: var(--nexus-pagination-gap-lg);
  font-size: var(--nexus-pagination-font-size);
  color: var(--nexus-pagination-text);
  line-height: 1.4;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: var(--nexus-pagination-container-padding);
  border-top:1px solid var(--nexus-pagination-container-border);
  box-sizing: border-box;
}

.nexus-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nexus-pagination-gap-lg);
  flex-wrap: wrap;
  width: 100%;
}

.nexus-pagination-btn,
.nexus-pagination-page,
.nexus-pagination-size-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nexus-pagination-gap-sm);
  height: var(--nexus-pagination-height);
  padding: 0 var(--nexus-pagination-padding-md);
  border: 1px solid var(--nexus-pagination-border);
  border-radius: var(--nexus-pagination-radius);
  background: var(--nexus-pagination-bg);
  color: var(--nexus-pagination-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-size: var(--nexus-pagination-font-size);
  font-weight: var(--nexus-pagination-font-weight-medium);
  box-sizing: border-box;
}

.nexus-pagination-btn {
  padding-inline: var(--nexus-pagination-padding-lg);
  color: var(--nexus-pagination-text-button);
  border:1px solid var(--nexus-pagination-button-color);
}

.nexus-pagination-btn[disabled] {
  color: var(--nexus-pagination-muted);
  cursor: not-allowed;
}

.nexus-pagination-btn:not([disabled]):hover,
.nexus-pagination-page:hover {
  background: var(--nexus-pagination-hover-bg);
  border-color: var(--nexus-pagination-hover-bg);
}

.nexus-pagination-btn:focus-visible,
.nexus-pagination-page:focus-visible,
.nexus-pagination-size-trigger:focus-visible,
.nexus-pagination-dropdown button:focus-visible {
  outline: none;
  box-shadow: var(--nexus-pagination-focus);
}

.nexus-pagination-page {
  min-width: 40px;
  padding-inline: var(--nexus-pagination-padding-sm);
  border: none;
  color: var(--nexus-pagination-text-page);
}
.nexus-pagination-page:hover {
  color:var(--nexus-pagination-text-hover);
}

.nexus-pagination-page:active:not(.is-current) {
  box-shadow: var(--nexus-pagination-focus);
}

.nexus-pagination-page.is-current {
  background: var(--nexus-pagination-active-bg);
  border-color: var(--nexus-pagination-active-bg);
  color: var(--nexus-pagination-text-current);
}

.nexus-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--nexus-pagination-gap-lg);
}

.nexus-pagination-number-list {
  display: flex;
  align-items: center;
  gap: var(--nexus-pagination-gap-lg);
}

.nexus-pagination-ellipsis {
  color: var(--nexus-pagination-muted);
  padding: 0 var(--nexus-pagination-gap-sm);
  user-select: none;
}

.nexus-pagination-current,
.nexus-pagination-size {
  position: relative;
}

.nexus-pagination-caret {
  width: var(--nexus-pagination-caret-size);
  height: var(--nexus-pagination-caret-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nexus-pagination-caret img {
  width: var(--nexus-pagination-caret-size);
  height: var(--nexus-pagination-caret-size);
  display: block;
  transition: transform 0.2s ;
  transform-origin: center;
}
.nexus-pagination-current.is-open .nexus-pagination-caret img,
.nexus-pagination-size.is-open .nexus-pagination-caret img,
.nexus-pagination-current:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
.nexus-pagination-size:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img {
  transform: rotate(180deg);
}

.nexus-pagination-dropdown {
  position: absolute;
  bottom: calc(100% + var(--nexus-pagination-dropdown-offset));
  left: 0;
  background: var(--nexus-pagination-bg-dropdown);
  border: none;
  border-radius: var(--nexus-pagination-radius-dropdown);
  padding: var(--nexus-pagination-dropdown-padding-y) 0;
  margin: 0;
  list-style: none;
  box-shadow: var(--nexus-pagination-shadow);
  display: none;
  z-index: var(--nexus-pagination-dropdown-z-index);
  max-height: var(--nexus-pagination-dropdown-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  width: auto;
}

.nexus-pagination-dropdown::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.nexus-pagination-dropdown[data-align="end"] {
  right: 0;
  left: auto;
}

.nexus-pagination-dropdown.open {
  display: block;
}

.nexus-pagination-dropdown li {
  padding: 0;
  margin: 0;
}

.nexus-pagination-dropdown button {
  width: 100%;
  padding: var(--nexus-pagination-dropdown-button-padding-y) var(--nexus-pagination-dropdown-padding-x);
  border: none;
  background: transparent;
  text-align: left;
  color: var(--nexus-pagination-text);
  cursor: pointer;
  font-size: var(--nexus-pagination-font-size);
  font-weight: var(--nexus-pagination-font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.nexus-pagination-dropdown button:hover {
  background: var(--nexus-pagination-hover-bg);
}

.nexus-pagination-dropdown button[aria-selected="true"] {
  background: var(--nexus-pagination-dropdown-active-bg);
  color: var(--nexus-pagination-text-selected);
}

.nexus-pagination-info {
  display: flex;
  align-items: center;
  gap: var(--nexus-pagination-gap-sm);
  flex-wrap: wrap;
}

.nexus-pagination-info .label-muted {
  color: var(--nexus-pagination-muted);
  font-size: var(--nexus-pagination-font-size);
  font-weight: var(--nexus-pagination-font-weight-medium);
}

.nexus-pagination-size-trigger {
  padding-inline:0;
  border: none;
  text-decoration: underline;
  color: var(--nexus-pagination-text-color-trigger);
  background-color: transparent;
}
.nexus-pagination-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nexus-pagination-muted);
}

.nexus-pagination-btn .nexus-pagination-icon {
  font-size: var(--nexus-pagination-icon-size);
}

.nexus-pagination-info .nexus-pagination-size {
  display: inline-flex;
  align-items: center;
}

.nexus-pagination-info strong {
  font-weight: var(--nexus-pagination-font-weight-semibold);
}

/* RTL Support - Flip arrow icons in right-to-left languages */
[dir="rtl"] .nexus-pagination-icon img,
.nexus-pagination[dir="rtl"] .nexus-pagination-icon img,
html[dir="rtl"] .nexus-pagination-icon img {
  transform: scaleX(-1);
}

/* Ensure caret rotation still works in RTL */
[dir="rtl"] .nexus-pagination-current.is-open .nexus-pagination-caret img,
[dir="rtl"] .nexus-pagination-size.is-open .nexus-pagination-caret img,
[dir="rtl"] .nexus-pagination-current:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
[dir="rtl"] .nexus-pagination-size:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
.nexus-pagination[dir="rtl"] .nexus-pagination-current.is-open .nexus-pagination-caret img,
.nexus-pagination[dir="rtl"] .nexus-pagination-size.is-open .nexus-pagination-caret img,
.nexus-pagination[dir="rtl"] .nexus-pagination-current:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
.nexus-pagination[dir="rtl"] .nexus-pagination-size:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
html[dir="rtl"] .nexus-pagination-current.is-open .nexus-pagination-caret img,
html[dir="rtl"] .nexus-pagination-size.is-open .nexus-pagination-caret img,
html[dir="rtl"] .nexus-pagination-current:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img,
html[dir="rtl"] .nexus-pagination-size:has(.nexus-pagination-dropdown.open) .nexus-pagination-caret img {
  transform: scaleX(-1) rotate(180deg);
}

/* RTL alignment for dropdowns */
[dir="rtl"] .nexus-pagination-dropdown,
.nexus-pagination[dir="rtl"] .nexus-pagination-dropdown,
html[dir="rtl"] .nexus-pagination-dropdown {
  right: 0;
  left: auto;
}

[dir="rtl"] .nexus-pagination-dropdown[data-align="end"],
.nexus-pagination[dir="rtl"] .nexus-pagination-dropdown[data-align="end"],
html[dir="rtl"] .nexus-pagination-dropdown[data-align="end"] {
  left: 0;
  right: auto;
}

/* RTL text alignment for dropdown buttons */
[dir="rtl"] .nexus-pagination-dropdown button,
.nexus-pagination[dir="rtl"] .nexus-pagination-dropdown button,
html[dir="rtl"] .nexus-pagination-dropdown button {
  text-align: right;
}

@media (max-width: 768px) {
  .nexus-pagination {
    gap: var(--nexus-pagination-gap-md);
  }

  .nexus-pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .nexus-pagination-info {
    width: 100%;
  }
}