@import 'filepond/dist/filepond.min.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
@import 'photoswipe/dist/photoswipe.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;
}

.pswp__bg {
    @apply backdrop-blur-md bg-white/30 dark:bg-gray-800/30;
}

.pswp__top-bar {
    @apply fixed bottom-2 top-auto w-auto left-1/2 -translate-x-1/2 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800;
}

.pswp__button {
    width: 60px;
}