@use "../global";

.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-nowrap { white-space: nowrap; }
.text-capitalize { text-transform: capitalize !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-underline { text-decoration: underline; }
.text-del { text-decoration: line-through; }
.text-reset { text-decoration: initial !important; }

.weight-l { font-weight: 300 !important; }
.weight-r { font-weight: 400 !important; }
.weight-m { font-weight: 500 !important; }
.weight-b { font-weight: 700 !important; }
.weight-bl { font-weight: 900 !important; }


@mixin variant ($name: null) {
    $prefix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }
    .#{$prefix}text-left { text-align: left !important; }
    .#{$prefix}text-center { text-align: center !important; }
    .#{$prefix}text-right { text-align: right !important; }
    .#{$prefix}text-columns { columns: 2; column-gap: var(--size-l); }
    .#{$prefix}leading-0 { line-height: var(--line-height-0); }
    .#{$prefix}leading-xs { line-height: var(--line-height-xs); }
    .#{$prefix}leading-s { line-height: var(--line-height-s); }
    .#{$prefix}leading-r { line-height: var(--line-height); }
    .#{$prefix}leading-m { line-height: var(--line-height-m); }
    .#{$prefix}leading-l { line-height: var(--line-height-l); }
}

@include variant;
@each $bpname, $bpsize in global.$breakpoints {
    @media #{$bpsize} {
        @include variant($bpname);
    }
}