@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/50;
}

.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 border border-gray-200 dark:border-gray-600;
}

.pswp__button {
    width: 60px;
}

.pswp--zoomed-in .pswp__zoom-icn-bar-b {
    display: block;
}

.pswp__preloader {
    display: none;
}

.pswp__counter {
    @apply text-base text-gray-900 dark:text-white content-center px-2;
    text-shadow: none;
}

#toaster {
    z-index: 100001;
}

#toaster[data-expanded="true"] {
    height: var(--full-height);
}

#toaster>div {
    --scale: var(--index) * 0.05 + 1;
    transform: translate(var(--swipe-amount, 0px), calc(14px * var(--index) + var(--front-toast-height) - 100%)) scale(calc(-1 * var(--scale)));
    touch-action: none;
    will-change: transform, opacity;
    cursor: grab;
}

#toaster>div[data-swiping="true"] {
    cursor: grabbing;
}

#toaster>div[data-removed="true"],
#toaster>div[data-hidden="true"] {
    opacity: 0;
}

#toaster[data-expanded="true"]>div[data-hidden="true"] {
    opacity: 100;
}

#toaster[data-expanded="true"]>div[data-front="true"],
#toaster:hover>div[data-front="true"] {
    transform: translate(var(--swipe-amount, 0px), 0);
}

#toaster[data-expanded="true"]>div,
#toaster:hover>div {
    transform: translate(var(--swipe-amount, 0px), calc(var(--index) * 14px + var(--offset))) scale(1);
}