/* ------------------------------------------------------------------------------
*
*  # CKEditor rich text editor - Dialog styles
*
*  CKEditor - smart WYSIWYG editor components with collaborative editing
*
* ---------------------------------------------------------------------------- */

//
// Base
//

// The outer container of the dialog
.cke_dialog {
    visibility: visible;
}

// The inner boundary container
.cke_dialog_body {
    z-index: 1;
    background-color: $modal-content-bg;
    background-clip: padding-box;
    border: $modal-content-border-width solid $modal-content-border-color;
    @include border-radius($modal-content-border-radius);
    @include box-shadow($modal-content-box-shadow-xs);

    // This one is required by Firefox 3.6. Without it,
    // dialog tabs and resizer float outside of the dialog
    .cke_browser_gecko19 & {
        position: relative;
    }
}

// The dialog title
.cke_dialog_title {
    font-size: $h6-font-size;
    line-height: $headings-line-height;
    font-weight: $headings-font-weight;
    letter-spacing: $headings-letter-spacing;
    cursor: move;
    position: relative;
    padding: $modal-header-padding-y $modal-header-padding-x;
    padding-bottom: 0;
}

// The outer part of the dialog contants, which contains the contents body
// and the footer
.cke_dialog_contents {
    overflow: auto;
}

// The contents body part, which will hold all elements available in the dialog
.cke_dialog_contents_body {
    overflow: auto;
    height: auto !important;
    padding: $modal-inner-padding;
}

// The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
// well as a resize handler
.cke_dialog_footer {
    text-align: right;
    position: relative;
    border-top: $modal-footer-border-width solid $modal-footer-border-color;
    padding: $modal-header-padding-y $modal-header-padding-x;
}


//
// Tabs
//

// The main tabs container
.cke_dialog_tabs {
    margin-top: ($modal-header-padding-y / 2);
    z-index: 2;
    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;

    // The .cke_single_page class is appended to the dialog outer element in case
    // of dialogs that has no tabs
    .cke_single_page & {
        display: none;
    }
}

// A single tab (an <a> element)
a.cke_dialog_tab {
    padding: $nav-link-padding-y $nav-link-padding-x;
    display: inline-block;
    cursor: pointer;
    outline: none;
    position: relative;
    color: $nav-tabs-link-color;
    @include transition(all ease-in-out $component-transition-timer);

    // Bottom highlight
    &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: $nav-tabs-bottom-link-border-width;
        bottom: -($nav-tabs-border-width);
        @include transition(background-color ease-in-out $component-transition-timer);
    }

    // A hover state of a regular inactive tab
    @include hover-focus {
        color: $nav-tabs-link-hover-color;
    }
}

// Active state
a.cke_dialog_tab_selected {
    cursor: default;
    color: $nav-tabs-link-active-color;

    // Bottom highlight line
    &:before {
        background-color: $nav-tabs-bottom-link-border-color;
    }
}

// Disabled state
a.cke_dialog_tab_disabled {
    color: $nav-link-disabled-color;
    cursor: default;
}

// The close button at the top of the dialog
.cke_dialog_close_button {
    position: absolute;
    cursor: pointer;
    text-align: center;
    top: $modal-header-padding-y + ($line-height-computed / 4);
    right: $modal-header-padding-x;
    z-index: 5;
    color: $close-color;
    opacity: .5;
    transition: opacity ease-in-out $component-transition-timer;

    // Cross icon
    &:after {
        content: $icon-action-cross;
        font-family: $icon-font-family;
        font-size: $font-size-base;
        display: block;
        line-height: 1;        
    }

    // Override <a>'s hover style
    @include hover-focus {
        color: $close-color;
        text-decoration: none;
    }

    // Hover state
    &:not(:disabled):not(.disabled) {
        @include hover-focus {
            opacity: 1;
        }
    }

    // Hide original icon
    .cke_dialog_close_button span {
        display: none;
    }
}


//
// Dialog UI Elements
//

// If an element is supposed to be disabled, the .cke_disabled class is
// appended to it
div.cke_disabled .cke_dialog_ui_labeled_content div * {
    opacity: 0.5;
    cursor: default;
}


//
// Horizontal-Box and Vertical-Box
//

// Base
.cke_dialog_ui_vbox,
.cke_dialog_ui_hbox {
    table {
        margin: auto;
    }
}

// Make sure it fills all available space
.cke_dialog_ui_hbox {
    width: 100%;
}

