@use "../abstracts/breakpoints" as bp;
@use "../abstracts/colors" as colors;

$breakpoints: bp.$breakpoints;
$colors: colors.$colors;

.text-start { text-align: start; }
.text-left  { text-align: left; }
.text-center { text-align: center; }
.text-end  { text-align: end; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase  { text-transform: uppercase; }
.text-lowercase  { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-none       { text-transform: none; }

.text-italic  { font-style: italic; }
.text-normal  { font-style: normal; }

.lh-default { line-height: var(--line-height); }
.lh-1   { line-height: var(--line-height-xs); }
.lh-2   { line-height: var(--line-height-sm); }
.lh-3   { line-height: var(--line-height-md); }
.lh-4   { line-height: var(--line-height-lg); }
.lh-5   { line-height: var(--line-height-xl); }
.lh-6   { line-height: var(--line-height-xxl); }
.lh-inherit { line-height: inherit; }
.lh-initial { line-height: initial; }

.ls-default { letter-spacing: var(--letter-spacing); }
.ls-1   { letter-spacing: var(--letter-spacing-xs); }
.ls-2   { letter-spacing: var(--letter-spacing-sm); }
.ls-3   { letter-spacing: var(--letter-spacing-md); }
.ls-4   { letter-spacing: var(--letter-spacing-lg); }
.ls-5   { letter-spacing: var(--letter-spacing-xl); }
.ls-6   { letter-spacing: var(--letter-spacing-xxl); }
.ls-inherit { letter-spacing: inherit; }
.ls-initial { letter-spacing: initial; }

.text-nowrap { white-space: nowrap; }
.text-wrap   { white-space: normal; }

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.text-break {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.text-underline     { text-decoration: underline; }
.text-line-through  { text-decoration: line-through; }
.text-no-decoration { text-decoration: none; }

.text-serif      { font-family: serif; }
.text-sans-serif { font-family: sans-serif; }
.text-mono       { font-family: monospace; }


.text-muted {color: var(--gray-500);}
.text-color-default {color: var(--text-color);}
.text-transparent {color: var(--color-transparent)}


@each $name, $value in $colors {
    .text-#{$name} {color: #{$value};}
    .text-on-#{$name} {color: var(--content-on-#{$name});}
    .text-hover-#{$name}:hover {color: #{$value};}
}

@each $bp, $size in $breakpoints {
    @media (min-width: #{$size}) {

        .text-start-#{$bp} { text-align: start; }
        .text-left-#{$bp}  { text-align: left; }
        .text-center-#{$bp} { text-align: center; }
        .text-end-#{$bp}  { text-align: end; }
        .text-right-#{$bp} { text-align: right; }
        .text-justify-#{$bp} { text-align: justify; }

        .lh-default-#{$bp} { line-height: var(--line-height); }
        .lh-1-#{$bp}   { line-height: var(--line-height-xs); }
        .lh-2-#{$bp}   { line-height: var(--line-height-sm); }
        .lh-3-#{$bp}   { line-height: var(--line-height-md); }
        .lh-4-#{$bp}   { line-height: var(--line-height-lg); }
        .lh-5-#{$bp}   { line-height: var(--line-height-xl); }
        .lh-6-#{$bp}   { line-height: var(--line-height-xxl); }
        .lh-inherit-#{$bp} { line-height: inherit; }
        .lh-initial-#{$bp} { line-height: initial; }

        .ls-default-#{$bp} { letter-spacing: var(--letter-spacing); }
        .ls-1-#{$bp}   { letter-spacing: var(--letter-spacing-xs); }
        .ls-2-#{$bp}   { letter-spacing: var(--letter-spacing-sm); }
        .ls-3-#{$bp}   { letter-spacing: var(--letter-spacing-md); }
        .ls-4-#{$bp}   { letter-spacing: var(--letter-spacing-lg); }
        .ls-5-#{$bp}   { letter-spacing: var(--letter-spacing-xl); }
        .ls-6-#{$bp}   { letter-spacing: var(--letter-spacing-xxl); }
        .ls-inherit-#{$bp} { letter-spacing: inherit; }
        .ls-initial-#{$bp} { letter-spacing: initial; }

        .text-nowrap-#{$bp} { white-space: nowrap; }
        .text-wrap-#{$bp}   { white-space: normal; }

        .text-truncate-#{$bp} {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .text-break-#{$bp} {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

    }
}