/*
*   Abricotine - Markdown Editor
*   Copyright (c) 2015 Thomas Brouard
*   Licensed under GNU-GPLv3 <http://www.gnu.org/licenses/gpl.html>
*/

// Non customizable values
// =======================

@ui-pane-width: 200px;
@ui-vertical-divider-width: 5px;

// Main
// ====

    html, body {
        min-height: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: @ui-background-color;
    }

    body {
        overflow: hidden;
        font: caption;
        font-size: @ui-font-size;
        -webkit-user-select: none;
        user-select: none;
    }

    p {
        cursor: default;
    }

// Editor and Pane
// ===============

    #editor {
        padding: 0;
        margin: 0;
        min-height: 100%;
        left: 0;
    }

    #pane {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: @ui-pane-width;
        display: none;
        border: none;
        border-radius: 0;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0 15px 0;
        cursor: default;
        text-decoration: none;
        background-color: @ui-pane-background-color;
        color: @ui-pane-color;
    }

    #pane:hover {
        overflow-y: auto;
    }

    #pane h2 {
        font-size: @ui-font-size;
        padding: 10px;
        margin: 0;
        font-weight: normal;
        color: @ui-pane-color;
    }

    #pane ul {
        margin: 0 -15px;
        padding: 0;
        list-style: none;
    }

    #pane ul li {
        cursor: pointer;
        display: block;
        padding: 0 15px;
    }

    #pane ul li a  {
        display: block;
        padding: 8px 0;
        text-decoration: none;
        .ui-pane-item();
    }

    #pane ul li a:hover {
        color: @ui-pane-color;
        .ui-pane-item-hover();
    }

    #pane ul li.pane-active a {
        .ui-pane-item-active();
    }

    #pane ul li.toc-h1 a {
        padding-left: 10px;
    }

    #pane ul li.toc-h2 a {
        padding-left: 20px;
    }

    #pane ul li.toc-h3 a {
        padding-left: 30px;
    }

    #pane ul li.toc-h4 a {
        padding-left: 40px;
    }

    #pane ul li.toc-h5 a {
        padding-left: 50px;
    }

    #pane ul li.toc-h6 a {
        padding-left: 60px;
    }

    #pane-divider {
        left: @ui-pane-width;
        width: @ui-vertical-divider-width;
        background: transparent;
        border-left: 1px solid @ui-pane-border-color;
        display: none;
        cursor: ew-resize;
    }

    body:not(.pane-visible) #editor {
        left: 0 !important;
    }

    .pane-visible #editor {
        left: @ui-pane-width;
    }

    .pane-visible #pane {
        display: block;
    }

    .pane-visible #pane-divider {
        display: block;
    }

// CodeMirror dialogs
// ==================

    .CodeMirror-dialog {
        left: 0;
        right: 0;
        padding: .6em .8em;
        overflow: hidden;
        color: @ui-dialog-color;
        font-family: inherit;
        font: small-caption;
        font-size: @ui-font-size;
        cursor: default;
        background: @ui-dialog-background;
    }

    .CodeMirror-dialog-top {
        border-bottom: 1px solid @ui-dialog-border-color;
        top: 0;
    }

    .CodeMirror-dialog-bottom {
        border-top: 1px solid @ui-dialog-border-color;
        bottom: 0;
    }

    .CodeMirror-dialog input {
        border: none;
        outline: none;
        background: transparent;
        min-width: 300px !important;
        margin: auto 10px;
        font-family: auto;
        font: small-caption;
        font-size: @ui-font-size;
        color: @ui-dialog-color;
        cursor: text;
    }

    .CodeMirror-dialog button {
        font-size: @ui-font-size * 0.8;
        background: @ui-dialog-button-background;
        border-radius: 1px;
        border: none;
        display: inline-block;
        cursor: default;
        color: @ui-dialog-button-color;
        font-weight: bold;
        text-decoration: none;
        padding: 4px 12px;
        vertical-align: top;
        margin: 0 0 0 6px;
        text-align: center;
        border: none;
        outline: none;
    }

    .CodeMirror-dialog button:hover, .CodeMirror-dialog button:active {
        box-shadow: #333 0px -1px 1px 0px inset;
    }

    .CodeMirror-dialog button:focus {
        background: @ui-dialog-button-focus-background;
    }

    .CodeMirror-dialog span.CodeMirror-search-hint {
        font-family: auto;
        font: small-caption;
        font-size: @ui-font-size;
        color: @ui-dialog-color !important;
        float: right;
        clear: none;
    }

// Scrollbars
// ==========

    .CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical {
        background-color: @ui-scrollbar-track-color;
    }

    .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
        background: @ui-scrollbar-color;
        border-radius: (@ui-scrollbar-width - 2) / 2;
        border: 1px solid @ui-scrollbar-track-color;
    }

    .CodeMirror-overlayscroll-horizontal div:hover, .CodeMirror-overlayscroll-vertical div:hover {
        background: @ui-scrollbar-hover-color;
        border-color: @ui-scrollbar-hover-color;
    }

    .CodeMirror-overlayscroll-vertical {
        right: 0;
        width: @ui-scrollbar-width;
        div { width: @ui-scrollbar-width - 2; }
    }

    .CodeMirror-overlayscroll-horizontal {
        bottom: 0;
        height: @ui-scrollbar-width;
        div { height: @ui-scrollbar-width - 2; }
    }

    ::-webkit-scrollbar {
        width: @ui-scrollbar-width;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background-color: @ui-scrollbar-track-color;
        display: block;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background-color: @ui-scrollbar-color;
        border-radius: (@ui-scrollbar-width - 2) / 2;
        width: @ui-scrollbar-width - 2;
        border: 1px solid @ui-scrollbar-track-color;
    }

    ::-webkit-scrollbar-thumb:hover {
        width: @ui-scrollbar-width;
        background-color: @ui-scrollbar-hover-color;
        border-color: @ui-scrollbar-hover-color;
    }

    // Search matches on scrollbars
    .CodeMirror-search-match {
        background: @ui-scrollbar-search-background;
        border-top: none;
        border-bottom: none;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        opacity: 1;
        width: @ui-scrollbar-width !important;
    }
