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

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

// ============================================================================
// Layout | Justify
// ============================================================================
@use "../../variables" as *;

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

// justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

/* Positional alignment */

/// Mixin to align items at the start.
/// Applies `justify-content: flex-start`.
// @mixin justify_start {
//     justify-content: flex-start;
// }

/// 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;
    // justify-content: 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;
    // -ms-flex-pack: start;
    justify-content: flex-start;
}

/// Mixin to align items at the end.
/// Applies `justify-content: flex-end`.
// @mixin justify_end {
//     justify-content: flex-end;
// }

/// 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;
    // justify-content: 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;
    // -ms-flex-pack: end;
    justify-content: flex-end;
}

// justify-content: left;       /* Pack items from the left */
// justify-content: right;      /* Pack items from the right */

/// Mixin to center items.
/// Applies `justify-content: center`.
// @mixin justify--center {
//     justify-content: center;
// }

/// Mixin to center items.
@mixin justify--center {
    -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;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */
@mixin justify_stretch {
    -webkit-justify-content: stretch;
    -moz-justify-content: stretch;
    -ms-justify-content: stretch;
    -o-justify-content: stretch;
    -webkit-box-pack: stretch;
    // -ms-flex-pack: justify;
    justify-content: stretch;
}

/* Normal alignment */
// justify-content: normal;

/* Distributed alignment */

/* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */

/// Mixin to distribute items evenly with the first item at the start and the last at the end.
/// Applies `justify-content: space-between`.
// @mixin justify_between {
//     justify-content: space-between;
// }

/// Mixin to distribute items evenly with the first item at the start and the last at the end.
@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;
}
/* Distribute items evenly
                                   Items have a half-size space
                                   on either end */

/// Mixin to distribute items evenly with half-size space on either end.
/// Applies `justify-content: space-around`.
// @mixin justify_around {
//     justify-content: space-around;
// }

/// Mixin to distribute items evenly with half-size space on either end.
@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;
    // -ms-flex-pack: justify;
    justify-content: space-around;
}
/* Distribute items evenly
Items have equal space around them */

/// Mixin to distribute items evenly with equal space around them.
/// Applies `justify-content: space-evenly`.
// @mixin justify_evenly {
//     justify-content: space-evenly;
// }

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

// Utility Classes using the Mixins
// ============================================================================

.justify_start {
    @include justify_start;
}
.justify_end {
    @include justify_end;
}
.justify--center {
    @include justify--center;
}
.justify_between {
    @include justify_between;
}
.justify_around {
    @include justify_around;
}
.justify_evenly {
    @include justify_evenly;
}

// /* Overflow alignment */
// justify-content: safe center;
// justify-content: unsafe center;

// /* Global values */
// justify-content: inherit;
// justify-content: initial;
// justify-content: revert;
// justify-content: revert-layer;
// justify-content: unset;