.upload {
    font-size: 1.5em;
    display: grid;
    grid-gap: 0.5em;
    grid-template: 1em / min-content 1fr min-content min-content;
    border-bottom: 1px solid var(--c-background-secondary);
    align-items: center;
    padding: 0.35em 0.5em;
    --c-status: var(--c-primary);
    --c-status-accent: var(--c-primary-accent);
    --c-status-focus: var(--c-primary-focus);

    --checkbox-color: var(--c-status);
    --checkbox-color-accent: var(--c-status-accent);
    --checkbox-color-focus: var(--c-status-focus);

    .btn {
        @include size(1em);
        @include flex(row, center, center);
        border-radius: 100%;
        border: 2px solid currentColor;

        bc-icon {
            @include size(12px);
            fill: currentColor;
        }

        &.redBtn {
            @include button_color('red', 'color');
        }

        &.primaryBtn {
            @include button_color('primary', 'color');
        }

        &.yellowBtn {
            @include button_color('yellow', 'color');
        }
    }

    @include mq-phones {
        grid-template: 1em / 1fr min-content min-content;
    }

    &[data-simple-state='done'] {
        grid-template: 1em / min-content 1fr min-content;

        @include mq-phones {
            grid-template: 1em / 1fr min-content;
        }

        .btn {
            &.abortBtn,
            &.pauseBtn {
                display: none;
            }
        }
    }

    &[data-state='idle'],
    &[data-state='removed'],
    &[data-state='paused'] {
        --c-status: var(--c-yellow);
        --c-status-accent: var(--c-yellow-accent);
        --c-status-focus: var(--c-yellow-focus);
    }

    &[data-state='finished'] {
        --c-status: var(--c-primary);
        --c-status-accent: var(--c-primary-accent);
    }

    &[data-state='cancelled'],
    &[data-state='errored'],
    &[data-state='connection-lost'],
    &[data-state='peer-cancelled'] {
        --c-status: var(--c-red);
        --c-status-accent: var(--c-red-accent);
        --c-status-focus: var(--c-red-focus);
    }
}

.progressBar {
    @include flex(row, center, center);
    border: 2px solid var(--c-status); // A border causes a gap
    position: relative;
    border-radius: 50em;
    height: 1em;

    p {
        @include position(0, 0, 0, 0);
        @include flex(row, center, center);
        @include font(800, 0.45em);
        position: absolute;
        text-shadow: 0 0 2px rgba(black, 0.2);
        transition: clip-path 0.3s;

        &:first-child {
            clip-path: inset(0 0 0 var(--text-clip-left));
            color: var(--c-text-primary);
        }

        &:last-child {
            clip-path: inset(0 var(--text-clip-right) 0 0);
            color: var(--c-text-secondary);
        }

        > span {
            @include white-space-overflow();
            max-width: 85%;
        }
    }

    &::before {
        @include pseudo();
        @include size(calc(100% + 2px));
        @include position(-1px, 0, 0, -1px);
        border-radius: 50em;
        z-index: -1;
        clip-path: inset(0 calc(100% - var(--progress)) 0 0);
        background: striped_background(var(--c-status), var(--c-status-accent), 8px);
        transition: clip-path 0.3s;
    }
}
