.dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    padding: 1em;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: slategray;
    cursor: pointer;
    text-align: center;
}

input[type=file] {
    display: none;
}

.progress-bar {
    background: black;
    border: 1px solid #1aee1a;
    display: none;
    width: 100%;
    height: 1.5rem;
}

.progress-bar[style] {
    display: flex;
    &::before {
        display: block;
        content: ' ';
        width: var(--progress);
        background: #6adc6a;
    }
}

.file-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.66em 0;
    gap: 0.33em;
    > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.33rem;
        .filename {
            flex: 50% 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
        }
        .progress-bar {
            flex: 40% 0 0;
        }
    }
}

.overall-progress {
    text-align: right;
}

.uploader {
    display: none;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 0.66em;
    textarea {
        background: #191e19;
        color: #1aee1a;
        font-family: monospace;
        height: 100px;
        border: 1px solid #1aee1a;
        border-radius: 4px;
        font-size: 1em;
        padding: 0.666em;
    }
    button {
        font-size: 1em;
        padding: 0.333em 1em;
        border: 1px solid black;
        border-radius: 4px;
        background: #1aee1a;
        color: #1a1a1a;
        width: 100px;
    }

    button[disabled] {
        opacity: 0.1;
    }
}