////
///
/// Page Skeleton Mixins
/// ===========================================================================
///
/// Page-level skeleton patterns for common page structures.
///
/// @group Body Skeletons
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

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

// ============================================================================
// Mixins
// ============================================================================

/// Base page skeleton with header, main, and footer regions
/// @param {Length} $header-height [auto] - Height of the header region
/// @param {Length} $footer-height [auto] - Height of the footer region
@mixin page--base($header-height: auto, $footer-height: auto) {
    display: grid;
    grid-template-rows: $header-height 1fr $footer-height;
    grid-template-areas:
        "header"
        "main"
        "footer";
    min-height: 100vh;
    min-height: 100dvh;
}

/// Page skeleton with fixed header
@mixin page--fixed-header($header-height: q(64)) {
    @include page--base($header-height, auto);

    > header,
    > [role="banner"] {
        grid-area: header;
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

/// Page skeleton with sidebar
/// @param {Length} $sidebar-width [q(256)] - Width of the sidebar
/// @param {String} $sidebar-position [left] - Position of sidebar (left or right)
@mixin page--sidebar($sidebar-width: q(256), $sidebar-position: left) {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;

    @if $sidebar-position == left {
        grid-template-columns: $sidebar-width 1fr;
        grid-template-areas: "sidebar main";
    } @else {
        grid-template-columns: 1fr $sidebar-width;
        grid-template-areas: "main sidebar";
    }
}

/// Dashboard page skeleton with header, sidebar, and main content
/// @param {Length} $header-height [q(64)] - Height of header
/// @param {Length} $sidebar-width [q(256)] - Width of sidebar
@mixin page--dashboard($header-height: q(64), $sidebar-width: q(256)) {
    display: grid;
    grid-template-rows: $header-height 1fr;
    grid-template-columns: $sidebar-width 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    min-height: 100vh;
    min-height: 100dvh;
}

/// Full-screen page skeleton (e.g., for landing pages, hero sections)
@mixin page--fullscreen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/// Centered content page skeleton
/// @param {Length} $max-width [q(1200)] - Maximum width of content
@mixin page--centered($max-width: q(1200)) {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;

    > * {
        width: 100%;
        max-width: $max-width;
    }
}