////
///
/// 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 "../../../dev" as *;
@use "../../../variables" as *;
@use "../../soul_object" as *;

// ============================================================================
// Maps
// ============================================================================

///
/// Ribbon Areas Map
/// ---------------------------------------------------------------------------
///
/// Grid template area names used in horizontal and vertical ribbons
///
$ribbon_areas: (
    horizontal_left: ribbon_area--horizontal_left,
    horizontal_center: ribbon_area--horizontal_center,
    horizontal_right: ribbon_area--horizontal_right,
    vertical_top: ribbon_area--vertical_top,
    vertical_center: ribbon_area--vertical_center,
    vertical_bottom: ribbon_area--vertical_bottom,
);

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

///
/// Ribbon Slot Base
/// Shared layout settings for ribbon slot containers.
///
// @mixin ribbon__slot--base($area, $h-align: center, $v-align: center) {
//     grid-area: #{$area};
//     justify-self: #{$h-align};
//     align-self: #{$v-align};
//     display: flex;
//     flex-direction: row;
//     gap: calc(q(2));
//     // align-content: center;
// }
// ============================================================================
// Ribbon Slot | Grid Behavior (Unified)
// ============================================================================

///
/// Base slot container with configurable layout
/// ---------------------------------------------------------------------------
///
/// @param {String} $flow - 'row' or 'column'
/// @param {Length} $gap - spacing between items (default: q(2))
/// @param {String} $justify - horizontal alignment (default: center)
/// @param {String} $align - vertical alignment (default: center)
///
@mixin ribbon__slot--base(
    $flow: row,
    $justify: center,
    $gap: calc(q(2)),
    $align: center
) {
    // Grid Display
    display: grid;
    justify-content: $justify;
    // justify-content: flex-end;

    gap: $gap;
    @include sizing--border;
    max-width: 100%;
    width: 100%;
    height: 100%;

    justify-items: $justify;

    align-items: $align;
    align-self: $align;

    white-space: nowrap;

    @if $flow == row {
        grid-auto-flow: column;
        grid-auto-columns: min-content;
        grid-template-rows: baseline(4); // optional tweak
        //     justify-self: #{$h-align};
        //     align-self: #{$v-align};
    } @else if $flow == column {
        flex-direction: row;
        grid-auto-flow: row;
        grid-auto-rows: min-content;
        grid-template-columns: baseline(4); // optional tweak
        // justify-self: start;
        // align-self: center;
    } @else {
        @error "Invalid flow `#{$flow}`. Use `row` or `column`.";
    }
}

// @mixin ribbon__slot--base($area, $align: center, $justify: center) {
//     grid-area: $area;
//     display: grid;
//     align-items: $align;
//     justify-items: $justify;
//     gap: calc(q(2));
//     position: relative;
//     overflow: hidden;
// }

@mixin ribbon__slot--horizontal {
    // display: flex;
    // align-items: center;
    // justify-content: center;

    flex-direction: column;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    grid-template-rows: baseline(4); // optional tweak

    // height: 100%;
    width: 100%;
    height: $ribbon_slot_width;
    min-height: $ribbon_slot_width;
    max-height: $ribbon_slot_width;
    // white-space: nowrap; // prevent text wrapping
    // overflow: hidden; // prevent spill
    // position: relative; // allow dropdowns
}

@mixin ribbon__slot--vertical {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    flex-direction: row;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    grid-template-columns: baseline(4); // optional tweak

    width: $ribbon_slot_width;
    min-width: $ribbon_slot_width;
    max-width: $ribbon_slot_width;
    height: 100%;
    // writing-mode: vertical-lr;
    // overflow: hidden;
    // position: relative;
}

// For horizontal ribbons (left, center, right)
@mixin ribbon__slot--horizontal_left {
    grid-area: map.get($ribbon_areas, horizontal_left);
    @include ribbon__slot--base($flow: row, $justify: start);
    @include ribbon__slot--horizontal;
}

@mixin ribbon__slot--horizontal_center {
    grid-area: map.get($ribbon_areas, horizontal_center);
    @include ribbon__slot--base($flow: row, $justify: center);
    @include ribbon__slot--horizontal;
}

@mixin ribbon__slot--horizontal_right {
    grid-area: map.get($ribbon_areas, horizontal_right);
    @include ribbon__slot--base($flow: row, $justify: end);
    @include ribbon__slot--horizontal;
}

// For vertical ribbons (top, center, bottom)
@mixin ribbon__slot--vertical_top {
    grid-area: map.get($ribbon_areas, vertical_top);
    @include ribbon__slot--base($flow: column, $align: start);
    @include ribbon__slot--vertical;
}

@mixin ribbon__slot--vertical_center {
    grid-area: map.get($ribbon_areas, vertical_center);
    @include ribbon__slot--base($flow: column, $align: center);
    @include ribbon__slot--vertical;
}

@mixin ribbon__slot--vertical_bottom {
    grid-area: map.get($ribbon_areas, vertical_bottom);
    @include ribbon__slot--base($flow: column, $align: end);
    @include ribbon__slot--vertical;
}