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

.filepond--root {
    max-width: 460px;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    border: 2px dashed $primary;
    background: $light;
    box-shadow: 0 8px 24px rgba(#000, 0.08);
    transition: all 0.2s ease-in-out;

    &:hover {
        border-color: mix(#000, $primary, 20%);
        box-shadow: 0 10px 28px rgba(#000, 0.12);
    }

    .filepond--panel-root {
        background-color: rgba($primary, 0.05) !important;
        border-radius: 1rem !important;
    }

    .filepond--drop-label {
        font-size: 1.1rem;
        color: $secondary;
        font-weight: 700;
        padding: 1.4rem;
    }

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

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

    .filepond--file-action-button {
        background-color: $primary !important;
        color: #fff !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease-in-out;

        &:hover {
            background-color: mix(#000, $primary, 20%) !important;
        }
    }

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