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

//
// ─── EDITOR ─────────────────────────────────────────────────────────────────────
//

    #playground-editor {
        width:              100vw;
        height:             calc( ~'100vh - 39px ' - @ribbon-height );
    }

//
// ─── MONACO STYLES ──────────────────────────────────────────────────────────────
//

    .monaco-editor .monaco-editor-hover {
        @margin-size:       0;
        border-radius:      5pt                                     !important;
        margin-top:         @margin-size                            !important;
        margin-bottom:      @margin-size                            !important;
        padding:            5pt 10pt 5pt 10pt                       !important;
        user-select:        none                                    !important;
        border:             var( --playground-hover-border )        !important;
        background-color:   var( --playground-hover-back )          !important;
        box-shadow:         var( --playground-hover-shadow )        !important;
    }

    .monaco-editor-hover hr {
        background-color:   var( --playground-hover-hr-back )       !important;
        height:             1pt                                     !important;
        border:             none                                    !important;
    }

    .monaco-editor-hover code {
        background-color:   var( --playground-hover-code-back )     !important;
        color:              var( --playground-hover-code-text )     !important;
    }

    .monaco-editor-hover strong {
        color:              var( --playground-hover-strong-color )  !important;
    }

//
// ─── HIGHLIGHTS ─────────────────────────────────────────────────────────────────
//

    .playground-match {
        background-color:   var( --playground-match-back )      !important;
    }

    .match-token {
        background-color:   var( --playground-match-back )      !important;
        color:              var( --playground-match-text )      !important;
    }

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