@import "@coreui/coreui/scss/variables";
@import "@coreui/coreui/scss/mixins";
@import "../../../vendor/spatie/livewire-filepond/resources/dist/filepond.css";

.filepond--root {
    max-width: 460px;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    border: 2px dashed var(--cui-primary);
    // Uses adaptive background variable instead of static light mode background
    background: var(--cui-tertiary-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;

    &:hover {
        // Native browser mixing prevents compile errors with var()
        border-color: color-mix(in srgb, var(--cui-primary) 80%, black);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    }

    .filepond--panel-root {
        // Combines primary color-mix transparency natively with background colors
        background-color: color-mix(in srgb, var(--cui-primary) 5%, transparent) !important;
        border-radius: 1rem !important;
    }

    .filepond--drop-label {
        font-size: 1.1rem;
        color: var(--cui-secondary-color);
        font-weight: 700;
        padding: 1.4rem;
    }

    .filepond--item {
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        margin-bottom: 0.75rem;
        transition: all 0.2s ease-in-out;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
    }

    .filepond--file-action-button {
        background-color: var(--cui-primary) !important;
        color: var(--cui-white) !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease-in-out;

        &:hover {
            background-color: color-mix(in srgb, var(--cui-primary) 80%, black) !important;
        }
    }

    .filepond--credits {
        display: none !important;
    }
}

// Scoped CoreUI Dark Theme Context overrides
[data-coreui-theme="dark"] {
    .filepond--root {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;

        &:hover {
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
            // Brightens the line accent relative to standard dark theme rules
            border-color: color-mix(in srgb, var(--cui-primary) 85%, white);
        }

        .filepond--file-action-button:hover {
            background-color: color-mix(in srgb, var(--cui-primary) 85%, white) !important;
        }
    }
}