////
///
/// 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 *;
@use "pkg:unit.gl" as *;
@use "../../soul_object" as *;

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

@mixin ribbon_panel {
    display: grid;
    gap: $ribbon_spacing * 1;
    justify-items: start;
    align-items: center;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    // Style
    // @include color_scheme_light;
    background-color: var(--color_fill_primary);
    border-radius: q(4);
    border: 0Q (24) solid var(--color_text_primary);
    color: var(--color_text_primary);
    box-shadow: calc(q(4)) calc($q * 0) calc(q(8)) calc($q * 0)
        rgba(0, 0, 0, 0.2);
    // Text
    font-size: q(12);
    word-wrap: break-word;
    background-clip: padding-box;
    list-style: none;
    // Position
    z-index: 9999;
    // z-index: z('modal');
    position: absolute;
    @include sizing--border;
    top: 100%;
    left: auto;
    right: 0;
    width: q(16) 0;
    margin-top: q(8);
    padding-bottom: $ribbon_spacing * 2;
    padding-top: $ribbon_spacing * 2;
    padding-left: 0;
}

.ribbon_panel {
    @include ribbon_panel;
    .ribbon_panel_header,
    .ribbon_panel_section,
    .ribbon_panel_section_header,
    .ribbon_panel_section_header .ribbon_panel_section_item {
        @include reset_bleed;
        @include font--size("03");
        width: 100%;
        padding-left: $menu_margin * 2;
        padding-right: $menu_margin * 2;
    }
    .ribbon_panel_line {
        @include reset_bleed;
        // @include color_scheme_light;
        border: q(1) solid var(--color_text_primary);
        opacity: 0.5;
    }

    .ribbon_panel_header {
        @include font--weight_500;
        text-align: center;
        svg {
            background-color: transparent !important;
        }
    }
    .ribbon_panel_section_header {
        @include font--weight_500;
    }
    .ribbon_panel_section {
        @include font--weight_300;
        display: grid;
        gap: $ribbon_spacing * 1;
        justify-items: start;
        align-items: center;
        grid-auto-rows: min-content;
        grid-auto-flow: row;
        .ribbon_panel_section_item {
            @include character--hyperlink--clean;
            @include sizing--border;
            list-style-type: none;
        }
        &.ribbon_panel_icon_grid {
            @include grid--size--col(5);
            .ribbon_launcher_item {
                .ribbon_launcher_item_icon svg {
                    background-color: transparent;
                }
            }
        }
    }

    ::before {
        content: "";
        border-left: q(4) solid transparent;
        border-right: q(4) solid transparent;
        border-bottom: q(4) solid white;
        position: absolute;
        top: -q(4);
        right: q(6);
        z-index: 9999;
    }
}

details[open] .ribbon_panel_wrapper {
    display: block;
    visibility: visible;
}