@import 'tailwindcss';
@plugin '@tailwindcss/forms';

@custom-variant dark (&:where(.dark, .dark *));

[x-cloak] {
    display: none !important;
}

/* @tailwindcss/forms paints controls white; utilities on each tag would not cover option/placeholder. */
@layer base {
    .dark :is(input, select, textarea):not([type='checkbox']):not([type='radio']) {
        background-color: var(--color-gray-700);
        border-color: var(--color-gray-600);
        color: var(--color-gray-100);
    }

    .dark :is(input, select, textarea)::placeholder {
        color: var(--color-gray-400);
    }

    .dark option {
        background-color: var(--color-gray-700);
        color: var(--color-gray-100);
    }

    /* Only the unchecked box; checked uses currentColor for the accent. */
    .dark :is([type='checkbox'], [type='radio']):not(:checked) {
        background-color: var(--color-gray-700);
        border-color: var(--color-gray-600);
    }
}