@config '../../tailwind.config.js';

.drag-drop__hover-effect {
    transition: background 0.3s;
}

.drag-drop-list__element__action-container {
    width: 100%;
    margin-top: -20px;
    margin-bottom: 10px;
    position: relative;
}

[ffhs_drag\:dragging] {
    @apply select-none;
}

/*Expand Action*/
.expand-action--group {
    @apply gap-2 bg-white dark:bg-gray-800;
    @apply select-none w-full;
    @apply text-center;
    @apply border-2 border-solid rounded-lg;
    @apply p-2 mt-5;
    @apply text-sm;
    @apply grid grid-cols-1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-color: rgb(var(--expand-drag-drop-action--color-500));
    transition: background 0.3s, height 2s ease;
}

.expand-action--group:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, height 1s ease;
}

.expand-action--expand-action {
    min-height: 2.5rem !important;
    @apply font-semibold transition duration-75 w-full text-sm;
}

.expand-action--expand-action,
.expand-action--action {
    @apply hover:bg-[--expand-drag-drop-action--color-200] hover:rounded-lg;
    @apply dark:hover:bg-[--expand-drag-drop-action--color-900];
}

.expand-action--action {
    min-height: 2.5rem !important;
    height: fit-content;
    @apply rounded-lg flex justify-center origin-center items-center;
    @apply px-3 py-3 mt-3;
}

.expand-action--action:not([disabled]) {
    @apply hover:bg-[--expand-drag-drop-action--color-200]
    dark:hover:bg-[--expand-drag-drop-action--color-900];
}

.expand-action--action[disabled] {
    @apply bg-[--expand-drag-drop-action--color-50]
    dark:bg-[--expand-drag-drop-action--color-950];
}

.drag-drop--element__ghost_effect {
    @apply bg-blue-100 dark:bg-sky-950 rounded-xl;
    opacity: 0.5;
}

.drag-drop--action__ghost_effect {
    @apply rounded-xl border border-gray-200 p-6 dark:border-white/10 drag-drop__hover-effect;
    opacity: 0.5;
}

.field_adder_action {
    @apply w-8 2xl:w-20;
}
