@layer components {
    .sortable-chosen {
        @apply shadow-sm;
    }

    #drawer .draggable {
        @apply transition-all duration-200;
    }

    #drawer .sortable-chosen {
        @apply scale-105 shadow-lg;
    }

    .sortable-drag.from-drawer {
        @apply opacity-95 scale-105 rotate-1 shadow-xl;
    }

    #page-drop-zone {
        @apply border border-dashed border-transparent rounded;
    }

    #page-drop-zone .sortable-ghost {
        @apply mb-8 border border-gray-200 rounded-lg min-h-16;
        animation: block-drop-enter 220ms ease-out;
    }

    .block-drop-enter {
        animation: block-drop-enter 220ms ease-out;
    }

    .draggable {
        overflow: hidden;
        opacity: 1;
        transition:
            max-height 260ms ease,
            opacity 180ms ease,
            margin 260ms ease;
    }

    .draggable.deleting {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0 !important;
        pointer-events: none;
    }

    @keyframes block-drop-enter {
        0% {
            opacity: 0;
            transform: translateY(8px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}