// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

//
// Component: HTML editor
//
// ========================================================================


// Variables
// ========================================================================

@htmleditor-navbar-background:                @global-light-background;

@htmleditor-navbar-nav-height:                40px;
@htmleditor-navbar-nav-line-height:           @htmleditor-navbar-nav-height;
@htmleditor-navbar-nav-color:                 @global-color;

@htmleditor-navbar-nav-hover-background:      @global-primary-background;
@htmleditor-navbar-nav-hover-color:           @global-contrast-color;
@htmleditor-navbar-nav-onclick-background:    @global-primary-background;
@htmleditor-navbar-nav-onclick-color:         fade(@global-contrast-color, 65%);
@htmleditor-navbar-nav-active-background:     @global-dark-background;
@htmleditor-navbar-nav-active-color:          @global-color;

@htmleditor-content-border:                   @global-border;
@htmleditor-content-background:               @global-background;

@htmleditor-fullscreen-z-index:               @global-z-index - 10;

//
// New
//

@htmleditor-navbar-border-width:               @global-border-width;
@htmleditor-navbar-border:                     @htmleditor-content-border;
@htmleditor-content-border-width:              @htmleditor-navbar-border-width;


// Hooks
// ========================================================================


.hook-htmleditor() {}

.hook-htmleditor-navbar() {
    border: @global-border-width solid @global-border;
    border-top-left-radius: @global-border-radius;
    border-top-right-radius: @global-border-radius;
    -webkit-transition: @global-transition;
    transition: @global-transition;
}

.hook-htmleditor-navbar-nav() {}

.hook-htmleditor-navbar-nav-hover() {
    position: relative;
    z-index: 1;
}

.hook-htmleditor-navbar-nav-onclick() { box-shadow: inset 2px 2px 6px @global-primary-active-shadow; }

.hook-htmleditor-navbar-nav-active() {}

.hook-htmleditor-content() {
    border-left: @htmleditor-content-border-width solid @htmleditor-content-border;
    border-right: @htmleditor-content-border-width solid @htmleditor-content-border;
    border-bottom: @htmleditor-content-border-width solid @htmleditor-content-border;
    border-bottom-left-radius: @global-border-radius;
    border-bottom-right-radius: @global-border-radius;
}


// Miscellaneous
// ========================================================================

.hook-htmleditor-misc() {

    // Apply same `border-radius` as `uk-htmleditor-navbar`
    .uk-htmleditor-navbar-nav:first-child > li:first-child > a { border-top-left-radius: @global-border-radius; }

    // Sub-modifier `uk-htmleditor-navbar-flip`

    // Collapse border
    .uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav > li > a {
        margin-left: 0;
        margin-right: -1px;
    }

    // Apply same `border-radius` as `uk-htmleditor-navbar`
    .uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav:first-child > li:first-child > a { border-top-left-radius: 0; }
    .uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav:last-child > li:last-child > a { border-top-right-radius: @global-border-radius; }

    // Sub-modifier `uk-htmleditor-fullscreen`
    .uk-htmleditor-fullscreen .uk-htmleditor-navbar {
        border-top: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .uk-htmleditor-fullscreen .uk-htmleditor-content {
        border: none;
        border-radius: 0;
    }

    .uk-htmleditor-fullscreen .uk-htmleditor-navbar-nav > li > a { border-radius: 0 !important; }

}
