@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../functions/feature-flags" as fn-flags;

@mixin align-baseline {
    vertical-align: baseline;
}
@mixin align-top {
    vertical-align: top;
}
@mixin align-middle {
    vertical-align: middle;
}
@mixin align-bottom {
    vertical-align: bottom;
}

@if fn-flags.feature-enabled("alignments") {
    #{config-flags.$parent-selector} .align-baseline {
        @include align-baseline;
    }

    #{config-flags.$parent-selector} .align-top {
        @include align-top;
    }

    #{config-flags.$parent-selector} .align-middle {
        @include align-middle;
    }

    #{config-flags.$parent-selector} .align-bottom {
        @include align-bottom;
    }

    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: #{$width}) {
            #{config-flags.$parent-selector} .align-baseline\@#{$breakpoint} {
                @include align-baseline;
            }
            #{config-flags.$parent-selector} .align-top\@#{$breakpoint} {
                @include align-top;
            }
            #{config-flags.$parent-selector} .align-middle\@#{$breakpoint} {
                @include align-middle;
            }
            #{config-flags.$parent-selector} .align-bottom\@#{$breakpoint} {
                @include align-bottom;
            }
        }
    }
}