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

    border: q(1) solid var(--color_text_primary);
    color: var(--color_text_primary);
    background: var(--color_fill_primary);

    // Text
    word-wrap: break-word;
    background-clip: padding-box;
    list-style: none;
    // Position
    z-index: 9999;
    z-index: z("modal");
    @include sizing--border;
    min-width: q(150);
    position: absolute;
    top: 100%;

    margin-top: $ribbon_spacing + q(1);
    padding: $ribbon_spacing * 2;
}

@mixin ribbon_panel--right {
    right: 0;
}

@mixin ribbon_panel--left {
    left: 0;
}

@mixin ribbon_panel--center {
    left: 50%;
    transform: translateX(-50%);
}

@mixin ribbon_panel_item_base {
    @include reset_bleed;
    @include font--size("03");
    width: 100%;
    padding-left: $menu_margin;
    padding-right: $menu_margin;
}

@mixin ribbon_panel_line {
    @include reset_bleed;
    // @include color_scheme_light;
    border: q(0.5) solid var(--color_text_primary);
}

@mixin ribbon_panel_header {
    @include ribbon_panel_item_base;
    @include font--weight_500;
    text-align: center;
    font-style: normal;
    svg {
        background-color: transparent !important;
        width: q(48);
        height: q(48);
    }
}

@mixin ribbon_panel_section_header {
    @include ribbon_panel_item_base;
    @include font--weight_500;
}

@mixin ribbon_panel_section {
    @include ribbon_panel_item_base;
    @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;
}

@mixin ribbon_panel_section_item {
    @include ribbon_panel_item_base;
    @include character--hyperlink--clean;
    @include sizing--border;
    list-style-type: none;
    padding: 0;
}

@mixin ribbon_panel_icon_grid {
    @include grid--size--col(5);
}

@mixin ribbon_launcher_item_icon {
    svg {
        background-color: transparent;
    }
}

@mixin details_base {
    position: relative;
}

@mixin details_open_summary {
    fill: var(--color_state_active) !important;
    color: var(--color_state_active) !important;

    ::before {
        color: var(--color_state_active) !important;
    }
}