@import 'uniform/mixins';

//----------------------------------------------------------------
//             Color
//----------------------------------------------------------------

@include color-rule('.text') using ($color){
    --text-opacity: 1.0;
    color: rgba($color, var(--text-opacity));
}
@include responsive-rule('.text-current') { color: currentColor; }
@include responsive-rule('.text-md') { font-size: 1rem; }
@include color-rule('.placeholder') using ($color){
    &::placeholder{
        --placeholder-opacity: 1.0;
        color: rgba($color, var(--placeholder-opacity));
    }
}



//----------------------------------------------------------------
//             Size
//----------------------------------------------------------------
@include size-rule('.text') using ($size) {font-size: $size;}


//----------------------------------------------------------------
//             Style
//----------------------------------------------------------------
@include responsive-rule('.text-mono') { font-family: monospace, monospace; }
@include responsive-rule('.text-uppercase') { text-transform: uppercase; }
@include responsive-rule('.text-lowercase') { text-transform: lowercase; }
@include responsive-rule('.text-capitalize') { text-transform: capitalize; }
@include responsive-rule('.text-normal-case') { text-transform: none; }
@include responsive-rule('.text-italic') { font-style: italic; }
@include pseudo-class-rule('text-underline') { text-decoration: underline; }
@include responsive-rule('.text-no-underline') { text-decoration: none; }
@include responsive-rule('.text-line-through') { text-decoration: line-through; }

@each $class, $weight in (
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
) {
    @include responsive-rule('.text-#{$weight}') { font-weight: $weight; }
    @include responsive-rule('.text-#{$class}') { font-weight: $weight; }
}

//----------------------------------------------------------------
//             Positioning
//----------------------------------------------------------------
@include responsive-rule('.text-left'){
    text-align: left;
}
@include responsive-rule('.text-right'){
    text-align: right;
}
@include responsive-rule('.text-center'){
    text-align: center;
}
@include responsive-rule('.text-justify'){
    text-align: justify;
}


//----------------------------------------------------------------
//             Leading
//----------------------------------------------------------------
@each $style, $height in (
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2
) {
    @include responsive-rule('leading-#{$style}') {
        line-height: $height;
    }
}

//----------------------------------------------------------------
//             Tracking
//----------------------------------------------------------------
@each $style, $height in (
tighter: -0.05em,
tight: -0.025em,
normal: 0,
wide: 0.025em,
wider: 0.05em,
widest: 0.1em
) {
    @include responsive-rule('tracking-#{$style}') {
        letter-spacing: $height;
    }
}

//----------------------------------------------------------------
//             Columns
//----------------------------------------------------------------

@include responsive-rule('.text-col-2'){
    column-count: 2;
    column-gap: 5em;
}
@include responsive-rule('.text-col-3'){
    column-count: 3;
    column-gap: 5em;
}


//----------------------------------------------------------------
//             Breaking
//----------------------------------------------------------------
.text-no-break{
    break-inside: avoid-column;
}
.text-break{
    word-break: break-all;
}
.text-nowrap,
.text-no-wrap{
    white-space: nowrap;
}
.text-overflow-hidden{
    text-overflow: ellipsis;
    overflow: hidden;
}

//----------------------------------------------------------------
//             Lists
//----------------------------------------------------------------
@include responsive-rule('text-list-none'){ list-style-type: none; }
@include responsive-rule('text-list-disc'){ list-style-type: disc; }
@include responsive-rule('text-list-decimal'){ list-style-type: decimal; }
@include responsive-rule('text-list-inside'){ list-style-position: inside; }
@include responsive-rule('text-list-outside'){ list-style-position: outside; }


//----------------------------------------------------------------
//             Select
//----------------------------------------------------------------
@each $type in (
none
text
all
auto
) {
    .select-#{$type}{
        user-select: $type;
    }
}