//##############################################################################
// MODAL

// Editing plugins in frontend
.cms-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: z(modal, base);
    border-radius: $modal-border-radius;
    background: $modal-bgcolor;
    box-shadow: $modal-shadow;
    user-select: none;
    transform: scale(0) translateZ(0);
    transition: transform $speed-base;

    .cms-modal-maximized & {
        right: 0;
        bottom: 0;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;

        .cms-modal-title {
            // set correct cursor when maximized #3111
            cursor: default;
        }
    }

    .cms-modal-minimized & {
        width: auto !important;
        height: auto !important;
        top: 1px !important;
        margin: 0 !important;

        .cms-modal-body,
        .cms-modal-breadcrumb,
        .cms-modal-foot {
            display: none !important;
        }
        .cms-modal-title {
            // set correct cursor when maximized #3111
            cursor: default;
            padding-right: $modal-header-button-area-size * 3;
        }
        .cms-modal-title-suffix {
            display: none;
        }
        .cms-modal-minimize {
            right: $modal-header-button-area-size + $padding-base;
        }
    }
}
.cms-modal-morphing {
    transition: all $speed-base;
}
.cms-modal-open {
    transform: scale(1) translateZ(0);
}
.cms-modal-body {
    position: absolute;
    z-index: z(modal, body);
    left: 0;
    top: $modal-header-height;
    right: 0;
    bottom: $modal-footer-height;
    border-top: 1px solid $gray-lighter;
    background: $white;
    border-bottom: 1px solid $gray-lighter;
}

.cms-modal-foot {
    position: absolute;
    overflow: hidden;
    clear: both;
    height: $modal-footer-height;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: z(modal, footer);
}
// this elements shows up on top of an iframe as soon as the dragging starts
// so if you are moving the mouse really fast and mouse hovers over an iframe
// mouse events do not go to the iframe but keep firing in the parent document
.cms-modal-shim {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: z(modal, shim);
    width: 100%;
    height: 100%;
}
.cms-modal-frame {
    position: relative;
    z-index: z(modal, frame);
    width: 100%;
    height: 100%;
    // forces things on touch devices like iPad
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
.cms-modal-frame iframe {
    display: block;
    // starting from iOS 4.something iframe size is forced
    // to be equal to it's contents height, so these are not really
    // respected
    width: 100%;
    height: 100%;
}

.cms-modal-head {
    position: relative;
}
.cms-modal-title {
    display: block;
    color: $gray-darker;
    font-size: $modal-header-title-font-size;
    font-weight: bold;
    line-height: $modal-header-height;
    min-height: $modal-header-height;
    padding: 0 $padding-large;
    cursor: move;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: $modal-header-button-area-size * 3 + $padding-normal;
    .cms-modal-title-suffix {
        font-weight: normal;
        padding-left: $padding-normal;
    }
}

.cms-modal-minimize,
.cms-modal-close,
.cms-modal-maximize {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -$modal-header-button-area-size / 2;
    right: $padding-normal;
    color: $gray-light;
    text-align: center;
    width: $modal-header-button-area-size;
    height: $modal-header-button-area-size;
    cursor: pointer;
    &:before {
        position: relative;
        top: ($modal-header-button-area-size - $icon-size) / 2;
    }
    &:hover {
        color: $color-primary;
    }
}
.cms-modal-minimize {
    right: 2 * $modal-header-button-area-size + $padding-normal;
    .cms-modal-minimized & {
        @include icon(plus);
        color: $color-primary;
    }
    .cms-modal-maximized & {
        // ensure minimize button is hidden #3111
        display: none !important;
    }
}
.cms-modal-maximize {
    right: $modal-header-button-area-size + $padding-normal;
    // ensure maximize element is hidden #3111
    .cms-modal-minimized & {
        display: none !important;
    }
    .cms-modal-maximized & {
        color: $color-primary;
        @include icon(minimize);
    }
}

.cms-modal-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: z(modal, resize);
    font-size: 10px;
    color: $gray-light;
    width: $modal-resize-size;
    height: $modal-resize-size;
    cursor: nw-resize;
    span {
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: $font-size-small;
    }
}

// breadcrumb only shows for nested elements
.cms-modal-breadcrumb {
    display: none !important;
    font-size: $font-size-normal;
    line-height: $modal-breadcrumb-height;
    padding: 0 $padding-large;
    border-top: 1px solid $gray-lighter;
    overflow-y: hidden;
    overflow-x: scroll;
    height: $modal-breadcrumb-height * 2; // to account for the scrollbar
    width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    a {
        color: $color-primary;
        &:hover {
            color: darken($color-primary, 20%);
        }
        &:after {
            content: "/";
            color: $gray-lighter;
            text-decoration: none;
            padding: 0 $padding-normal;
        }
        &.active {
            color: $gray-light;
        }
        &:last-child:after {
            content: "";
        }
    }
}

// buttons
.cms-modal-buttons {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: z(modal, buttons);
    padding: 0 $modal-resize-size 0 $padding-normal;
}
.cms-modal-item-buttons {
    $margin: ($toolbar-height - $toolbar-button-height) / 2;
    @extend .cms-toolbar-item-buttons;
    float: right;
    margin-left: $margin;
}
.cms-modal-item-buttons-left {
    float: left;
}

// alter footer when html markup is loaded
.cms-modal-markup {
    .cms-modal-foot {
        height: $modal-footer-height / 2;
    }
    .cms-modal-body {
        bottom: $modal-footer-height / 2;
    }
}

.cms-modal-has-breadcrumb {
    .cms-modal-body {
        top: $modal-header-height + $modal-breadcrumb-height !important;
    }
    .cms-modal-breadcrumb {
        display: block !important;
    }
}

// placed outside the cms-toolbar scope
@at-root .cms-modal-maximized {
    overflow: hidden !important;
    .cms.cms-toolbar-debug .cms-modal {
        top: $toolbar-debug-height !important;
    }
}
@at-root .cms-modal-minimized {
    .cms.cms-toolbar-debug .cms-modal {
        top: $toolbar-debug-height + 1px !important;
    }
}