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

@layer base {
    h1 {
        font-size: var(--text-2xl);
    }
    h2 {
        font-size: var(--text-xl);
    }
    .rounded-ms {
        border-radius: 0.275rem;
    }
}

@layer components {
    .alert {
        @apply text-white text-sm min-w-[250px] border px-4 py-3 rounded-md
    }
    .alert-success {
        @apply bg-green-950 hover:bg-green-900 border-green-500
    }
    .alert-warning {
        @apply bg-yellow-500/70 hover:bg-yellow-600 border-yellow-400 text-black
    }
}

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
    overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
    box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Add animations */
dialog[data-dialog-target="dialog"][open] {
    animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
    animation: fade-out 200ms forwards;
}