@import "_variables.css";

.pagy {
  display: flex;
  font-family: sans-serif;
  font-size: var(--pagy-font-size);
  line-height: var(--pagy-line-height);
  font-weight: var(--pagy-font-weight);
  color: var(--pagy-text-color);
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  --pagy-space-reverse: 0;
  margin-right: calc(var(--pagy-spacing) * var(--pagy-space-reverse));
  margin-left: calc(var(--pagy-spacing) * calc(1 - var(--pagy-space-reverse)));
}

.pagy a:not(.gap) {
  display: block;
  text-decoration: none;
  border-radius: var(--pagy-border-radius);
  background-color: var(--pagy-bg-color);
  padding: var(--pagy-padding-vertical) var(--pagy-padding-horizontal);
  color: inherit;
}

.pagy a:not(.gap):hover {
  background-color: var(--pagy-bg-hover);
}

.pagy a:not(.gap):not([href]) { /* disabled links */
  cursor: default;
  background-color: var(--pagy-bg-disabled);
  color: var(--pagy-text-disabled);
}

.pagy a:not(.gap).current {
  background-color: var(--pagy-bg-active);
  color: var(--pagy-text-active);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border-radius: var(--pagy-border-radius);
  background-color: var(--pagy-bg-color);
  padding: 0.125rem var(--pagy-padding-horizontal);
}

.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border-style: none;
  background-color: var(--pagy-bg-disabled);
}

.pagy-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.pagy-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.125rem;
  border-radius: 0.875rem;
  background-color: var(--color-surface-low);
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pagy-step:hover {
  background-color: var(--color-surface-container);
}

.pagy-step--disabled {
  color: var(--color-outline-variant);
  background-color: var(--color-surface-low);
  cursor: not-allowed;
  pointer-events: none;
}

.pagy-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--color-surface-low);
  border-radius: 0.875rem;
}

.pagy-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 0.625rem;
  color: var(--color-on-surface-variant);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagy-page:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.pagy-page--current,
.pagy-page--current:hover {
  background-color: var(--color-primary-700);
  color: var(--color-surface-lowest);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-700) 25%, transparent);
  cursor: default;
}

.pagy-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  color: var(--color-outline);
  font-weight: 700;
}