@use "../../dev" as *;

@use "../head_layout" as *;
@use "frame_base" as *;
@use "../soul_object" as *;

/// frame | Screen Grid
/// ---------------------------------------------------------------------------
/// Defines a full-page 3×3 frame with outer areas set to `auto`
/// and a scrollable center area (`middle_center`).
///
@mixin frame_main {
    @include frame_base;

    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    @include sizing--border;
    overflow: hidden;

    // background: var(--color_fill_primary);

    // display: grid;
    // Outer columns and rows use 'auto' to grow to fit content,
    // center column and row use '1fr' to absorb remaining space
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        "top_left      top_center       top_right"
        "middle_left   middle_center    middle_right"
        "bottom_left   bottom_center    bottom_right";
}

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

@mixin frame_main__area--base {
    // Prevent growing beyond its container
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;

    // Reset box sizing for accurate layout calculation
    @include sizing--border;
}

@mixin frame_main__area--flex {
    // In flex or grid layouts, this avoids overflow pushing others
    flex-shrink: 1;
    flex-grow: 1;
}

@mixin frame_main__area--top_left {
    @include frame__area(top_left);
    @include frame_main__area--base;
    @include position--fixed(top, left);
}

@mixin frame_main__area--top_center {
    @include frame__area(top_center);
    @include frame_main__area--base;
    @include frame_main__area--flex;
    @include position--fixed(top, none);
}

@mixin frame_main__area--top_right {
    @include frame__area(top_right);
    @include frame_main__area--base;
    @include position--fixed(top, right);
}

@mixin frame_main__area--middle_left {
    @include frame__area(middle_left);
    @include frame_main__area--base;
    @include frame_main__area--flex;
    // @include position--fixed(none, left);
    height: 100%;
}

@mixin frame_main__area--middle_center {
    @include frame__area(middle_center);
    @include frame_main__area--base;
    @include frame_main__area--flex;
}

@mixin frame_main__area--middle_right {
    @include frame__area(middle_right);
    @include frame_main__area--base;
    @include frame_main__area--flex;
    // @include position--fixed(none, right);
}

@mixin frame_main__area--bottom_left {
    @include frame__area(bottom_left);
    @include frame_main__area--base;
    @include position--fixed(bottom, left);
}

@mixin frame_main__area--bottom_center {
    @include frame__area(bottom_center);
    @include frame_main__area--base;
    @include frame_main__area--flex;
    @include position--fixed(bottom, none);
}

@mixin frame_main__area--bottom_right {
    @include frame__area(bottom_right);
    @include frame_main__area--base;
    @include position--fixed(bottom, right);
}
// Group Utilities
@mixin frame_main__area--top {
    @include frame__area--top;
    @include frame_main__area--base;
    // @include position--fixed(top, both);
}

@mixin frame_main__area--middle {
    @include frame__area--middle;
    @include frame_main__area--base;
    // @include position--fixed(none, both);
}

@mixin frame_main__area--bottom {
    @include frame__area--bottom;
    @include frame_main__area--base;
    // @include position--fixed(bottom, both);
}

@mixin frame_main__area--left {
    @include frame__area--left;
    @include frame_main__area--base;
    // @include position--fixed(both, left);
}

@mixin frame_main__area--center {
    @include frame__area--center;
    @include frame_main__area--base;
    // @include position--fixed(both, none);
}

@mixin frame_main__area--right {
    @include frame__area--right;
    @include frame_main__area--base;
    // @include position--fixed(both, right);
}