@use "../soul_object" as *;
@use "../../dev" as *;
@use "../../variables" as *;
///
/// Base Frame Mixin
/// ---------------------------------------------------------------------------
/// Applies a foundational grid layout for full-height, single-axis flow containers.
/// Intended as the root setup for frames like `frame_main`, `frame_sidebar`, etc.
///
/// @group Layout
///
@mixin frame_base {
    @include reset_bleed;
    @include sizing--border;
    display: grid;
    grid-auto-flow: row;
    gap: 0;
    // Full  height and width
    // width: 100%;
    // height: 100%;
    // max-width: 100%;
    // max-height: 100%;
    // min-width: 100%;
    // min-height: 100%;

    // padding: 0;
    // margin: 0;

    // Ensures consistent box model across browsers
    // and prevents layout shifts due to padding or borders

    // Controls content overflow inside the frame
    overflow: hidden; // change to `auto` or `overlay` for scrollable frames
}

///
/// Frame | Area Utility
/// ---------------------------------------------------------------------------
/// Assigns a grid-area to a region.
/// @param {String} $name - The name of the grid area.
///
@mixin frame__area($name) {
    grid-area: $name;
    @include reset_bleed;
}

// ============================================================================
// Area Mixins: Per Region (Semantic Groupings)
// ============================================================================

@mixin frame__area--top {
    grid-row-start: top_left;
    grid-column-start: top_left;
    grid-row-end: top_right;
    grid-column-end: top_right;
}

@mixin frame__area--middle {
    grid-row-start: middle_left;
    grid-column-start: middle_left;
    grid-row-end: middle_right;
    grid-column-end: middle_right;
}

@mixin frame__area--bottom {
    grid-row-start: bottom_left;
    grid-column-start: bottom_left;
    grid-row-end: bottom_right;
    grid-column-end: bottom_right;
}

@mixin frame__area--left {
    grid-row-start: top_left;
    grid-column-start: top_left;
    grid-row-end: bottom_left;
    grid-column-end: bottom_left;
}

@mixin frame__area--center {
    grid-row-start: top_center;
    grid-column-start: top_center;
    grid-row-end: bottom_center;
    grid-column-end: bottom_center;
}

@mixin frame__area--right {
    grid-row-start: top_right;
    grid-column-start: top_right;
    grid-row-end: bottom_right;
    grid-column-end: bottom_right;
}