// Vertical alignment
.cke_dialog_ui_hbox_first,
.cke_dialog_ui_hbox_child,
.cke_dialog_ui_hbox_last {
    vertical-align: top;
}

// To center a horizontal label-input (selection field dialog / find and replace)
.cke_dialog_ui_hbox_first,
.cke_dialog_ui_hbox_last {
    > .cke_dialog_ui_labeled_label, > .cke_dialog_ui_html {
        margin-top: calc(#{$input-padding-y} + #{$input-border-width}); 
    }
}

// Spacing between elements
.cke_dialog_ui_hbox_first,
.cke_dialog_ui_hbox_child {
    &,
    .cke_dialog_footer_buttons & {
        padding-right: map-get($spacers, 3);
    }
}

// Width of elements
.cke_dialog_ui_input_text,
.cke_dialog_ui_text,
.cke_dialog_ui_labeled_content,
select.cke_dialog_ui_input_select,
.cke_dialog_ui_select {
    width: 100% !important;
}


//
// Form components
//

// Base styles
input.cke_dialog_ui_input_text,
input.cke_dialog_ui_input_password,
textarea.cke_dialog_ui_input_textarea {
    display: block;
    width: 100%;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    font-family: $input-font-family;
    @include font-size($input-font-size);
    font-weight: $input-font-weight;
    line-height: $input-line-height;
    color: $input-color;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;

    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
    @include border-radius($input-border-radius, 0);
    @include box-shadow($input-box-shadow);
    @include transition($input-transition);
}

// Vertical spacing between elements
input.cke_dialog_ui_input_text,
input.cke_dialog_ui_input_password,
textarea.cke_dialog_ui_input_textarea,
select.cke_dialog_ui_input_select,
input.cke_dialog_ui_input_file {
    margin-bottom: $form-group-margin-bottom;
}

// Override select height
.cke_dialog_ui_select {
    height: auto !important;
}

// Textarea
textarea.cke_dialog_ui_input_textarea {
    overflow: auto;
    resize: none;
}

// Select wrapper
div.cke_dialog_ui_input_select {
    display: table;
    width: 100%;
}

// Select input
select.cke_dialog_ui_input_select {
    display: block;
    width: 100%;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    font-family: $input-font-family;
    @include font-size($input-font-size);
    font-weight: $input-font-weight;
    line-height: $input-line-height;
    color: $input-color;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;
}

// File input
.cke_dialog_ui_input_file {
    width: 100%;
}


//
// Buttons
//

// The outer part of the button
a.cke_dialog_ui_button {
    display: inline-block;
    font-family: $btn-font-family;
    font-weight: $btn-font-weight;
    color: $btn-light-color!important;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: $btn-light-bg;
    border: $btn-border-width solid $btn-light-border-color;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);

    // Hover state
    @include hover-focus {
        border-color: $btn-light-hover-border-color;
        background-color: $btn-light-hover-bg;
        color: $btn-light-hover-color;
    }

    // Active state
    &:active {
        border-color: $btn-light-active-border-color;
        background-color: $btn-light-active-bg;
        color: $btn-light-active-color;
    }

    // Remove outline
    &:focus {
        outline: 0;
    }
}

// Special class appended to the Ok button
a.cke_dialog_ui_button_ok {
    color: $body-color;
    border-color: transparent;
    background-color: $blue-500;

    // Hover state
    @include hover-focus {
        color: $body-color;
        border-color: transparent;
        background-color: $blue-400;
    }
}

// Button cursor
a.cke_dialog_ui_button,
span.cke_dialog_ui_button {
    cursor: pointer;
}

// A special container that holds the footer buttons
.cke_dialog_footer_buttons {
    display: inline-table;
    width: auto;
    vertical-align: middle;
}


//
// Some utility CSS classes for dialog authors.
//

.cke_dialog {

    // Custom areas
    .cke_dark_background,
    .cke_light_background {
        border-color: $border-color !important;
    }

    // Helper for centering elements
    .cke_centered {
        text-align: center;
    }

    // Reset button
    a.cke_btn_reset {
        float: right;
        background: url(images/refresh.png) top left no-repeat;
        @include size($icon-font-size);

        // High res icon
        .cke_hidpi & {
            background-size: $icon-font-size;
            background-image: url(images/hidpi/refresh.png);
        }
    }

    // Locked/unlocked buttons
    a.cke_btn_locked,
    a.cke_btn_unlocked {
        float: left;
        background-repeat: no-repeat;
        @include size($icon-font-size);

        // High res icon
        .cke_hidpi & {
            background-size: $icon-font-size;
        }
    }

    // Locked button
    a.cke_btn_locked {
        background-image: url(images/lock.png);

        // Hide original icon
        .cke_icon {
            display: none;
        }

        // High res icon
        .cke_hidpi & {
            background-image: url(images/hidpi/lock.png);
        }
    }

    // Unlocked button
    a.cke_btn_unlocked {
        background-image: url(images/lock-open.png);

        // High res icon
        .cke_hidpi & {
            background-image: url(images/hidpi/lock-open.png);
        }
    }

    // Hover state
    .cke_btn_over {
        cursor: pointer;
    }
}


