.file-uploader .upload-item > :not(.upload-progress) {
    position: relative;
    z-index: 1;
}

/* Progress Bar -- Preview*/
.file-uploader .upload-item .upload-progress {
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    background-color: var(--bs-primary-bg-subtle);
    transition: transform 0.1s linear;
}

.file-uploader .file-size-label {
    font-size: .75rem;
}

/* Progress Bar -- Bar */
.file-uploader #upload-progress .progress {
    height: 6px;
}

.file-uploader #upload-progress .progress-bar {
    width: 0;
}

/* Progress Bar -- Multi */
.file-uploader .upload-item .upload-progress-bar {
    height: 3px;
    border-radius: 0;
}

/* Drop Zone */
.file-uploader .upload-drop-zone {
    border: 2px dashed var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 120px;
}

.file-uploader .upload-drop-zone:hover,
.file-uploader .upload-drop-zone.drag-active {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* Attach upload item animation */
@keyframes upload-item-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Upload Item left border + use animation */
.file-uploader .upload-item {
    border-left-width: 3px !important;
    animation: upload-item-in 0.15s ease;
    flex-shrink: 0;
}

/* Error and Success Messages */
.file-uploader .upload-notice.upload-notice-error {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.12);
    border-left: 3px solid var(--bs-danger);
}

.file-uploader .upload-notice.upload-notice-success {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.12);
    border-left: 3px solid var(--bs-success);
}

/* Multi file uploader should be scrollable */
.file-uploader[data-file-upload="multi"] #file-list {
    max-height: 300px;
    overflow-y: auto;
    flex-shrink: 0;
}