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

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

/// Sets both `gap` and `grid-gap` properties for a container.
/// @param {String | Number} $val - The gap size to be applied.
/// @example scss - Usage
///   @include gap(baseline(4));
@mixin gap($val) {
    gap: $val;
    grid-gap: $val;
}

/// Sets both `row-gap` and `grid-row-gap` for vertical spacing in grid or flex containers.
/// @param {String | Number} $val - The row gap size.
/// @example scss - Usage
///   @include gap--row(baseline(2));
@mixin gap--row($val) {
    row-gap: $val;
    grid-row-gap: $val;
}

/// Sets both `column-gap` and `grid-column-gap` for horizontal spacing in grid or flex containers.
/// @param {String | Number} $val - The column gap size.
/// @example scss - Usage
///   @include gap--col(baseline(3));
@mixin gap--col($val) {
    column-gap: $val;
    grid-column-gap: $val;
}

/// Generic mixin to set a gap-related CSS property dynamically.
/// @param {String} $property - The gap property (e.g., `gap`, `row-gap`, `column-gap`).
/// @param {String | Number} $val - The value to apply.
/// @example scss - Usage
///   @include gap_set('row-gap', baseline(2));
@mixin gap_set($property, $val) {
    #{$property}: $val;
}

// ============================================================================
// Utility Classes (Dynamic)
// ============================================================================

// @for $i from 1 through 12 {
//     .gap--0#{$i} {
//         @include gap(baseline($i));
//     }

//     .gap--row--#{$i} {
//         @include gap--row(baseline($i));
//     }

//     .gap--col--0#{$i} {
//         @include gap--col(baseline($i));
//     }
// }

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

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

// ============================================================================
// Layout | Gaps
// ============================================================================

// /// Mixin to set gap properties for different gap attributes.
// /// @param {String} $property - The gap property (e.g., gap, row-gap,
// /// column-gap).
// /// @param {String} $size - The size value for the gap.
// @mixin gap_set($property, $size) {
//     #{$property}: $size;
// }

// Generate utility classes for gaps
// @each $key, $value in $baseline_sizes {
//     .gap_#{$key} { @include gap_set(gap, $value); }
//     .gap--row--#{$key} { @include gap_set(row-gap, $value); }
//     .gap--col--#{$key} { @include gap_set(column-gap, $value); }
// }

// /// Mixin for setting gap properties.
// /// @param {String} $val - The gap size value.
// @mixin gap($val) {
//     gap: $val;
//     grid-gap: $val;
// }

// /// Mixin for setting row-gap properties.
// /// @param {String} $val - The row-gap size value.
// @mixin gap--row($val) {
//     row-gap: $val;
//     grid-row-gap: $val;
// }

// /// Mixin for setting column-gap properties.
// /// @param {String} $val - The column-gap size value.
// @mixin gap--col($val) {
//     column-gap: $val;
//     grid-column-gap: $val;
// }

// Note: The commented-out section below contains alternate implementations
// of gap utility classes using specific gap sizes.
// These are not currently active but could be adapted for different use cases.

// @mixin gap_01 {
//     @include gap(baseline(1));
// }
// @mixin gap_02 {
//     @include gap(baseline(2));
// }
// @mixin gap_03 {
//     @include gap(baseline(3));
// }
// @mixin gap_04 {
//     @include gap(baseline(4));
// }
// @mixin gap_05 {
//     @include gap(baseline(5));
// }
// @mixin gap_06 {
//     @include gap(baseline(6));
// }
// @mixin gap_07 {
//     @include gap(baseline(7));
// }
// @mixin gap_08 {
//     @include gap(baseline(8));
// }
// @mixin gap_09 {
//     @include gap(baseline(9));
// }
// @mixin gap_10 {
//     @include gap(baseline(10));
// }
// @mixin gap_11 {
//     @include gap(baseline(11));
// }
// @mixin gap_12 {
//     @include gap(baseline(12));
// }