//
// The rest of the file contains style used on several common plugins. There is a
// tendency that these will be moved to the plugins code in the future.
//

.cke_dialog {

    // Preview boxes
    .ImagePreviewBox,
    .FlashPreviewBox {
        border: $border-width solid $border-color;
        padding: map-get($spacers, 2);
        margin-top: map-get($spacers, 1);
        @include border-radius($border-radius)
    }

    // Image preview
    .ImagePreviewBox {
        overflow: auto;
        height: 205px;
        width: 300px;

        // Reset whitespace
        table td {
            white-space: normal;
        }
    }

    // Flast preview
    .FlashPreviewBox {
        white-space: normal;
        overflow: auto;
        height: 160px;
        width: 390px;
    }

    // Image preview loader
    .ImagePreviewLoader {
        position: absolute;
        white-space: normal;
        overflow: hidden;
        height: 160px;
        width: 230px;
        margin: map-get($spacers, 1);
        padding: map-get($spacers, 1);
        opacity: 0.9;
        background-color: $modal-content-bg;
    }

    // Paste text dialog
    .cke_pastetext {
        width: 346px;
        height: 170px;

        // Textarea
        textarea {
            width: 340px;
            height: 170px;
            resize: none;
        }
    }

    // Paste text frame
    iframe.cke_pasteframe {
        width: 346px;
        height: 130px;
        padding: $input-padding-y $input-padding-x;
        color: $input-color;
        border: $border-width solid $border-color;
        @include border-radius ($border-radius);
    }

    // Hand cursor
    .cke_hand {
        cursor: pointer;
    }
}

// Disabled state utility
.cke_disabled {
    opacity: 0.5;
}

// Dialog body
.cke_dialog_body {

    // Hide extra label
    .cke_label {
        display: none;
    }

    // Text label
    label {
        display: inline-block;
        margin-bottom: map-get($spacers, 1);
        cursor: default;
    }
}

// Elements that contain HTML
.cke_dialog_ui_html {
    height: auto!important;

    // Add some spacing between them
    .cke_dialog_ui_vbox_child > &:not(:empty) {
        padding: map-get($spacers, 2) !important;
    }
}


// Smiles (emoji) and special chars
a.cke_smile,
a.cke_specialchar {
    color: $btn-light-color;
    background-color: $btn-light-bg;

    // Hover state
    @include hover-focus {
        color: $btn-light-hover-color;
        background-color: $btn-light-hover-bg;
    }

    // Active state
    &:active {
        border-color: $btn-light-active-border-color;
        background-color: $btn-light-active-bg;
        color: $btn-light-active-color;
    }

    // Remove outline
    &:focus {
        outline: 0;
    }
}

// Smiles (emoji)
a.cke_smile {
    overflow: hidden;
    display: block;
    text-align: center;
    padding: map-get($spacers, 1) 0;

    // Images
    img {
        vertical-align: middle;
    }
}

// Special chars
a.cke_specialchar {
    cursor: inherit;
    display: block;
    padding: map-get($spacers, 1);
    text-align: center;
}


//
// Styles specific to "cellProperties" dialog.
//

// Color selector
.cke_dialog_contents a.colorChooser {
    display: block;
    margin-top: map-get($spacers, 1);
    margin-left: map-get($spacers, 2);
    width: 80px;
}


//
// Checkbox
//

// Base
.cke_dialog_ui_checkbox {
    display: inline-block;
    margin-bottom: map-get($spacers, 2);

    // Control label
    label {
        margin-left: $form-check-input-margin-x;
    }
}

// Compensate focus outline for some input elements
.cke_dialog_ui_checkbox_input:focus,
.cke_dialog_ui_radio_input:focus,
.cke_btn_over {
    outline: 0;
}


//
// IFrame
//

.cke_iframe_shim {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}