////
///
/// Align Self Mixins
/// ===========================================================================
///
/// Flexbox align-self mixins for individual item cross-axis alignment.
///
/// @group Mixins.HeadLayout.Alignment
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Align Self (new naming)
// ============================================================================

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

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

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

/// Mixin for centering self in a flex container.
@mixin self--center {
    align-self: center;
}

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

/// Mixin for overriding alignment with auto.
@mixin self--auto {
    align-self: auto;
}

// ============================================================================
// Align Self (legacy naming for backward compatibility)
// ============================================================================

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

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

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

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

@mixin align_self--self_start {
    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;
}

/// Mixin for aligning a flex item at the end along the cross axis.
@mixin align_self--end {
    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;
}

/// 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;
}

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

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