////
///
/// Justify Content Mixins
/// ===========================================================================
///
/// Flexbox justify-content mixins for main-axis alignment.
///
/// @group Mixins.HeadLayout.Alignment
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

// ============================================================================
// Justify Content
// ============================================================================

/// Mixin to set `justify-content` property.
/// @param {String} $value - The value for `justify-content`.
@mixin justify($value) {
    justify-content: $value;
}

/// Mixin to align items at the start.
@mixin justify--start {
    -webkit-justify-content: start;
    -moz-justify-content: start;
    -ms-justify-content: start;
    -o-justify-content: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    -webkit-box-pack: flex-start;
    justify-content: flex-start;
}

/// Mixin to align items at the end.
@mixin justify--end {
    -webkit-justify-content: end;
    -moz-justify-content: end;
    -ms-justify-content: end;
    -o-justify-content: end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -o-justify-content: flex-end;
    -webkit-box-pack: flex-end;
    justify-content: flex-end;
}

/// Mixin to center items.
@mixin justify--center {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/// Mixin for justify-content: stretch
@mixin justify--stretch {
    -webkit-justify-content: stretch;
    -moz-justify-content: stretch;
    -ms-justify-content: stretch;
    -o-justify-content: stretch;
    -webkit-box-pack: stretch;
    justify-content: stretch;
}

/// Mixin to distribute items evenly with space between.
@mixin justify--between {
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    -webkit-box-pack: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/// Mixin to distribute items evenly with space around.
@mixin justify--around {
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    -webkit-box-pack: space-around;
    justify-content: space-around;
}

/// Mixin to distribute items evenly with equal space.
@mixin justify--evenly {
    -webkit-justify-content: space-evenly;
    -moz-justify-content: space-evenly;
    -ms-justify-content: space-evenly;
    -o-justify-content: space-evenly;
    justify-content: space-evenly;
}