
//
// Copyright © 2016-present Pouya Kary. All Rights Reserved
//   Author: Pouya Kary <k@karyfoundation.org>
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//

//
// ─── IMPORTS ────────────────────────────────────────────────────────────────────
//

    @import '../../globals';

//
// ─── VARS ───────────────────────────────────────────────────────────────────────
//

    @open-close-duration: 0.4s;

//
// ─── EDITOR CONTAINER ───────────────────────────────────────────────────────────
//

    #quartet-editor-container {
        display:    flex;
        height:     ~'calc( 100vh - 110px )';
        overflow:   hidden;
        width:      ~'calc( 100vw + 220pt )';
    }

//
// ─── QUARTET CODING VIEW ─────────────────────────────────────────────────────────
//

    #quartet-coding-view {
        //transition-duration: @open-close-duration;
        background-color:   var( --kary-background );
        flex:               1;
        height:             inherit !important;
        max-width:          100vw;
        transition:         width @open-close-duration, max-width @open-close-duration;
        width:              100vw;
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    #quartet-console-view {
        -webkit-user-select:    none;
        background-color:       var( --side-console-background );
        border-left:            1pt var( --side-console-border-color ) solid;
        box-sizing:             border-box;
        color:                  var( --side-console-title-color );
        flex:                   1;
        height:                 inherit !important;
        max-width:              0;
        min-width:              220pt;
        overflow:               hidden;
        transition:             max-width @open-close-duration;
        user-select:            none;
    }

//
// ─── SIDE BAR CONTAINER ─────────────────────────────────────────────────────────
//

    #side-bar-container {
        -webkit-user-select:    none;
        display:                flex;
        flex-direction:         column;
        height:                 ~'calc( 100vh - 110px )';
        user-select:            none;

        .console-sidebar-spacer {
            border-bottom:      1pt var( --side-console-border-color ) solid;
            margin-bottom:      2pt;
            max-height:         fit-content;
            padding-top:        10pt;
        }
    }

    .flex-fixed {
        height:         fit-content;
        max-height:     fit-content;
        min-height:     fit-content;
    }

//
// ─── HIDE CONSOLE ───────────────────────────────────────────────────────────────
//

    .show-console-view {
        #quartet-console-view {
            -webkit-user-select:    none;
            max-width:              220pt !important;
            transition:             max-width @open-close-duration;
            user-select:            none;
        }

        #quartet-coding-view {
            //transition-duration: @open-close-duration;
            -webkit-user-select:    none;
            max-width:              ~'calc( 100vw - 220pt )' !important;
            transition:             width @open-close-duration, max-width @open-close-duration;
            user-select:            none;
            width:                  ~'calc( 100vw - 220pt )' !important;
        }
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    .console-sidebar-title {
        font-size:              0.9rem;
        font-weight:            700;
        letter-spacing:         2pt;
        padding-bottom:         7pt;
        padding:                10pt;
        text-transform:         uppercase;
        user-select:            none;
        -webkit-user-select:    none;
    }

//
// ─── CONSOLE CONTENT ────────────────────────────────────────────────────────────
//

    #orchestra-console-view-content {
        -webkit-user-select:    none;
        color:                  var( --console-regexp );
        font-family:            @source-code-pro-typeface;
        font-size:              12pt;
        letter-spacing:         2pt;
        line-height:            1.8;
        margin-bottom:          13pt;
        overflow-y:             scroll;
        padding-left:           13pt;
        user-select:            none;
        word-wrap:              break-word;
    }

//
// ─── FLAGS VIEW ─────────────────────────────────────────────────────────────────
//

    #orchestra-console-view-flags {
        -webkit-user-select:    none;
        display:                flex;
        justify-content:        flex-start;
        user-select:            none;

        .sidebar-flags {
            @sidebar-flag-size:     30pt;
            -webkit-user-select:    none;
            background-color:       var( --side-console-flag-inactive-back );
            border-radius:          3pt;
            color:                  var( --side-console-flag-inactive-color );
            flex:                   1;
            font-family:            @source-code-pro-typeface;
            font-size:              18pt;
            height:                 @sidebar-flag-size;
            margin-left:            10pt;
            max-width:              @sidebar-flag-size;
            text-align:             center;
            user-select:            none;
            vertical-align:         center;
            width:                  @sidebar-flag-size;

            &.active {
                background-color:   var( --side-console-flag-active-back );
                color:              var( --side-console-flag-active-color );
            }
        }
    }

//
// ─── OPTIONS ────────────────────────────────────────────────────────────────────
//

    .console-options-single-option-box {
        align-items:    center;
        display:        flex;
        margin:         5pt 20pt 5pt 20pt;
    }

    .console-options-title {
        font-family:    @source-code-pro-typeface;
        margin-right:   10pt;
        max-width:      fit-content;
        min-width:      max-content;
    }

//
// ─── CONSOLE COMPILER OPTIONS ───────────────────────────────────────────────────
//

    @console-options-select-box-border-radius: 4pt;

    .console-options-select-box {
        border-radius:      @console-options-select-box-border-radius;
        background-color:   var( --side-console-option-inactive-back );
        display:            flex;
    }

    .console-options-spacer {
        height:             2pt;
    }

    .console-options-select-option {
        padding:            2pt 0pt 1pt 0pt;
        border-radius:      @console-options-select-box-border-radius;
        font-family:        @source-code-pro-typeface;
        font-size:          10pt;
        text-align:         center;
        min-width:          45pt;
        cursor:             pointer;

        &.active {
            background-color:   var( --side-console-option-active-back );
            color:              var( --side-console-option-active-color );
            box-shadow:         var( --side-console-option-active-shadow );
        }
    }

//
// ─── CODE VIEW CONSOLE ──────────────────────────────────────────────────────────
//

    .console-sidebar-code-view {
        display:        flex;
        flex-direction: column
    }

// ────────────────────────────────────────────────────────────────────────────────
