.pagy {
  --B: -1;
  --H: 0;
  --S: 0;
  --L: 9.02;
  --A: 1;
  --spacing: 0.25rem; /* gap-1 */
  --padding: 0.25rem 0.35rem; /* py-2 px-3 */
  --rounding: 0.5rem; /* rounded-lg */
  --border-width: 0.0625rem; /* 1px */
  --font-size: 0.750rem; /* text-sm */
  --font-weight: 400;
  --line-height: 1;

  /* Light mode colors */
  --text:               #1f2937; /* gray-800 */
  --text-hover:         #1f2937; /* gray-800 */
  --text-current:       #1f2937; /* gray-800 */
  --background:         transparent;
  --background-hover:   #f3f4f6; /* gray-100 */
  --background-current: transparent;
  --background-input:   #f9fafb; /* gray-50 */
  --border-color:       transparent;
  --border-color-current: #e5e7eb; /* gray-200 */

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) { /* all but gaps */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2rem; /* 38px */
  min-width: 2rem; /* 38px */
  text-decoration: none;
  background-color: var(--background);
  padding: 0.5rem 0.75rem;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--rounding);
  color: var(--text);
  transition: background-color 0.2s;
}

.pagy a[href]:hover { /* all links on hover */
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.pagy a[href]:focus {
  outline: none;
  background-color: var(--background-hover);
}

.pagy a:not([href]) { /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
  opacity: 0.5;
  pointer-events: none;
}

.pagy a[aria-current] {  /* current page */
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--border-color-current);
}

.pagy a[role="separator"] { /* gap */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.375rem;
  min-width: 2.375rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--background);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--rounding);
  color: var(--text);
  transition: background-color 0.2s;
}

.pagy a[role="separator"]:hover {
  background-color: var(--background-hover);
}

.pagy label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: 0.5rem 0.75rem;
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--border-color-current);
  border-radius: calc(var(--rounding) / 2);
  background-color: var(--background-input);
  padding: 0.25rem 0.5rem;
  min-width: 3rem;
  text-align: center;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .pagy {
    --text:               #ffffff;
    --text-hover:         #ffffff;
    --text-current:       #ffffff;
    --background:         transparent;
    --background-hover:   rgba(255, 255, 255, 0.1);
    --background-current: transparent;
    --background-input:   rgba(255, 255, 255, 0.05);
    --border-color:       transparent;
    --border-color-current: #404040; /* neutral-700 */
  }
}

/* Center the nav wrapper */
nav[aria-label="Pagination"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}