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

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

/// Layout | Inner Screen Grid
/// ---------------------------------------------------------------------------
/// Defines a full-page 3×3 layout with outer areas set to `auto`
/// and a scrollable center area (`middle_center`).
///
@mixin frame--inner--screen {
    height: 100%;
    width: 100%;

    display: grid;
    grid-auto-flow: row;
    gap: 0;

    //     @include sizing--border;

    overflow: hidden;
    // 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";

    pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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