@import "../themes/liberty.globals";
@import "../themes/liberty.mixins";

// Text Alignment
// --------------------------------------------------
// Creates text alignment attributes based on screen size

@each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
        // Provide `[text-{bp}]` attributes for aligning the text based
        // on the breakpoint
        .lu-text#{$infix}-center,
        [text#{$infix}-center] {
            text-align: center !important;
        }

        .lu-text#{$infix}-justify,
        [text#{$infix}-justify] {
            text-align: justify !important;
        }

        .lu-text#{$infix}-start,
        [text#{$infix}-start] {
            text-align: start !important;
        }

        .lu-text#{$infix}-end,
        [text#{$infix}-end] {
            text-align: end !important;
        }

        .lu-text#{$infix}-left,
        [text#{$infix}-left] {
            text-align: left !important;
        }

        .lu-text#{$infix}-right,
        [text#{$infix}-right] {
            text-align: right !important;
        }

        .lu-text#{$infix}-nowrap,
        [text#{$infix}-nowrap] {
            white-space: nowrap !important;
        }

        .lu-text#{$infix}-wrap,
        [text#{$infix}-wrap] {
            white-space: normal !important;
        }
    }
}