@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .pagy {
    --B: 1;
    --H: 200.1;
    --S: 100;
    --L: 41.76;
    --A: 1;
    --spacing: 0.5rem;
    --padding: 0.8125rem;
    --rounding: 1.9375rem;
    --border-width: 0rem;
    --font-size: 0.875rem;
    --font-weight: 500;
    --line-height: 1.875;
    --text: hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))));
    --text-hover: hsl(var(--H) var(--S) calc(var(--L) - (33 * var(--B))));
    --text-current: hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)));
    --background: hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))));
    --background-hover: hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))));
    --background-current: hsl(var(--H) var(--S) var(--L));
    --background-input: hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))));
    --opacity: 1;
    @apply flex space-x-[var(--spacing)] font-[var(--font-weight)]
    text-[length:var(--font-size)] text-[var(--text)]
    leading-[var(--line-height)];
  }
  .pagy a:not([role=separator]) { /* all but gaps */
    @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)]
      border-solid  border-[var(--background-current)] border-[length:var(--border-width)] opacity-[var(--opacity)];
  }
  .pagy a[href]:hover { /* all links on hover */
    @apply bg-[var(--background-hover)] text-[var(--text-hover)];
  }
  .pagy a:not([href]) { /* all but links */
    @apply cursor-default;
  }
  .pagy a[role=link]:not([aria-current]) { /* disabled links */
    @apply opacity-[calc(var(--opacity)*.6)];
  }
  .pagy a[aria-current] { /* current page */
    @apply bg-[var(--background-current)] text-[var(--text-current)];
  }
  .pagy label {
    @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
      py-[calc(var(--padding)/3-var(--border-width))]
      bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-current)];
  }
  .pagy label input {
    @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
        font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-current)];
  }
}