@box-upload-drag-place-width: 50%;
@box-upload-icon-color: #d4d6da;

.box-upload {
    background-color: @color-f;
    clear: both;

    &--bordered {
        padding: 10px 15px;

        border: 1px solid @color-border-dark;
        border-top: none;
    }

    &__uploading {
        margin: 0 3px;
    }

    &__place {
        position: relative;
        display: flex;
        flex-direction: column;

        border-radius: @radius;
        background-color: @bg-upload;
        font-size: 0;

        @media @query-md {
            flex-direction: row;
        }

        &:after {
            @media @query-md {
                position: absolute;
                top: 0;
                bottom: 0;
                left: @box-upload-drag-place-width;
                width: 0;
                height: 100%;
                content: '';

                border-left: 1px solid @color-f;
            }
        }

        &__drop {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 30px 10px;

            text-align: center;
            font-size: 16px;
            color: @color-action;

            @media @query-md {
                padding: 76px 50px;
                width: @box-upload-drag-place-width;
            }

            &__icon {
                margin-bottom: 10px;

                font-size: 25px;
                color: @box-upload-icon-color;
            }

            &__title {
                font-family: @font;
                font-size: 20px;
                font-weight: 500;
                color: @color-grey-dark;
            }

            &__info {
                font-size: 15px;
                font-weight: 400;
                color: @color-grey;
            }
        }

        &__button {
            display: flex;
            width: 100%;
            padding: 30px;
            align-items: center;
            justify-content: center;

            text-align: center;

            @media @query-md {
                width: calc(~"100% - @{box-upload-drag-place-width}");
            }
        }

        &__between {
            display: flex;
            align-self: center;
            justify-content: center;
            left: @box-upload-drag-place-width;
            height: 22px;
            line-height: 20px;
            width: 44px;
            z-index: 2;

            text-align: center;
            border: 1px solid @color-f;
            border-radius: @radius;
            background: @color-f;
            color: @color-grey;
            font-family: @font;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
        }
    }
}