////
///
/// Ribbon Base Styles
/// ===========================================================================
///
/// @group Ribbon
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////

// ============================================================================
// Imports
// ============================================================================

@use "../../body_molecules" as *;
@use "../../head_layout" as *;

@use "../../../variables" as *;
@use "../../soul_type" as *;
@use "../../body_atoms" as *;
@use "../../../dev" as *;

// ============================================================================
// Mixins
// ============================================================================

@mixin ribbon__menu {
    @include icon_bar--horizontal;
    @include justify--end;
    @include font--size("02");
    align-content: center;
    height: 100%;
    position: relative;
    // grid-area: ribbon_right; // corrected area name
}

@mixin ribbon__menu__item {
    @include flex--col;
    @include align--center;
    @include justify--center;
    height: 100%;
}

@mixin app_launcher_indicator {
    content: "";
    border-left: q(10) solid transparent;
    border-right: q(10) solid transparent;
    border-bottom: q(10) solid white;
    position: absolute;
    top: -q(8);
    left: 50%;
    margin-left: -q(4);
    z-index: 1;
}

.ribbon__menu {
    @include ribbon__menu;
}

.ribbon__menu__item {
    @include ribbon__menu__item;
}

.app-launcher::before {
    @include app_launcher_indicator;
}
// .ribbon_menu_button summary {
//     display: list-item !important;
// }
// ============================================================================

// Ribbon Menu
// .ribbon .ribbon__menu {
//     @include icon_bar_horizontal;
//     @include justify--end;
//     align-content: center;
//     @include font--size('02');
//     // @include color_scheme_dark;
//     height: 100%;
//     grid-area: ribbon--right;
//     .ribbon__menu__item {
//         @include flex--col;
//         @include align--center;
//         @include justify--center;
//         // @include color_scheme_dark;
//         height: 100%;
//         .ribbon__menu_button {
//             //@include icon--size(04)
//             // @include color_scheme_dark;
//             position: relative;
//             overflow: visible;
//             .i,
//             .i::before,
//             .i::before,
//             [class^='i_']::before,
//             [class*=' i_']::before {
//                 color: white !important;
//                 margin: 0;
//                 font-size: q(28);
//                 text-align: center;
//                 vertical-align: middle;
//                 display: inline-block;
//                 transform: translateX(-q(6));
//                 transform: translateY(-q(2));
//                 display: flex;
//                 justify-content: center;
//                 align-items: center;
//                 font-weight: bold;
//             }
//             svg {
//                 // @include color_scheme_dark;
//                 stroke-width: 0;
//             }
//         }
//     }
// }

// .app-launcher::before {
//     content: '';
//     border-left: q(10) solid transparent;
//     border-right: q(10) solid transparent;
//     border-bottom: q(10) solid white;
//     position: absolute;
//     top: -q(8);
//     left: 50%;
//     margin-left: -q(4);
//     z-index: 1;
// }

// ///
// /// Mixin for creating a basic icon bar.
// /// Sets up a grid display for icons with configurable gap, alignment, and justification.
// /// @group Icon Bar
// ///
// @mixin icon_bar {
//     display: grid;
//     gap: calc(q(16));
//     justify-items: center;
//     align-items: center;
// }

// ///
// /// Mixin for creating a horizontal icon bar.
// /// This arranges icons in a single row with a specified height and minimal column width.
// /// @group Icon Bar
// ///
// @mixin icon_bar--horizontal {
//     @include icon_bar;
//     grid-template-rows: baseline(4);
//     grid-auto-columns: min-content;
//     grid-auto-flow: column;
//     // Optional: customize the gap if needed
//     // gap: $ribbon_spacing;
// }

// ///
// /// Mixin for creating a vertical icon bar.
// /// This arranges icons in a single column with a specified width and minimal row height.
// /// @group Icon Bar
// ///
// @mixin icon_bar--vertical {
//     @include icon_bar;
//     grid-template-columns: baseline(4);
//     grid-auto-rows: min-content;
//     grid-auto-flow: row;
// }