@import "../../../../assets/less/core/boot.less";

.component-backend-uploader {
    @collapsed-width: 35px;

    border: @popup-border;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: @box-shadow-z2;
    background-color: white;
    position: fixed;
    right: 0;
    bottom: 20px;
    min-width: 270px;
    overflow: hidden;
    z-index: 5;

    .uploader-header {
        padding: 18px 50px 18px 20px;
        border-bottom: @popup-border;
        position: relative;

        h3 {
            font-size: 14px;
            margin: 0;
            padding: 0;
            font-weight: bold;
        }

        .component-backend-loading-indicator {
            position: absolute;
            width: 120px;
            top: 22px;
            right: 53px;
            display: none;
        }
    }

    .uploader-body-container {
        overflow: hidden;
    }

    .uploader-body {
        margin-top: 0;
        transition: margin 0.3s;
    }

    &.uploader-collapsed {
        .uploader-body {
            margin-top: -100%;
        }

        .uploader-header {
            padding-right: 185px;

            .component-backend-loading-indicator {
                display: block;
            }
        }
    }

    .close {
        width: 19px;
        height: 19px;
        border-radius: 20px;
        position: absolute;
        top: 17px;
        right: 20px;
        .opacity(1);
        .backend-hide-text();

        &:focus {
            outline: none;
            background-color: @toolbar-focus-bg;
        }

        &:before {
            display: block;
            width: 11px;
            height: 11px;
            position: absolute;
            background-position: -253px 0;
            top: 4px;
            right: 4px;
        }

        &:focus,
        &:hover {
            &:before {
                background-position: -268px 0;
            }
        }

        &.collapse,
        &.expand {
            &:before {
                transform: rotate(0);
                transition: transform 0.2s;
                background-position: -250px -30px;
                transition-delay: 0.2s;
            }
        }

        &.expand {
            &:before {
                transform: rotate(180deg);
            }
        }
    }

    @import "_item.less";
}