.uploadBox {
    @include flex(column);
    margin-top: 0.52em;

    .header {
        @include flex(row, center, space-between);
        border-bottom: 2px solid var(--c-background-secondary);
        padding: 0.25em 0.5em 0.35em;
        font-size: 1.5em;
        width: 100%;
    }

    .fileName {
        @include flex(row, center);
        color: var(--c-text-primary);
        font-weight: 600;
        flex-grow: 1;
        width: 0;

        > button {
            display: flex;
            margin: 0 0.75em 0 0.25em;
            color: currentColor;

            bc-icon {
                @include size(16px);
            }
        }

        > h3 {
            @include white-space-overflow();
            min-width: 0;
            margin-right: 1em;
            margin-top: 1px;
        }
    }
}

.controls {
    @include flex(row, center);
    flex-shrink: 0;

    > button {
        @include inline-flex(row, center, center);
        @include size(22px);
        @include margin-between-h(0.25em);
        @include button_small;
        padding: 0;
        transition: all 0.3s;
        flex-shrink: 0;
        border-radius: 100%;

        > bc-icon {
            font-size: 10px;
        }

        @include mq-phones {
            @include size(26px);
            @include margin-between-h(0.5em);

            > bc-icon {
                font-size: 12px;
            }
        }

        $colors: ('primary', 'yellow', 'red', 'primary');
        @for $i from 1 through 4 {
            &:nth-child(#{$i}) {
                @include button_color(nth($colors, $i));
            }
        }
    }
}

.uploadList {
    width: 100%;
}
