/* ------------------------------------------------------------------------------
*
*  # WYSIHTML5 editor
*
*  An open source rich text editor based on HTML5 technology
*
*  Version: 1.2
*  Latest update: Jun 8, 2016
*
* ---------------------------------------------------------------------------- */


// Core
// ----------------------------------------

// Base
.wysihtml5 {
    max-height: 450px;
    resize: vertical;
    background-color: #fff;
    overflow: auto;
    padding: @content-padding-large;
    outline: 0;
}

// Editor area
.wysihtml5-editor {
    border-width: 0;
    padding: 0;
}

// Container
.wysihtml5-sandbox {
    width: 100%!important;
}

// Modals
.bootstrap-wysihtml5-insert-link-modal,
.bootstrap-wysihtml5-insert-image-modal {
    .modal-dialog {
        width: 566px;
    }
}


// Toolbar
// ----------------------------------------

// Base
.wysihtml5-toolbar {
    margin: 0;
    padding: @content-padding-base @content-padding-large;
    padding-bottom: 0;
    display: block;
    background-color: @panel-footer-bg;
    border: 1px solid @panel-default-border;
    border-bottom: 0;
    .border-top-radius(@border-radius-base);

    // List item
    > li {
        display: inline-block;
        list-style: none;
        margin: 0 @content-padding-base @content-padding-base 0;
    }

    // Dropdown menu
    .dropdown-menu {
        max-height: 200px;
        overflow-y: auto;

        // Color select
        .color-select {
            > li > a {
                &:hover,
                &:focus {
                    background-color: @dropdown-link-hover-bg;
                    color: @text-color;
                }
            }
        }

        // Hide dropdown if disabled
        .wysihtml5-commands-disabled & {
            display: none !important;
        }
    }

    // Dropdown icon/caret
    .dropdown-toggle {
        > [class*=icon-] {
            margin-right: @element-horizontal-spacing;
        }

        // Caret
        .caret {
            margin-left: @element-horizontal-spacing;
        }
    }


    // Link styles
    a {
        &[data-wysihtml5-command=bold] {
            font-weight: bold;
        }
        &[data-wysihtml5-command=italic] {
            font-style: italic;
        }
        &[data-wysihtml5-command=underline] {
            text-decoration: underline;
        }
        &.btn.wysihtml5-command-active {
            .box-shadow(inset 0 1px 2px fade(#000, 10%));
        }
        &.wysihtml5-colors-title {
            padding-left: (@icon-font-size + (@padding-base-horizontal * 2));
        }
    }


    //
    // Colors
    //

    // Color indicator
    .wysihtml5-colors {
        display: block;
        width: @icon-font-size;
        height: @icon-font-size;
        position: absolute;
        pointer-events: none;
        left: @padding-base-horizontal;
        top: (((@padding-base-vertical + 1) * 2) + @line-height-computed - @icon-font-size) / 2;
        border-radius: 100px;
    }

    // Color commands
    div[data-wysihtml5-command-value="black"] { background: black !important }
    div[data-wysihtml5-command-value="silver"] { background: silver !important }
    div[data-wysihtml5-command-value="gray"] { background: gray !important }
    div[data-wysihtml5-command-value="maroon"] { background: maroon !important }
    div[data-wysihtml5-command-value="red"] { background: red !important }
    div[data-wysihtml5-command-value="purple"] { background: purple !important }
    div[data-wysihtml5-command-value="green"] { background: green !important }
    div[data-wysihtml5-command-value="olive"] { background: olive !important }
    div[data-wysihtml5-command-value="navy"] { background: navy !important }
    div[data-wysihtml5-command-value="blue"] { background: blue !important }
    div[data-wysihtml5-command-value="orange"] { background: orange !important }
}

// Define colors
.wysiwyg-color-black {
    color: black;
}
.wysiwyg-color-silver {
    color: silver;
}
.wysiwyg-color-gray {
    color: gray;
}
.wysiwyg-color-white {
    color: white;
}
.wysiwyg-color-maroon {
    color: maroon;
}
.wysiwyg-color-red {
    color: red;
}
.wysiwyg-color-purple {
    color: purple;
}
.wysiwyg-color-fuchsia {
    color: fuchsia;
}
.wysiwyg-color-green {
    color: green;
}
.wysiwyg-color-lime {
    color: lime;
}
.wysiwyg-color-olive {
    color: olive;
}
.wysiwyg-color-yellow {
    color: yellow;
}
.wysiwyg-color-navy {
    color: navy;
}
.wysiwyg-color-blue {
    color: blue;
}
.wysiwyg-color-teal {
    color: teal;
}
.wysiwyg-color-aqua {
    color: aqua;
}
.wysiwyg-color-orange {
    color: orange;
}