@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

    --color-primary-700: oklch(0.13 0.03 244);
    --color-primary-600: oklch(0.22 0.03 257);
    --color-accent-600: oklch(0.45 0.01 232);
}

@layer components {
    @import "./button.css";

    .wrapper {
        @apply px-4 md:px-8
    }


    [data-is-loading="true"] {
        @apply animate-pulse bg-slate-200! text-transparent! rounded select-none pointer-events-none min-h-4;
        position: relative;
    }

    [data-is-loading="true"] * {
        @apply opacity-0!;
    }
}

@layer base {
    h2 {
        @apply text-5xl font-black text-center
    }
}

.preload * {
    transition: none !important;
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes disappear {
    from {
        display: block;
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
    }
}

dialog {
    animation: disappear 300ms ease-in-out;
}

dialog[open] {
    animation: appear 300ms ease-in-out;
}

.ui-table tr td,th {
    @apply py-1
}