.file-upload__container {
    width: 100%;
}

.file-upload__container > :not(:last-child) {
    margin-bottom: .5rem;
}

.file-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    height: 250px;
    border-radius: .5rem;
    border: 2px dashed var(--border-color);
    background-color: var(--bg-color-secondary);
    transition: background-color .3s ease-out, border-color .3s ease-out;
}

.file-upload__dropzone--active {
    background-color: var(--bg-color-primary);
    border-color: var(--color-accent);
    transition-duration: 0s;
}

.file-upload__filelist {
    max-height: 280px;
    overflow-y: auto;
}

.file-upload__filelist > :not(:last-child) {
    margin-bottom: .5rem;
}

.file-upload__text {
    text-align: center;
}

.file-upload__text > :not(:last-child) {
    margin-bottom: .5rem;
}

.file-upload__heading {
    display: block;
    font-size: 1.25rem;
    color: var(--text-color-primary);
}

.file-upload__sub {
    display: block;
    color: var(--text-color-secondary);
}

.file-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    border-radius: .25rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color-secondary);
}

.file-card__info {
    flex: 1;
    min-width: 0;
}

.file-card__filenamee {
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color-primary);
}

.file-card__properties {
    font-size: .75rem;
    color: var(--text-color-secondary);
}

.file-card__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    border-radius: 50%;
    border: none;
    color: var(--text-color-secondary);
    background-color: transparent;
    transition: background-color .3s ease-out;
}

.file-card__remove:hover {
    background-color: hsl(var(--base-hs), 20%);
    transition-duration: 0s;
}

.file-upload__controls {
    display: flex;
    justify-content: right;
}

.file-upload__clear-all {
    padding: .375rem .5rem;
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    background-color: hsl(var(--base-hs), 70%);
    color: hsl(var(--color-black));
}

.file-upload__clear-all:hover {
    background-color: var(--color-danger);
    color: var(--text-color-primary);
}