@import "../00_Abstracts/index";

$breakpoints: (xl, lg, md, sm, xs, xxs, print);

.text {

    // Sizes
    @each $key,
    $value in $font-sizes {
        &-#{$key} {
            @include font-size($key, true);
        }
    }

    // Decoration

    &-normal {
        font-weight: normal !important;
        text-decoration: none !important;
        font-style: normal !important;
    }

    &-lighter {
        font-weight: lighter !important;
    }

    &-light {
        font-weight: 300 !important;
    }

    &-bold {
        font-weight: bold !important;
    }

    &-bolder {
        font-weight: bold !important;
    }

    &-italic {
        font-style: italic !important;
    }

    &-underline {
        text-decoration: underline !important;
    }

    &-decoration-none {
        text-decoration: none !important;
    }

    // Alignment

    &-left {
        text-align: left !important;
    }

    &-right {
        text-align: right !important;
    }

    &-center {
        text-align: center !important;
    }

    // Transforms

    &-uppercase {
        text-transform: uppercase !important;
    }

    &-lowercase {
        text-transform: lowercase !important;
    }

    &-capitalize {
        text-transform: capitalize !important;
    }

    // Font-Family

    @each $key, $value in $fonts {
        &-#{$key} {
            @include font($key, true);
        }
    }
}

// Responsive sizes

@each $mq,
$value in $breakpoints {
    @each $key,
    $value in $font-sizes {

        /*
         *  sm:text-md
         *  xl:text-xl
         */
        .#{$mq}\:text-#{$key} {
            @include mq($mq) {
                @include font-size($key, true);
            }
        }
    }
}

// Hover styles 

.hover\:text {
    &-normal:hover {
        font-weight: normal !important;
    }

    &-lighter:hover {
        font-weight: lighter !important;
    }

    &-light:hover {
        font-weight: 300 !important;
    }

    &-bold:hover {
        font-weight: bold !important;
    }

    &-bolder:hover {
        font-weight: bold !important;
    }

    &-italic:hover {
        font-style: italic !important;
    }

    &-underline:hover {
        text-decoration: underline !important;
    }

    &-decoration-none:hover {
        text-decoration: none !important;
    }
}