//
// OSIVIA Bootstrap extensions - TinyMCE
// --------------------------------------------------


textarea.tinymce {
    
    // TinyMCE default 
    &.tinymce-default {
        @tinymce-height: 200px;
        @tinymce-border-width: 1px;
        
        height: @input-height-base + @tinymce-height + 2 * @panel-body-padding + 3 * @tinymce-border-width;
    }
    
}


.mce-panel {
    &, &.mce-container {
        border-color: @input-border;    
    }
}


.mce-tinymce {
    &, &.mce-container {
        border-radius: @border-radius-base;
        
        .box-shadow(@shadow: unset);
    }
}


.mce-top-part {
    &, &.mce-container {
        &::before {
            .box-shadow(@shadow: unset);
        }
    }
}


.mce-toolbar-grp {
    &, &.mce-container {
        .border-top-radius(@radius: @border-radius-base);
        
        .mce-btn {
            &, &.mce-active {
                &, &:hover, &:focus {
                    background-color: unset;
                    border-style: none;
                }
            }
            
            button {
                padding: @padding-small-vertical @padding-small-horizontal;
                
                border-radius: @btn-border-radius-small;
                
                &, i {
                    color: @btn-default-color;
                }
                
                &:hover, &:focus {
                    background-color: darken(@btn-default-bg, 10%);
                }
            }
            
            &.mce-active {
                button {
                    background-color: darken(@btn-default-bg, 10%);
                    
                    &, i {
                        color: @btn-default-color;
                    }
                    
                    &:focus {
                        .tab-focus();
                    }
                    
                    &:hover, &:focus {
                        background-color: darken(@btn-default-bg, 17%);
                    }
                }
            }
        }
    }
}


.mce-edit-area {
    &, &.mce-container {
        padding: @panel-body-padding;
        
        .border-bottom-radius(@radius: @border-radius-base);
        
        .box-shadow(@shadow: inset 0 1px 1px fade(#000, 7.5%));
    }
}