@import 'filepond/dist/filepond.min.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

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

@layer utilities {
    .paused {
        animation-play-state: paused;
    }
}

@media screen(sm) {
    .filepond--item {
        width: calc(50% - 0.5em);
    }
}

@media screen(md) {
    .filepond--item {
        width: calc(25% - 1em);
    }
}

.filepond--panel-root {
    @apply bg-gray-50 dark:bg-gray-700 !important;
}

.filepond--drop-label {
    @apply text-gray-900 dark:text-white;
}