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

    &#{$mediaEditor}_state_refreshing {
        #{$mediaEditor} {
            &__container {
                &:before,
                &:after {
                    display: block;
                    opacity: 1;
                }
            }
        }
    }

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

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

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

    &__container {
        position: relative;
        display: block;
        width: 100%;
        height: calc(100% - 70px);
        text-align: center;

        &:after {
            content: '';
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPScxMjBweCcgaGVpZ2h0PScxMjBweCcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIGNsYXNzPSJ1aWwtcmluZyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIGNsYXNzPSJiayI+PC9yZWN0PjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBzdHJva2UtZGFzaGFycmF5PSIxNjMuMzYyODE3OTg2NjY5MjYgODcuOTY0NTk0MzAwNTE0MiIgc3Ryb2tlPSIjRkZGRkZGIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIwIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDUwIDUwOzE4MCA1MCA1MDszNjAgNTAgNTA7IiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwcyI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==);
            background-size: 100px 100px;
            opacity: 0;
            z-index: 6;
            @include transition(opacity);
        }

        &:before {
            content: '';
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba($color-black, .8);
            opacity: 0;
            z-index: 5;
            @include transition(opacity);
        }
    }

    &__target {
        position: relative;
        max-width: 100%;
        max-height: 100%;
    }

    &__controls {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
    }

    &__controls__list {
        position: relative;
        display: inline-block;
        vertical-align: top;
        @include clearfix;
    }

    &__controls__list,
    &__controls__item {
        @include list-reset;
    }

    &__controls__item {
        position: relative;
        display: block;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }

    &__controls__button {
        width: 40px;
        height: 40px;

        i {
            position: relative;
            display: block;
            top: 50%;
            transform: translateY(-50%);
        }
    }

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

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

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

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

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

    &__info__data {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        font-size: $font-size-small;
        line-height: $line-height-little;
        color: $color-black;

        > div {
            margin-bottom: 5px;

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

    &__info__change {
        position: relative;
        display: block;
        padding: 15px 0;
        border-top: 1px dashed $color-silver;
        border-bottom: 1px dashed $color-silver;
    }

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

    &__info__change__content {
        position: relative;
        display: block;
        @include clearfix;
    }

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

    &__info__change__row {
        position: relative;
        display: block;
        @include gallery(6);
        margin-bottom: 15px;
    }

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

    &__info__name {
        font-weight: 600;
        word-break: break-all;
    }

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

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