@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:wght@100..900&display=swap');

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

@layer base {
    html,
    body {
        @apply !overflow-x-hidden;
    }

    body {
        padding-top: 5.45rem;
    }

    .button_to {
        @apply flex;
    }

    abbr[title="required"] {
        @apply text-red-500;
    }

    pre {
        @apply whitespace-pre-wrap break-words bg-gray-100 p-2 rounded text-sm;
    }
}

@layer utilities {
    .bg-signin {
        background: radial-gradient(
            circle at top left,
            theme(colors.primary.900) 30%,
            rgba(251, 253, 255, 0) 120%
        );
    }

    input[type="checkbox"] {
        @apply appearance-none relative block text-center w-4 h-4 rounded border border-slate-900 checked:bg-primary-900 checked:border-primary-900;
        &:checked::after {
            @apply absolute inline-block w-2 h-5 top-0 left-0 right-0 bottom-0 m-auto text-white font-bold;
            content: "✓";
        }
    }

    /* Spinner de submit (submit_button_controller.js): `border-current` pega
       a cor do texto do botão sozinho, então funciona em qualquer variant
       (primary, outlined, ...) sem precisar saber a cor de cada uma. */
    .btn-loading::before {
        @apply inline-block w-4 h-4 mr-2 rounded-full border-2 border-current border-t-transparent animate-spin align-[-3px];
        content: "";
    }
}