@keyframes file-upload-error-flicker {
    50% {
        border-color: var(--color-primary-300);
    }
}

@keyframes file-upload-error-highlight {
    50% {
        color: var(--color-primary-500);
    }
}

.file-upload-container {
    width: 100%;
    padding: 24px 64px;
    position: relative;
    background: var(--color-black-50);
    border: 1px dashed var(--color-black-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 100ms ease-in-out, border-bottom-color 100ms ease-in-out, border-top-color 100ms ease-in-out, border-right-color 100ms ease-in-out, border-left-color 100ms ease-in-out;
}

.file-upload-container > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.file-upload-container.drag-ongoing {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
}

.file-upload-container.drag-error {
    animation-name: file-upload-error-flicker;
    animation-duration: 300ms;
    animation-iteration-count: 3;
}

.file-upload-container i {
    color: var(--color-primary-500);
    font-size: 32px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.file-upload-container p {
    text-align: center;
    line-height: 30px;
}

.file-upload-container > .file-upload-clear-input,
.file-upload-container > .file-upload-input {
    display: none;
}

.file-upload-container:not(.has-file) .has-file-content,
.file-upload-container:not(.loading-file) .loading-file-content,
.file-upload-container:not(.no-file) .no-file-content {
    display: none;
}

.file-upload-container.drag-error .no-file-content > p > span {
    animation-name: file-upload-error-highlight;
    animation-duration: 300ms;
    animation-iteration-count: 3;
}

.file-upload-container .file-upload-preview {
    height: 80px;
    margin-bottom: 5px;
    margin-top: 10px;
    pointer-events: none;
}

.file-upload-container .file-upload-preview-alt:not(.shown),
.file-upload-container .file-upload-preview:not(.shown) {
    display: none;
}

.file-upload-container .file-upload-error:not(.shown) {
    display: none;
}