/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * License GNU General Public License version 2 or later;
 * Copyright 2013-2019 Valeriy Chupurnov https://xdsoft.net
 */

@import (reference) '../variables';
@image_editor_resizer_border_color: #05ff00;
@image_editor_resizer_target_size: 10px;
@image_editor_resizer_target_border_color: #383838;
@image_editor_resizer_target_bg_color: #8c7878;

.jodit_image_editor {
    width: 100%;
    height: 100%;
    @media (max-width: @screen-sm) {
        height: auto;
    }
    > div,
    > div > div {
        height: 100%;
        @media (max-width: @screen-sm) {
            height: auto;
            min-height: 200px;
        }
    }
    padding: 10px;
    overflow: hidden;
    * {
        box-sizing: border-box;
    }
    .jodit_image_editor_slider {
        &-title {
            text-shadow: rgb(243, 243, 243) 0px 1px 0px;
            color: rgb(51, 51, 51);
            border-bottom: 1px solid rgba(158, 158, 158, 0.31);

            background-color: #f9f9f9;
            padding: 0.8em 1em;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            font-weight: bold;
            line-height: 1em;
            svg {
                margin-right: 10px;
                width: 16px;
                display: inline-block;
                vertical-align: middle;
            }
        }
        &-content {
            display: none;
        }
        &.active .jodit_image_editor_slider-title {
            background-color: rgb(93, 93, 93);
            color: #fff;
            text-shadow: #000000 0 1px 0;
            svg {
                fill: white;
            }
        }
        &.active .jodit_image_editor_slider-content {
            display: block;
        }
    }
    &_area {
        background-color: #eee;
        background-image: linear-gradient(
                45deg,
                #ccc 25%,
                transparent 25%,
                transparent 75%,
                #ccc 75%,
                #ccc
            ),
            linear-gradient(
                45deg,
                #ccc 25%,
                transparent 25%,
                transparent 75%,
                #ccc 75%,
                #ccc
            );
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px;
        height: 100%;
        overflow: hidden;

        user-select: none;
        position: relative;

        display: none;
        &.active {
            display: block;
        }
        .jodit_image_editor_box {
            overflow: hidden;
            position: relative;
            z-index: 1;
            pointer-events: none;
            height: 100%;

            img {
                user-select: none;
                max-width: 100%;
                max-height: 100%;
            }
        }
        .jodit_image_editor_croper,
        .jodit_image_editor_resizer {
            z-index: 2;
            width: 100px;
            height: 100px;
            position: absolute;
            box-shadow: 0 0 11px #000;
            border: 1px solid #fff;
            background-repeat: no-repeat;
            top: 10px;
            left: 20px;
            pointer-events: none;

            i.jodit_bottomright {
                position: absolute;
                display: inline-block;
                border: 1px solid @image_editor_resizer_target_border_color;
                z-index: 4;
                background-color: @image_editor_resizer_target_bg_color;
                cursor: se-resize;
                border-radius: 10px;
                height: 20px;
                width: 20px;
                right: -10px;
                bottom: -10px;
                box-shadow: 0 0 11px #000;
                pointer-events: all;

                &:active {
                    border: 1px solid yellow;
                }
            }
        }
    }
    &_area.jodit_image_editor_area_crop {
        height: 100%;
        background: #eee;
        text-align: center;
        line-height: 100%;
        position: relative;

        &:before {
            content: '';
            line-height: 100%;
            vertical-align: middle;
            height: 100%;
            display: inline-block;
        }
        .jodit_image_editor_box {
            height: 100%;
            overflow: visible;
            display: inline-block;
            vertical-align: middle;
            pointer-events: all;
            font-size: 0;

            img {
                max-width: 100%;
                max-height: 100%;
            }

            text-align: left;
            line-height: 100%;

            &:before {
                content: '';
                line-height: 100%;
                vertical-align: middle;
                height: 100%;
                display: inline-block;
            }
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                background: rgba(255, 255, 255, 0.3);
                z-index: 1;
            }
            .jodit_image_editor_croper {
                pointer-events: all;
                cursor: move;
                i.jodit_sizes {
                    font-size: 12px;
                    white-space: pre;
                    position: absolute;
                    bottom: -30px;
                    left: 100%;
                    text-align: center;
                    color: rgb(255, 255, 255);
                    text-shadow: none;
                    background: rgba(0, 0, 0, 0.2);
                    border-radius: 0.4em;
                    padding: 9px 6px;
                    display: block;
                }
            }
        }
    }
}