/* Drag-and-drop highlight for media library drop zones. */

[data-mle-dropzone] {
    position: relative;
}

[data-mle-dropzone].mle-dropzone-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    border: 2px dashed var(--primary-500, #3b82f6);
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--primary-500, #3b82f6) 10%, transparent);
}

/* Folder tiles as drop targets inside the selection modal. */

.mle-folder-dropzone-active {
    outline: 2px dashed var(--primary-500, #3b82f6);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

/*
 * Ghost tiles: placeholder cards/rows with a progress bar, rendered directly
 * inside the file grid (`--grid`), the file list (`--row`), or a fallback
 * host container (`--card`) while a file uploads. The card/row look itself
 * comes from the same utility classes the vendor tiles use — these rules
 * only add the upload-specific bits.
 */

.mle-ghost-tile {
    position: relative;
    min-width: 0;
    animation: mle-ghost-pulse 2.5s ease-in-out infinite;
}

@keyframes mle-ghost-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.mle-ghost-tile--card {
    width: 8rem;
}

.mle-ghost-caption {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.mle-ghost-caption--overlay .mle-inline-upload-name {
    color: #fff;
}

.mle-inline-upload-progress--overlay {
    background-color: rgb(255 255 255 / 0.35);
}

.mle-inline-upload-progress--overlay > div {
    background-color: #fff;
}

.mle-ghost-row-spacer {
    flex: none;
    width: 2.75rem;
}

.mle-ghost-row-thumbnail {
    width: 2rem;
    height: 2rem;
}

.mle-ghost-row-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.mle-ghost-row-progress {
    width: 8rem;
}

.mle-ghost-tile.mle-inline-upload-errored {
    animation: none;
}

.mle-ghost-tile.mle-inline-upload-errored .mle-inline-upload-name {
    color: var(--danger-600, #dc2626);
}

.mle-ghost-tile.mle-inline-upload-errored .mle-inline-upload-progress > div {
    background-color: var(--danger-500, #ef4444);
}

/* Fallback host (field-rendered or dynamically created) for ghost tiles. */

.mle-inline-uploads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mle-inline-uploads:empty {
    display: none;
}

/* Body-level host for errored ghosts relocated out of morphed regions. */

.mle-inline-uploads--floating {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    width: 16rem;
    max-width: calc(100vw - 2rem);
}

/* Shared ghost tile internals. */

.mle-inline-upload-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--gray-600, #4b5563);
}

.dark .mle-inline-upload-name {
    color: var(--gray-300, #d1d5db);
}

.mle-inline-upload-progress {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--gray-200, #e5e7eb);
}

.dark .mle-inline-upload-progress {
    background-color: var(--gray-700, #374151);
}

.mle-inline-upload-progress > div {
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    background-color: var(--primary-500, #3b82f6);
    transition: width 150ms ease-out;
}