@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .pagy {
        --B: 1;
        --H: 0;
        --S: 0;
        --L: 50;
        --spacing: 0.125rem;
        --padding: 0.75rem;
        --rounding: 1.75rem;
        --border-width: 0rem;
        --font-size: 0.875rem;
        --font-weight: 600;
        --line-height: 1.75;

        --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)];

        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)];
        }

        a[href]:hover {
            /* all links on hover */
            @apply bg-[var(--background-hover)] text-[var(--text-hover)];
        }

        a:not([href]) {
            /* all but links */
            @apply cursor-default
        }

        a[role="link"]:not([aria-current]) {
            /* disabled links */
            @apply opacity-[calc(var(--opacity)*.6)];
        }

        a[aria-current] {
            /* current page */
            @apply bg-[var(--background-current)] text-[var(--text-current)];
        }

        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)];

            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)];
            }
        }
    }
}