////
///
/// Frame
/// ===========================================================================
///
/// Full-viewport 3×3 layout grid.
///
/// Activate by applying `.ss-l-frame` to a wrapper element. Children opt
/// into one of the nine cells with `.ss-l-frame__area--<cell>` (e.g.
/// `top_left`, `middle_center`, `bottom_right`) or one of the six grouped
/// regions (`top`, `middle`, `bottom`, `left`, `center`, `right`).
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../01-core/prefix" as *;
@use "../01-core/external" as *;

@layer ss.layout {
    // ========================================================================
    // Root
    // ========================================================================

    .#{$ss-prefix-layout}-frame {
        box-sizing: border-box;
        display: grid;
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
        min-height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        overflow: hidden;
        gap: 0;
        margin: 0;
        padding: 0;

        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";
    }

    %ss-l-frame__area {
        box-sizing: border-box;
        display: grid;
        max-height: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    %ss-l-frame__area--flex {
        flex-shrink: 1;
        flex-grow: 1;
    }

    // Single cells (3×3)
    .#{$ss-prefix-layout}-frame__area--top_left {
        @extend %ss-l-frame__area;
        grid-area: top_left;
    }
    .#{$ss-prefix-layout}-frame__area--top_center {
        @extend %ss-l-frame__area;
        @extend %ss-l-frame__area--flex;
        grid-area: top_center;
    }
    .#{$ss-prefix-layout}-frame__area--top_right {
        @extend %ss-l-frame__area;
        grid-area: top_right;
    }
    .#{$ss-prefix-layout}-frame__area--middle_left {
        @extend %ss-l-frame__area;
        @extend %ss-l-frame__area--flex;
        grid-area: middle_left;
        height: 100%;
    }
    .#{$ss-prefix-layout}-frame__area--middle_center {
        @extend %ss-l-frame__area;
        @extend %ss-l-frame__area--flex;
        grid-area: middle_center;
        overflow: auto;
    }
    .#{$ss-prefix-layout}-frame__area--middle_right {
        @extend %ss-l-frame__area;
        @extend %ss-l-frame__area--flex;
        grid-area: middle_right;
    }
    .#{$ss-prefix-layout}-frame__area--bottom_left {
        @extend %ss-l-frame__area;
        grid-area: bottom_left;
    }
    .#{$ss-prefix-layout}-frame__area--bottom_center {
        @extend %ss-l-frame__area;
        @extend %ss-l-frame__area--flex;
        grid-area: bottom_center;
    }
    .#{$ss-prefix-layout}-frame__area--bottom_right {
        @extend %ss-l-frame__area;
        grid-area: bottom_right;
    }

    // Grouped regions
    .#{$ss-prefix-layout}-frame__area--top {
        @extend %ss-l-frame__area;
        grid-row-start: top_left;
        grid-column-start: top_left;
        grid-row-end: top_right;
        grid-column-end: top_right;
    }
    .#{$ss-prefix-layout}-frame__area--middle {
        @extend %ss-l-frame__area;
        grid-row-start: middle_left;
        grid-column-start: middle_left;
        grid-row-end: middle_right;
        grid-column-end: middle_right;
    }
    .#{$ss-prefix-layout}-frame__area--bottom {
        @extend %ss-l-frame__area;
        grid-row-start: bottom_left;
        grid-column-start: bottom_left;
        grid-row-end: bottom_right;
        grid-column-end: bottom_right;
    }
    .#{$ss-prefix-layout}-frame__area--left {
        @extend %ss-l-frame__area;
        grid-row-start: top_left;
        grid-column-start: top_left;
        grid-row-end: bottom_left;
        grid-column-end: bottom_left;
    }
    .#{$ss-prefix-layout}-frame__area--center {
        @extend %ss-l-frame__area;
        grid-row-start: top_center;
        grid-column-start: top_center;
        grid-row-end: bottom_center;
        grid-column-end: bottom_center;
    }
    .#{$ss-prefix-layout}-frame__area--right {
        @extend %ss-l-frame__area;
        grid-row-start: top_right;
        grid-column-start: top_right;
        grid-row-end: bottom_right;
        grid-column-end: bottom_right;
    }

    // Inner content slot — mirrors legacy `main_content`. Pair with
    // `.ss-c-rail` for scrolling.
    .#{$ss-prefix-layout}-main {
        box-sizing: border-box;
        max-width: 100%;
        min-height: 100%;
        padding: q(20);
    }
}