#{$mediaBrowser} {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    @include clearfix;

    &.prefix-mediaBrowser_edit_open {
        #{$mediaBrowser} {
            &__edit {
                display: block;
            }
        }
    }

    &__col {
        position: relative;
        display: block;
        overflow: auto;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;

        &.prefix-mediaBrowser__col_main {
            width: calc(100% - 300px);
            height: 100%;
            float: left;
        }

        &.prefix-mediaBrowser__col_aside {
            width: 300px;
            height: 100%;
            float: right;
            border-left: 1px solid $color-alto;
            background-color: $color-concrete;
        }
    }

    &__filter {
        position: relative;
        display: block;
        width: 100%;
        height: 50px;
    }

    &__content {
        position: relative;
        display: block;
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;
        background-repeat: no-repeat;
        background-position: 50% 20px;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPScxMjBweCcgaGVpZ2h0PScxMjBweCcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIGNsYXNzPSJ1aWwtcmluZyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIGNsYXNzPSJiayI+PC9yZWN0PjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBzdHJva2UtZGFzaGFycmF5PSIxNjMuMzYyODE3OTg2NjY5MjYgODcuOTY0NTk0MzAwNTE0MiIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIwIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDUwIDUwOzE4MCA1MCA1MDszNjAgNTAgNTA7IiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwcyI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==);
        background-size: 60px 60px;
    }

    &__list {
        @include clearfix;
        background-color: $color-white;
    }

    &__list,
    &__item {
        @include list-reset;
    }

    &__item {
        position: relative;
        display: block;
        @include gallery(2);
        margin-bottom: 25px;

        &.prefix-mediaBrowser__item_state_new {
            #{$mediaBrowser} {
                &__preview {
                    &:before {
                        content: '';
                        position: absolute;
                        display: block;
                        width: 25px;
                        height: 25px;
                        background-color: $color-green;
                        background-repeat: no-repeat;
                        background-position: 50% 50%;
                        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjYgMjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI2IDI2IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPiAgPHBhdGggZD0ibS4zLDE0Yy0wLjItMC4yLTAuMy0wLjUtMC4zLTAuN3MwLjEtMC41IDAuMy0wLjdsMS40LTEuNGMwLjQtMC40IDEtMC40IDEuNCwwbC4xLC4xIDUuNSw1LjljMC4yLDAuMiAwLjUsMC4yIDAuNywwbDEzLjQtMTMuOWgwLjF2LTguODgxNzhlLTE2YzAuNC0wLjQgMS0wLjQgMS40LDBsMS40LDEuNGMwLjQsMC40IDAuNCwxIDAsMS40bDAsMC0xNiwxNi42Yy0wLjIsMC4yLTAuNCwwLjMtMC43LDAuMy0wLjMsMC0wLjUtMC4xLTAuNy0wLjNsLTcuOC04LjQtLjItLjN6IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+);
                        background-size: 15px 15px;
                        z-index: 2;
                    }
                }
            }
        }

        &.prefix-mediaBrowser__item_type_info {
            @include gallery(12);
            padding: 50px 0;
            font-weight: 600;
            font-size: $font-size-largeplus;
            line-height: $line-height-prelittle;
            color: $color-alto;
            text-align: center;
        }
    }

    &__preview {
        position: relative;
        display: block;
        cursor: pointer;

        &:after {
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        &.prefix-mediaBrowser__preview_state_active {
            &:after {
                box-shadow: inset 0 0 0 3px $color-light-blue, inset 0 0 0 6px $color-white;
            }
        }
    }

    &__preview__wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: 100px;
        padding: 5px;
        overflow: hidden;
        border: 1px solid $color-gray-lte;

        img {
            position: static;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;

            &::selection {
                background-color: transparent;
            }
        }
    }

    &__edit {
        position: relative;
        display: none;
    }

    &__edit__wrapper {
        position: relative;
        display: block;
    }

    &__edit__header {
        position: relative;
        display: block;
        margin-bottom: 15px;
    }

    &__edit__title {
        position: relative;
        display: block;
        font-size: $font-size-premedium;
        line-height: $line-height-prelittle;
        color: $color-black;
    }

    &__edit__content {
        position: relative;
        display: block;
    }

    &__edit__list {
        @include clearfix;
    }

    &__edit__list,
    &__edit__item {
        @include list-reset;
    }

    &__edit__item {
        position: relative;
        display: block;
    }

    &__edit__box {
        position: relative;
        display: block;

        &.prefix-mediaBrowser__edit__box_state_open {
            #{$mediaBrowser} {
                &__edit__container {
                    display: block;
                }
            }
        }
    }

    &__edit__container {
        position: relative;
        display: none;
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    &__edit__info {
        position: relative;
        display: block;
        margin-bottom: 15px;
        @include clearfix;
    }

    &__edit__preview {
        position: relative;
        display: block;
        width: 50%;
        height: 80px;
        float: left;
        margin-top: 5px;
        line-height: 80px;
        text-align: center;
        overflow: hidden;

        img {
            position: static;
            max-width: 100%;
            max-height: 100%;
            margin-bottom: 0;
            object-fit: cover;
        }
    }

    &__edit__data {
        position: relative;
        display: block;
        width: 50%;
        float: right;
        padding-left: 10px;
        font-size: $font-size-small;
        line-height: $line-height-little;
        color: $color-black;

        > div {
            margin-bottom: 5px;

            @include f-last(1) {
                margin-bottom: 0;
            }
        }
    }

    &__edit__name {
        margin-bottom: 12px !important;
        font-weight: 600;
        word-break: break-all;
    }

    &__edit__category {
        margin-bottom: 12px !important;

        span {
            font-size: $font-size-extrasmall;
            font-weight: 600;
            word-break: break-all;
            opacity: .8;
        }
    }

    &__edit__action {
        position: relative;
        display: block;
        margin-bottom: 15px;
        @include clearfix;

        > a {
            margin-top: 0 !important;
            @include gallery(6);
        }
    }

    &__edit__form {
        position: relative;
        display: block;
    }

    &__edit__row {
        position: relative;
        display: block;
        margin-bottom: 15px;
    }

    &__edit__label {
        position: relative;
        display: block;
        margin-bottom: 2px;
    }

    &__edit__trigger {
        margin-bottom: 15px;
        outline: none !important;
    }
}