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

//
// ─── RIBBON BAR MAIN ────────────────────────────────────────────────────────────
//

    @ribbon-border-size:        4px;
    @ribbon-border-bottom-size: 1px;
    .ribbon {
        -webkit-user-select:    none;
        user-select:            none;
        width:                  100%;
        height:                 @ribbon-height;
        background:             var( --color-2 );
        border-bottom:          var( --ribbon-border-bottom ) 1px solid;
    }

//
// ─── RIBBON ICON ────────────────────────────────────────────────────────────────
//

    .ribbon-icon {
        background-position:    top center;
        background-size:        34px 34px;
        background-repeat:      no-repeat;
        margin:                 8px 5px 0 5px;
        padding-top:            41px;
        width:                  max-content;
        min-width:              46px;
        text-align:             center;
        color:                  var( --kary-foreground );
        float:                  left;
        padding-bottom:         6px;
        border-bottom-width:    3px;
        border-bottom-style:    solid;
        border-bottom-color:    transparent;
        cursor:                 pointer;
    }

//
// ─── RIBBON HOVER ───────────────────────────────────────────────────────────────
//

    .ribbon-icon:hover {
        border-bottom-color:    var( --ribbon-hover-border );
    }

    .ribbon-icon-active {
        border-bottom-color:    var( --ribbon-active-border ) !important;
    }

//
// ─── SEPARATOR ──────────────────────────────────────────────────────────────────
//

    .ribbon-separator {
        @margin-tob-bottom:     8px;
        width:                  2px;
        height:                 @ribbon-height - 2 * @margin-tob-bottom;
        margin:                 @margin-tob-bottom 8px @margin-tob-bottom 8px;
        background:             var( --ribbon-separator );
        float:                  left;
    }

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