/* file uploads */
#uploadedFilesList {
    list-style-type: none;
}

.files-list-item {
    width: fit-content;
    background: #505050;
    color: white;
    padding: 0.2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1rem;
}

.files-list-item button {
    height: 1rem;
    width: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 0.9rem;
    background: #c1c1c1;
    margin-left: 1rem;
    border: none;
    color: black;
    cursor: pointer;
}

.files-list-item button:hover {
    background: #e9e9e9;
}

/* state icons for loading and completed */
.files-list-item .state {
    margin-left: 0.5rem;
}

.files-list-item .loader {
    width: 0.5rem;
    padding: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #bdebe4;
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

.files-list-item .check {
    display: inline-block;
    transform: rotate(45deg);
    height: 12px;
    width: 6px;
    border-bottom: 6px solid #78b13f;
    border-right: 6px solid #78b13f;
}