.upload-dropzone {
    outline: 2px dashed var(--thieme-light-gray);
    transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out, background-color 0.2s ease-out;

    &.drop-success {
        animation: flash-success 1s;
    }

    &.drop-error {
        animation: flash-error 1s;
    }

    &.highlight {
        background-color: var(--thieme-light-gray);
        outline-color: var(--thieme-light-blue);

        &.is-invalid {
            outline-color: var(--bs-form-invalid-border-color);
        }
    }
}

@keyframes flash-error {
    0%, 100% {
        background-color: inherit;
    }
    50% {
        background-color: var(--bs-danger-bg-subtle);
    }
}

@keyframes flash-success {
    0%, 100% {
        background-color: inherit;
    }
    50% {
        background-color: var(--bs-success-bg-subtle);
    }
}