.ds-pagination {
  margin: calc(var(--ds-spacing-unit) * 12) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ds-spacing-unit) * 4);
  padding: calc(var(--ds-spacing-unit) * 8) 0;
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-pagination__inner {
  display: flex;
  gap: calc(var(--ds-spacing-unit) * 2);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.ds-pagination__status {
  font-size: 0.75rem;
  color: var(--ds-color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.ds-pagination .ds-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 calc(var(--ds-spacing-unit) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all var(--ds-animation-duration) var(--ds-animation-easing);
}

.ds-pagination .ds-btn:not(.ds-btn-primary) {
  background: transparent;
  color: var(--ds-color-secondary);
  border: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-pagination .ds-btn:hover:not(.ds-btn-primary):not([disabled]) {
  border-color: var(--ds-color-accent);
  color: var(--ds-color-accent);
  background: color-mix(in srgb, var(--ds-color-accent) 5%, transparent);
  transform: translateY(-1px);
}

.ds-pagination .ds-btn-primary {
  background: var(--ds-color-accent);
  color: white;
  border: var(--ds-border-width) solid var(--ds-color-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ds-color-accent) 20%, transparent);
}

.ds-pagination .ds-btn-ghost {
  border-color: transparent !important;
}

.ds-pagination__dots {
  color: var(--ds-color-secondary);
  opacity: 0.5;
  padding: 0 calc(var(--ds-spacing-unit) * 2);
}

@media (max-width: 640px) {
  .ds-pagination .ds-btn:not(.ds-btn-primary):not(.ds-btn-outline) {
    display: none;
    /* Hide First/Last on mobile */
  }
}