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

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

// ============================================================================
// Layout | Grid 3x3 Fullscreen Centered
// ============================================================================

/// Main full-screen frame with 3x3 grid
@mixin frame_login {
    @include frame_base;

    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: q(80) 1fr auto;
    grid-template-areas:
        "top_left      top_center       top_right"
        "middle_left   middle_center    middle_right"
        "bottom_left   bottom_center    bottom_right";

    width: 100%;
    height: 100%;

    overflow-y: scroll;

    scrollbar-width: none;

    // Optional: allow all children to be centered (if needed)
    > * {
        @include flex--col;
        @include align--center;
        @include justify--start;
    }
}

/// Just the middle_center area
@mixin frame_login__area {
    grid-area: middle_center;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}