// X Alignment
@mixin center-align {
    text-align: center#{$important};
}
@mixin middle-align {
    vertical-align: middle#{$important};
}
@mixin align-left {
    text-align: left#{$important};
}
@mixin align-right {
    text-align: right#{$important};
}
@mixin align-center {
    text-align: center#{$important};
}

// Y Alignment
@mixin align-top {
    vertical-align: top#{$important};
}
@mixin align-middle {
    vertical-align: middle#{$important};
}
@mixin align-bottom {
    vertical-align: bottom#{$important};
}
@mixin align-baseline {
    vertical-align: baseline#{$important};
}

// Mixed Alignment
@mixin align-top-left {
    @include align-left;
    @include align-top;
}
@mixin align-top-center {
    @include align-center;
    @include align-top;
}
@mixin align-top-right {
    @include align-right;
    @include align-top;
}
@mixin align-middle-left {
    @include align-left;
    @include align-middle;
}
@mixin align-middle-center {
    @include align-center;
    @include align-middle;
}
@mixin align-middle-right {
    @include align-right;
    @include align-middle;
}
@mixin align-bottom-left {
    @include align-left;
    @include align-bottom;
}
@mixin align-bottom-center {
    @include align-center;
    @include align-bottom;
}
@mixin align-bottom-right {
    @include align-right;
    @include align-bottom;
}
@mixin align-baseline-left {
    @include align-left;
    @include align-baseline;
}
@mixin align-baseline-center {
    @include align-center;
    @include align-baseline;
}
@mixin align-baseline-right {
    @include align-right;
    @include align-baseline;
}