// @mixin gap--row--1 {
//     @include gap--row(baseline(1));
// }
// @mixin gap--row--2 {
//     @include gap--row(baseline(2));
// }
// @mixin gap--row--3 {
//     @include gap--row(baseline(3));
// }
// @mixin gap--row--4 {
//     @include gap--row(baseline(4));
// }
// @mixin gap--row--5 {
//     @include gap--row(baseline(5));
// }
// @mixin gap--row--6 {
//     @include gap--row(baseline(6));
// }
// @mixin gap--row--7 {
//     @include gap--row(baseline(7));
// }
// @mixin gap--row--8 {
//     @include gap--row(baseline(8));
// }
// @mixin gap--row--9 {
//     @include gap--row(baseline(9));
// }
// @mixin gap--row--10 {
//     @include gap--row(baseline(10));
// }
// @mixin gap--row--11 {
//     @include gap--row(baseline(11));
// }
// @mixin gap--row--12 {
//     @include gap--row(baseline(12));
// }

// @mixin gap--col--01 {
//     @include gap--col(baseline(1));
// }
// @mixin gap--col--02 {
//     @include gap--col(baseline(2));
// }
// @mixin gap--col--03 {
//     @include gap--col(baseline(3));
// }
// @mixin gap--col--04 {
//     @include gap--col(baseline(4));
// }
// @mixin gap--col--05 {
//     @include gap--col(baseline(5));
// }
// @mixin gap--col--06 {
//     @include gap--col(baseline(6));
// }
// @mixin gap--col--07 {
//     @include gap--col(baseline(7));
// }
// @mixin gap--col--08 {
//     @include gap--col(baseline(8));
// }
// @mixin gap--col--09 {
//     @include gap--col(baseline(9));
// }
// @mixin gap--col--10 {
//     @include gap--col(baseline(10));
// }
// @mixin gap--col--11 {
//     @include gap--col(baseline(11));
// }
// @mixin gap--col--12 {
//     @include gap--col(baseline(12));
// }

// .gap_01 {
//     @include gap_01;
// }
// .gap_02 {
//     @include gap_02;
// }
// .gap_03 {
//     @include gap_03;
// }
// .gap_04 {
//     @include gap_04;
// }
// .gap_05 {
//     @include gap_05;
// }
// .gap_06 {
//     @include gap_06;
// }
// .gap_07 {
//     @include gap_07;
// }
// .gap_08 {
//     @include gap_08;
// }
// .gap_09 {
//     @include gap_09;
// }
// .gap_10 {
//     @include gap_10;
// }
// .gap_11 {
//     @include gap_11;
// }
// .gap_12 {
//     @include gap_12;
// }

// .gap--row--1 {
//     @include gap--row--1;
// }
// .gap--row--2 {
//     @include gap--row--2;
// }
// .gap--row--3 {
//     @include gap--row--3;
// }
// .gap--row--4 {
//     @include gap--row--4;
// }
// .gap--row--5 {
//     @include gap--row--5;
// }
// .gap--row--6 {
//     @include gap--row--6;
// }
// .gap--row--7 {
//     @include gap--row--7;
// }
// .gap--row--8 {
//     @include gap--row--8;
// }
// .gap--row--9 {
//     @include gap--row--9;
// }
// .gap--row--10 {
//     @include gap--row--10;
// }
// .gap--row--11 {
//     @include gap--row--11;
// }
// .gap--row--12 {
//     @include gap--row--12;
// }

// .gap--col--01 {
//     @include gap--col--01;
// }
// .gap--col--02 {
//     @include gap--col--02;
// }
// .gap--col--03 {
//     @include gap--col--03;
// }
// .gap--col--04 {
//     @include gap--col--04;
// }
// .gap--col--05 {
//     @include gap--col--05;
// }
// .gap--col--06 {
//     @include gap--col--06;
// }
// .gap--col--07 {
//     @include gap--col--07;
// }
// .gap--col--08 {
//     @include gap--col--08;
// }
// .gap--col--09 {
//     @include gap--col--09;
// }
// .gap--col--10 {
//     @include gap--col--10;
// }
// .gap--col--11 {
//     @include gap--col--11;
// }
// .gap--col--12 {
//     @include gap--col--12;
// }