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

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

@use "sass:map";
@use "../../variables" as *;

// ============================================================================
// Layout | Align
// ============================================================================
// Provides utility classes and mixins for text alignment and flexbox
// alignment.

/// Mixin for stretching items in a flex container.
@mixin align--stretch {
    align-items: stretch;
}

/// Mixin for aligning items to the start of a flex container.
@mixin align--start {
    align-items: flex-start;
}

/// Mixin for aligning items to the end of a flex container.
@mixin align--end {
    align-items: flex-end;
}

/// Mixin for centering items in a flex container.
@mixin align--center {
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/// Mixin for aligning items to the baseline of a flex container.
@mixin align--baseline {
    align-items: baseline;
}

// Utility classes for flexbox alignment
/// Utility class for stretching items in a flex container.
.align--stretch {
    @include align--stretch;
}

/// Utility class for aligning items to the start of a flex container.
.align--start {
    @include align--start;
}

/// Utility class for aligning items to the end of a flex container.
.align--end {
    @include align--end;
}

/// Utility class for centering items in a flex container.
.align--center {
    @include align--center;
}

/// Utility class for aligning items to the baseline of a flex container.
.align--baseline {
    @include align--baseline;
}

// .container {
//   align-content: start | end | center | stretch | space-around | space-between | space-evenly;
// }

// Values:

// start – aligns the grid to be flush with the start edge of the grid container
// end – aligns the grid to be flush with the end edge of the grid container
// center – aligns the grid in the center of the grid container
// stretch – resizes the grid items to allow the grid to fill the full height of the grid container
// space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
// space-between – places an even amount of space between each grid item, with no space at the far ends
// space-evenly – places an even amount of space between each grid item, including the far ends