
//
// 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';

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

    @console-color:                     var( --console-color );
    @editor-ribbon-sum-of-icon-widths:  565px;
    @console-height:                    44px;

    #ribbon-console-view {
        text-align:             center;
        float:                  left;
        background-color:       @console-color;
        border-radius:          3px;
        margin:                 11px 5px 0 5px;
        padding:                3px 10px 0 10px;
        width:                  calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths );
        height:                 @console-height;
        overflow:               hidden;
    }

//
// ─── COPY BUTTON ────────────────────────────────────────────────────────────────
//

    #ribbon-console-copy-hover-button {
        background-color:       var( --console-hover-color );
        position:               relative;
        padding-top:            13px;
        padding-bottom:         30px;
        text-align:             center;
        font-family:            @source-code-pro-typeface;
        text-transform:         uppercase;
        letter-spacing:         7px;
        font-size:              14px;
        width:                  calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 20px );
        opacity:                0;
        top:                    -45px;
        left:                   -10px;
        height:                 50px;
        z-index:                1;
        border:                 none;
        cursor:                 pointer;
    }

    #console-copy-icon {
        width:                  20px;
        height:                 18px;
        float:                  left;
        margin-left:            ~'calc( 50% - 95pt )';
        background-position:    left;
        background-size:        contain;
        background-image:       url('console-copy-icon.svg');
        background-repeat:      no-repeat;
    }

    .dark > .tab-view > #orchestra-and-ribbon-half > .ribbon > #ribbon-console-view > #ribbon-console-copy-hover-button > div > #console-copy-icon {
        background-image:       url('dark-console-copy-icon.svg');
    }

    #console-copy-text {
        padding-left:           10px;
        float:                  left;
        color:                  var( --console-copy-text );
    }

    #ribbon-console-copy-hover-button:hover {
        opacity:                1;
    }

    #ribbon-console-copy-hover-button:active {
        background-color:       var( --color-5 );
    }

//
// ─── ACTIVE HIGHLIGHTED BLOCK ───────────────────────────────────────────────────
//

    .console-highlight-active-block {
        color:                      var( --side-console-active-color ) !important;
        background-color:           var( --side-console-active-back ) !important;
        border-radius:              3pt;
        padding:                    0 3pt 0 5pt;
        box-shadow:                 0 0 10pt var( --side-console-active-shadow );
        display:                    inline;
        margin:                     0 1pt 0 1pt;
        min-width: fit-content;
    }

//
// ─── CONSOLE TEXT ───────────────────────────────────────────────────────────────
//


    #ribbon-console-title {
        font-family:            @source-code-pro-typeface;
        color:                  var( --console-title );
        font-size:              9px;
        text-transform:         uppercase;
        letter-spacing:         2px;
        max-height:             13px
    }

//
// ─── CONSOLE REGEXP ─────────────────────────────────────────────────────────────
//

    #ribbon-console-regexp {
        font-family:            @source-code-pro-typeface;
        font-size:              18px;
        letter-spacing:         2px;
        text-align:             center;
        color:                  var( --console-regexp );
        overflow:               hidden;
        max-height:             29px;
        max-width:              calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 140px );
    }

//
// ─── RIBBON ICONS ───────────────────────────────────────────────────────────────
//

    .ribbon-editor-regexp-importer {
        background-image:       url('ribbon-editor-regexp-importer.png');
    }

    .dark > .tab-view > #orchestra-and-ribbon-half > .ribbon > .ribbon-editor-regexp-importer {
        background-image:       url('dark-ribbon-editor-regexp-importer.png');
    }



    .ribbon-editor-export-svg {
        background-image:       url('ribbon-editor-export-svg.png');
    }

    .dark > .tab-view > #orchestra-and-ribbon-half > .ribbon > .ribbon-editor-export-svg {
        background-image:       url('dark-ribbon-editor-export-svg.png');
    }


    .ribbon-editor-toggle-console {
        background-image:       url('ribbon-editor-console.png');
    }

    .dark > .tab-view > #orchestra-and-ribbon-half > .ribbon > .ribbon-editor-toggle-console {
        background-image:       url('dark-ribbon-editor-console.png');
    }


    .ribbon-editor-help {
        background-image:       url('ribbon-editor-help.png');
    }

    .dark > .tab-view > #orchestra-and-ribbon-half > .ribbon > .ribbon-editor-help {
        background-image:       url('dark-ribbon-editor-help.png');
    }

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