
//
// 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/.
//

//
// ─── INCLUDES ───────────────────────────────────────────────────────────────────
//

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

//
// ─── HEADING ────────────────────────────────────────────────────────────────────
//

    .heading {
        -webkit-user-select:    none;
        -webkit-app-region:     drag;
        background-size:        contain;
        background-position:    left bottom;
        background-repeat:      no-repeat;
        padding-top:            6px;
        padding-bottom:         6px;
        //padding-left: 20px;
        padding-right:          20px;
        font-size:              1.8rem;
        color:                  var( --kary-foreground );
        height:                 @header-height - 6px;
        background-color:       var( --color-2 );
        width:                  100vw;
        //background-color: #D9D9D9;
        overflow:               hidden;
        border-bottom:          @ribbon-border-size solid var( --acent-color );
    }

//
// ─── HEADER ─────────────────────────────────────────────────────────────────────
//

    #header-left {
        float:                  left;
    }

    #header-right {
        float:                  right;
        color:                  var( --color-4 );
        padding-top:            0.25rem;
        font-size:              1.2rem;
    }

//
// ─── TOOLBAR ────────────────────────────────────────────────────────────────────
//

    .icon {
        float:                  left;
        height:                 @icon-box-size;
        width:                  @icon-box-size;
        margin-left:            10px;
        margin-top:             4px;
        background-size:        contain;
        background-position:    center;
        background-repeat:      no-repeat;
        background-size:        @icon-size @icon-size;
    }

    .icon:hover{
        cursor: pointer;
    }

    .icon-active {
        background-size:        @active-icon-size @active-icon-size;
        cursor: pointer;
    }

    #icon-move {
        margin-left:            30px;
        background-image:       url('cursor.png');
    }

    #icon-edit {
        background-image:       url('edit.png');
    }

    #icon-remove {
        background-image:       url('remove.png');
    }

    #icon-select {
        background-image:       url('select.png');
    }

//
// ─── STATUS BAR ─────────────────────────────────────────────────────────────────
//

    #status-view {
        float:                  left;
        margin-left:            @icon-size;
        margin-top:             11px;
        font-size:              1.2rem;
        color:                  var( --kary-orange );
    }

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