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

// ============================================================================
// Flex | Base
// ============================================================================

///
/// Mixin for applying basic flexbox properties to a container.
///
@mixin flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
}

.flex {
    @include flex;
}

// ============================================================================
// Flex | Direction
// ============================================================================

/// Mixin for setting the flex direction to column.
@mixin flex--col {
    @include flex;
    -webkit-flex-direction: column;
    -moz-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex--col {
    @include flex--col;
}

/// Mixin for setting the flex direction to column-reverse.
@mixin flex--col--reverse {
    @include flex;
    -webkit-flex-direction: column-reverse;
    -moz-box-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex--col--reverse {
    @include flex--col--reverse;
}

/// Mixin for setting the flex direction to row.
@mixin flex--row {
    @include flex;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex--row {
    @include flex--row;
}

/// Mixin for setting the flex direction to row-reverse.
@mixin flex--row--reverse {
    @include flex;
    -webkit-flex-direction: row-reverse;
    -moz-box-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex--row--reverse {
    @include flex--row--reverse;
}

// ============================================================================
// Flex | Wrap
// ============================================================================

/// Mixin for enabling flex-wrap.
@mixin flex--wrap {
    flex-wrap: wrap;
}
.flex--wrap {
    @include flex--wrap;
}

/// Mixin for enabling reverse flex-wrap.
@mixin flex--wrap--reverse {
    flex-wrap: wrap-reverse;
}
.flex--wrap--reverse {
    @include flex--wrap--reverse;
}

// ============================================================================
// Flex | Child Behavior
// ============================================================================

/// Mixin for setting the order of flex items.
/// @param {Number} $val - The order value.
@mixin flex--order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}

/// Mixin for adjusting the flex-grow, flex-shrink, and flex-basis properties.
/// @param {Number} $val - The value for the flex property.
@mixin flex--size($val) {
    -webkit-box-flex: $val;
    -moz-box-flex: $val;
    -webkit-flex: $val;
    -ms-flex: $val;
    flex: $val;
}

///
///  Mixin for setting the flex-basis property.
/// @param {String} $val - The value for the flex-basis property.
///
@mixin flex--basis($val) {
    flex-basis: $val;
}

/// Mixin for setting the flex-grow property.
/// @param {Number} $val - The value for the flex-grow property.
@mixin flex--grow($val) {
    flex-grow: $val;
}

/// Mixin for setting the flex-shrink property.
/// @param {Number} $val - The value for the flex-shrink property.
@mixin flex--shrink($val) {
    flex-shrink: $val;
}

/// Mixin for disabling flex-grow and flex-shrink, keeping the item fixed.
@mixin flex--keep {
    @include flex--grow(0); // do not grow   - initial value: 0
    @include flex--shrink(0); // do not shrink - initial value: 1
    // flex-grow: 0;     /* do not grow   - initial value: 0 */
    // flex-shrink: 0;   /* do not shrink - initial value: 1 */
}

// ============================================================================
// Flex | Align Self
// ============================================================================

// Keyword values
// ----------------------------------------------------------------------------

/// Mixin for aligning a flex item along the cross axis.
@mixin align_self--auto {
    align-self: auto;
}
.align_self--auto {
    @include align_self--auto;
}

@mixin align_self--normal {
    align-self: normal;
}
.align_self--normal {
    @include align_self--normal;
}

// Positional alignment
// ----------------------------------------------------------------------------

/// Mixin for centering a flex item along the cross axis.
@mixin align_self--center {
    align-self: center;
    align-self: anchor-center;
}
.align_self--center {
    @include align_self--center;
}

/// Mixin for aligning a  item at the start along the cross axis.
@mixin align_self--start {
    align-self: start;
}
.align_self--start {
    @include align_self--start;
}

@mixin align_self--self_start {
    align-self: self-start;
}
.align_self--self_start {
    @include align_self--self_start;
}

/// Mixin for aligning a flex item at the start along the cross axis.
@mixin align_self--flex_start {
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -ms-align-self: flex-start;
    -o-align-self: flex-start;
    align-self: flex-start;
}
.align_self--flex_start {
    @include align_self--flex_start;
}

/// Mixin for aligning a flex item at the end along the cross axis.
@mixin align_self--end {
    align-self: end;
}

.align_self--end {
    @include align_self--end;
}

/// Mixin for aligning a flex item at the end along the cross axis.
@mixin align_self--self_end {
    align-self: self-end;
}

.align_self--self_end {
    @include align_self--self_end;
}

/// Mixin for aligning a flex item at the end along the cross axis.
@mixin align_self--flex_end {
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -ms-align-self: flex-end;
    -o-align-self: flex-end;
    align-self: flex-end;
}

.align_self--end {
    @include align_self--flex_end;
}

/// Mixin for stretching a flex item along the cross axis.
@mixin align_self--stretch {
    align-self: stretch;
}
.align_self--stretch {
    @include align_self--stretch;
}

/// Mixin for aligning a flex item based on its baseline along the cross axis.
@mixin align_self--baseline {
    align-self: baseline;
}
.align_self--baseline {
    @include align_self--baseline;
}