////
///
/// Grid Layout Mixins Module
/// ===========================================================================
///
/// @group Grid
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////

@use "sass:map";
@use "../../dev" as *;
@use "gap" as *;

// ============================================================================
// Config
// ============================================================================

$bleed: 2 * map.get($baseline, 4);
// $grid_width_min:   calc(100vw - $bleed);
// $grid_width_max:   calc($media_xl - $bleed);
$grid__columns_min: 6;
$grid__columns_max: 12;
$grid__columns_width: 1fr;
// $grid_item_width_half_min: calc($grid__columns_min / 2);
// $grid_item_width_half_max: calc($grid__columns_max / 2);

// ============================================================================
// Grid Layout | Parent Containers
// ============================================================================

/// Grid container with default spacing
@mixin grid--base {
    display: grid;
    position: relative;
}

/// Base mixin for inline grid layouts
@mixin grid--base--inline {
    display: inline-grid;
    position: relative;
    width: 100%;
}

// ============================================================================
// Grid Layout | Parent Containers
// ============================================================================

@mixin grid__layout($val) {
    @include grid--base;
    @include grid--size--col($val);
    @include gap(baseline(4));
}

@mixin grid__frame--clean($val) {
    @include grid--base;
    @include grid--size--col($val);
}

@mixin grid__frame--inline($val) {
    @include grid--base--inline;
    @include grid--size--col($val);
    @include gap(baseline(4));
}

/// Mixin for responsive flexible grid layout
/// Applies default layout, spacing, and dynamic column configuration
@mixin grid__frame--flex {
    @include grid--base;
    @include gap(baseline(4));

    grid-auto-rows: minmax(baseline(2.5), auto);

    @media (max-width: $media_xl) {
        @include grid--size--col($grid__columns_min);
    }

    @media (min-width: $media_xl) {
        @include grid--size--col($grid__columns_max);
    }
}

// ============================================================================
// Grid Flow
// ============================================================================

/// Mixin for grid flow row
@mixin grid__flow--row {
    grid-auto-flow: row;
}

/// Mixin for grid flow row dense
@mixin grid__flow--row--dense {
    grid-auto-flow: row dense;
}

/// Mixin for grid flow column
@mixin grid__flow--col {
    grid-auto-flow: column;
}

/// Mixin for grid flow column dense
@mixin grid__flow--col--dense {
    grid-auto-flow: column dense;
}

// ============================================================================
// Grid Span
// ============================================================================

// Grid Column Span
// ============================================================================

///
/// Mixin for grid column span at different breakpoints
/// @param {Number} $val - The number of columns to span
///
@mixin grid--span--col($val) {
    grid-column: span $val;
}

/// Mixin for small screen grid column span
/// @param {Number} $val - The number of columns to span on small screens
@mixin grid--span--col--sm($val) {
    @media (min-width: $media_sm) {
        grid-column: span $val;
    }
}

/// Mixin for medium screen grid column span
/// @param {Number} $val - The number of columns to span on medium screens
@mixin grid--span--col--md($val) {
    @media (min-width: $media_md) {
        grid-column: span $val;
    }
}

/// Mixin for large screen grid column span
/// @param {Number} $val - The number of columns to span on large screens
@mixin grid--span--col--lg($val) {
    @media (min-width: $media_lg) {
        grid-column: span $val;
    }
}

// Grid Row Span
// ============================================================================

///
/// Mixin for grid row span at different breakpoints
/// @param {Number} $val - The number of rows to span
///
@mixin grid--span--row($val) {
    grid-row: span $val;
}

/// Mixin for small screen grid row span
/// @param {Number} $val - The number of rows to span on small screens
@mixin grid--span--row--sm($val) {
    @media (min-width: $media_sm) {
        grid-row: span $val;
    }
}

/// Mixin for medium screen grid row span
/// @param {Number} $val - The number of rows to span on medium screens
@mixin grid--span--row--md($val) {
    @media (min-width: $media_md) {
        grid-row: span $val;
    }
}

/// Mixin for large screen grid row span
/// @param {Number} $val - The number of rows to span on large screens
@mixin grid--span--row--lg($val) {
    @media (min-width: $media_lg) {
        grid-row: span $val;
    }
}

// ============================================================================
// Grid Size
// ============================================================================

// Grid Column Size
// ============================================================================

/// Mixin to define a grid with a given number of columns
/// @param {Number} $val - The number of columns in the grid
@mixin grid--size--col($val) {
    // @include grid__layout;
    grid-template-columns: repeat($val, 1fr);
}

// Grid Row Size
// ============================================================================

/// Mixin to define a grid with a given number of rowumns
/// @param {Number} $val - The number of rowumns in the grid
@mixin grid--size--row($val) {
    // @include grid__layout;
    grid-template-rows: repeat($val, 1fr);
}

/// Mixin for auto grid rows
@mixin grid--size--row--auto {
    grid-template-rows: auto;
}