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

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

@use "sass:map";

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

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

///
/// Base Ribbon Style
/// ---------------------------------------------------------------------------
///
/// Shared styles for all ribbons regardless of side.
/// This mixin sets up the grid layout, background, color, typography, and
/// layering.
///
@mixin ribbon_base {
    // Grid Display
    display: grid;
    gap: 0;

    // Layout
    @include sizing--border;
    padding-top: $ribbon_padding;
    padding-bottom: $ribbon_padding;
    padding-left: $ribbon_padding;
    padding-right: $ribbon_padding;

    // Interaction
    pointer-events: all;

    // Style
    background-color: $ribbon_background_color;
    color: $ribbon_text_color;
    &::before {
        color: $ribbon_text_color;
    }
    border-color: $ribbon_border_color;
    border-style: solid;

    // Typography
    font-size: basepoint(3);
    line-height: baseline(3);

    // Layering and boundary
    z-index: z("ribbon");

    // Ensure safe scroll context for dropdowns
    position: relative;

    // Reset all link styling for ribbon and children
    a {
        @include character--hyperlink--clean;

        &:link,
        &:visited,
        &:hover,
        &:active,
        &:focus {
            @include character--hyperlink--clean;
        }
    }
}

///
/// Inverted Ribbon Style
/// ---------------------------------------------------------------------------
///
/// This style is used for the inverted color scheme of the ribbon.
///
@mixin ribbon--inverted {
    // Inverted Ribbon Style
    background-color: $ribbon_background_color_inverted;
    color: $ribbon_text_color_inverted;
    &::before {
        color: $ribbon_text_color_inverted;
    }
    border-color: $ribbon_border_color_inverted;
    // border-style: solid;
}

// ============================================================================
// Ribbon | Horizontal (Top/Bottom)
// ============================================================================

///
/// Horizontal Ribbon (Top or Bottom)
/// ---------------------------------------------------------------------------
///
/// A layout container ribbon with fixed height and shadow, using CSS Grid.
/// Three columns: left, center, right
///
@mixin ribbon--horizontal {
    @include ribbon_base;

    // Grid Display
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: $ribbon_slot_width; // Explicitly one row
    grid-auto-rows: unset; // Prevent implicit row creation
    grid-auto-flow: column; // Prevent row-based auto-placement
    grid-template-areas: "ribbon_area--horizontal_left ribbon_area--horizontal_center ribbon_area--horizontal_right";
    align-items: center;
    align-content: center;

    // Layout
    width: 100%;
    height: $ribbon_height;
}

///
/// Top Ribbon
/// ---------------------------------------------------------------------------
///
/// A horizontal ribbon at the top of the screen.
///
@mixin ribbon--top {
    @include ribbon--horizontal;
    height: $ribbon_height_top;
    border-bottom-width: $ribbon_border_width;
}

///
/// Bottom Ribbon
/// ---------------------------------------------------------------------------
///
/// A horizontal ribbon at the bottom of the screen.
///
@mixin ribbon--bottom {
    @include ribbon--horizontal;
    height: $ribbon_height_bottom;
    border-top-width: $ribbon_border_width;
}

// ============================================================================
// Ribbon | Vertical (Left/Right)
// ============================================================================

///
/// Vertical Ribbon (Left or Right)
/// ---------------------------------------------------------------------------
///
/// A layout container ribbon with fixed width and shadow, using CSS Grid.
/// Three rows: top, center, bottom
///
@mixin ribbon--vertical {
    @include ribbon_base;

    // Grid Display
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: $ribbon_slot_width; // Explicitly one column
    grid-auto-columns: unset; // Prevent implicit column creation
    grid-auto-flow: row; // Prevent column-based auto-placement
    grid-template-areas:
        "ribbon_area--vertical_top"
        "ribbon_area--vertical_center"
        "ribbon_area--vertical_bottom";
    justify-items: center;

    // Layout
    height: 100%;
    width: $ribbon_width;
}

///
/// Left Ribbon
/// ---------------------------------------------------------------------------
///
/// A vertical ribbon on the left side of the screen.
///
@mixin ribbon--left {
    @include ribbon--vertical;
    width: $ribbon_width_left;
    border-right-width: $ribbon_border_width;
}

///
/// Right Ribbon
/// ---------------------------------------------------------------------------
///
/// A vertical ribbon on the right side of the screen.
///
@mixin ribbon--right {
    @include ribbon--vertical;
    width: $ribbon_width_right;
    border-left-width: $ribbon_border_width;
}