/* ========================================================================
    Component: markdownarea.less
  ========================================================================== */
   
// Name:            Markdown area
// Description:     Defines styles for markdownareas
//
// Component:       `uk-markdownarea`
//
// Sub-objects:     `uk-markdownarea-navbar`
//                  `uk-markdownarea-navbar-nav`
//                  `uk-markdownarea-navbar-flip`
//                  `uk-markdown-button-markdown
//                  `uk-markdown-button-preview`
//                  `uk-markdownarea-content`
//                  `uk-markdownarea-code`
//                  `uk-markdownarea-preview`
//
// Modifier:        `uk-markdownarea-fullscreen`
//                  `[data-mode='tab']`
//                  `[data-mode='split']`
//
// States:          `uk-active`
//
// ========================================================================


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

@markdownarea-navbar-background:                #eee;

@markdownarea-navbar-nav-height:                40px;
@markdownarea-navbar-nav-padding-horizontal:    15px;
@markdownarea-navbar-nav-line-height:           @markdownarea-navbar-nav-height;
@markdownarea-navbar-nav-color:                 #444;

@markdownarea-navbar-nav-hover-background:      #f5f5f5;
@markdownarea-navbar-nav-hover-color:           #444;
@markdownarea-navbar-nav-onclick-background:    #ddd;
@markdownarea-navbar-nav-onclick-color:         #444;
@markdownarea-navbar-nav-active-background:     #f5f5f5;
@markdownarea-navbar-nav-active-color:          #444;

@markdownarea-content-border:                   #ddd;
@markdownarea-content-background:               #fff;
@markdownarea-content-padding:                  20px;
@markdownarea-content-split-border:             #eee;

@markdownarea-fullscreen-z-index:               990;
@markdownarea-fullscreen-content-top:           @markdownarea-navbar-nav-height;
@markdownarea-fullscreen-icon-resize:           "\f066";


.uk-markdownarea {
    .hook-markdownarea;
}


// Sub-object `uk-markdownarea-navbar`
 
.uk-markdownarea-navbar {
    background: @markdownarea-navbar-background;
    .hook-markdownarea-navbar;
}

// Micro clearfix

.uk-markdownarea-navbar:before,
.uk-markdownarea-navbar:after {
    content: " ";
    display: table;
}

.uk-markdownarea-navbar:after { clear: both; }


// Sub-object `uk-markdownarea-navbar-nav`

.uk-markdownarea-navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

.uk-markdownarea-navbar-nav > li { float: left; }

// 1. Dimensions
// 2. Style

.uk-markdownarea-navbar-nav > li > a {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    /* 1 */
    height: @markdownarea-navbar-nav-height;
    padding: 0 @markdownarea-navbar-nav-padding-horizontal;
    line-height: @markdownarea-navbar-nav-line-height;
    /* 2 */
    color: @markdownarea-navbar-nav-color;
    font-size: 11px;
    cursor: pointer;
    .hook-markdownarea-navbar-nav;
}

//
// Hover
// 1. Apply hover style also to focus state
// 2. Remove default focus style

.uk-markdownarea-navbar-nav > li:hover > a,
.uk-markdownarea-navbar-nav > li > a:focus { // 1
    background-color: @markdownarea-navbar-nav-hover-background;
    color: @markdownarea-navbar-nav-hover-color;
    outline: none; /* 2 */
    .hook-markdownarea-navbar-nav-hover;
}

// OnClick 
.uk-markdownarea-navbar-nav > li > a:active {
    background-color: @markdownarea-navbar-nav-onclick-background;
    color: @markdownarea-navbar-nav-onclick-color;
    .hook-markdownarea-navbar-nav-onclick;
}

// Active 
.uk-markdownarea-navbar-nav > li.uk-active > a {
    background-color: @markdownarea-navbar-nav-active-background;
    color: @markdownarea-navbar-nav-active-color;
    .hook-markdownarea-navbar-nav-active;
}


// Sub-object: `uk-markdownarea-navbar-flip`

 .uk-markdownarea-navbar-flip { float: right; }


// Sub-object for special buttons

[data-mode='split'] .uk-markdown-button-markdown,
[data-mode='split'] .uk-markdown-button-preview { display: none; }


// Sub-object `uk-markdownarea-content`

.uk-markdownarea-content {
    border-left: 1px solid @markdownarea-content-border;
    border-right: 1px solid @markdownarea-content-border;
    border-bottom: 1px solid @markdownarea-content-border;
    background: @markdownarea-content-background;
    .hook-markdownarea-content;
}

// Micro clearfix

.uk-markdownarea-content:before,
.uk-markdownarea-content:after {
    content: " ";
    display: table;
}

.uk-markdownarea-content:after { clear: both; }


// Modifier `uk-markdownarea-fullscreen`

.uk-markdownarea-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: @markdownarea-fullscreen-z-index;
}

.uk-markdownarea-fullscreen .uk-markdownarea-content {
    position: absolute;
    top: @markdownarea-fullscreen-content-top;
    left: 0;
    right: 0;
    bottom: 0;
}


.uk-markdownarea-fullscreen .uk-icon-expand:before { content: @markdownarea-fullscreen-icon-resize; }


// Sub-objects `uk-markdownarea-code` and `uk-markdownarea-preview`

.uk-markdownarea-code,
.uk-markdownarea-preview {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.uk-markdownarea-preview {
    padding: @markdownarea-content-padding;
    overflow-y: scroll;
    h1, h2, h3, h4 {
        &:first-child {
            margin-top: 0;
        }
    }
}

// Tab view

[data-mode='tab'][data-active-tab='code'] .uk-markdownarea-preview,
[data-mode='tab'][data-active-tab='preview'] .uk-markdownarea-code { display: none; }

// Split view

[data-mode='split'] .uk-markdownarea-code,
[data-mode='split'] .uk-markdownarea-preview {
    float: left;
    width: 50%;
}

[data-mode='split'] .uk-markdownarea-code { border-right: 1px solid @markdownarea-content-split-border; }


//  CodeMirror modifications 

.uk-markdownarea .CodeMirror {
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Fullscreen MArkdown area editor */
.markdownarea-fullscreen {
    html&, 
    body {
        height: 100%;
        .transition(~"height 0 linear 0.2s");
    }
    .navbar-top,
    .sidebar,
    .offsidebar {
        visibility: hidden;
        opacity: 0;
        .transition(~"opacity .2s ease, visibility 0 ease 0.2s");
    }
    .wrapper > section {
        margin-left: 0;
        //.transition-delay(0.2s)
    }
}


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

.hook-markdownarea-misc;

.hook-markdownarea() {}
.hook-markdownarea-navbar() {}
.hook-markdownarea-navbar-nav() {}
.hook-markdownarea-navbar-nav-hover() {}
.hook-markdownarea-navbar-nav-onclick() {}
.hook-markdownarea-navbar-nav-active() {}
.hook-markdownarea-content() {}
.hook-markdownarea-misc() {}