Text

// ---------------------------------------------------------- 
// Text
// ----------------------------------------------------------
// Font sizes
$font-size-xxs:       0.75rem !default;
$font-size-xs:        0.875rem !default;
$font-size-sm:        0.938rem !default;
$font-size-body:      1rem !default;
$font-size-lg:        1.063rem !default;
$font-size-xl:        1.125rem !default;
$font-size-xxl:       1.25rem !default;
$font-size-h1:        2.125rem !default;
$font-size-h2:        1.75rem !default;
$font-size-h3:        1.5rem !default;
$font-size-h4:        1.375rem !default;
$font-size-h5:        1.25rem !default;
$font-size-h6:        1.063rem !default;

// Font weights
$font-weight-normal:  normal !default;
$font-weight-bold:    bold !default;
$font-weight-100:     100 !default;
$font-weight-200:     200 !default;
$font-weight-300:     300 !default;
$font-weight-400:     400 !default;
$font-weight-500:     500 !default;
$font-weight-600:     600 !default;
$font-weight-700:     700 !default;
$font-weight-800:     800 !default;
$font-weight-900:     900 !default;

// Text alignment and wrap
$text-align-center:   center !default;
$text-align-left:     left !default;
$text-align-right:    right !default;
$text-wrap-balance:   balance !default;
$text-wrap-pretty:    pretty !default;

// Maps
$font-sizes: (
  "xxs": $font-size-xxs,
  "xs": $font-size-xs,
  "sm": $font-size-sm,
  "body": $font-size-body,
  "lg": $font-size-lg,
  "xl": $font-size-xl,
  "xxl": $font-size-xxl,
  "h1": $font-size-h1,
  "h2": $font-size-h2,
  "h3": $font-size-h3,
  "h4": $font-size-h4,
  "h5": $font-size-h5,
  "h6": $font-size-h6,
) !default;

$font-weights: (
  "normal": $font-weight-normal,
  "bold": $font-weight-bold,
  "100": $font-weight-100,
  "200": $font-weight-200,
  "300": $font-weight-300,
  "400": $font-weight-400,
  "500": $font-weight-500,
  "600": $font-weight-600,
  "700": $font-weight-700,
  "800": $font-weight-800,
  "900": $font-weight-900,
) !default;

$text-align: (
  "center": $text-align-center,
  "left": $text-align-left,
  "right": $text-align-right,
) !default;

$text-wrap: (
  "balance": $text-wrap-balance,
  "pretty": $text-wrap-pretty,
) !default;

// Mixins
@mixin font-sizes-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name} {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-css {
  @each $name, $value in $font-weights {
    .fw-#{$name} {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-css {
  @each $name, $value in $text-align {
    .text-#{$name} {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-css {
  @each $name, $value in $text-wrap {
    .text-#{$name} {
      text-wrap: #{$value};        
    }
  }
}

@mixin text-colors-css {
  .text-white {
    color: #fff;
  }
  
  .text-black {
    color: #000;
  }
}

@mixin text-variable-classes-css {
  .line-height {
    line-height: var(--lh);
  }
  
  .text-spacing {
    letter-spacing: var(--ls);
    word-spacing: var(--ws);
  }
  
  .font-variant {
    font-variant: var(--fv);
  }
  
  .text-transform {
    text-transform: var(--tt);
  }
}

@mixin text-css {
  @include font-sizes-css;
  @include font-weights-css;
  @include text-align-css;
  @include text-wrap-css;
  @include text-colors-css;
  @include text-variable-classes-css;
}

// Breakpoints (sizes, alignment and wrap utilities only)
// Extra large
@mixin font-sizes-xl-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xl {
      font-size: #{$value};        
    }
  }
}

@mixin text-align-xl-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xl {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xl-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xl {
      text-wrap: #{$value};        
    }
  }
}

// Large
@mixin font-sizes-lg-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-lg {
      font-size: #{$value};        
    }
  }
}

@mixin text-align-lg-css {
  @each $name, $value in $text-align {
    .text-#{$name}-lg {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-lg-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-lg {
      text-wrap: #{$value};        
    }
  }
}

// Medium
@mixin font-sizes-md-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-md {
      font-size: #{$value};        
    }
  }
}

@mixin text-align-md-css {
  @each $name, $value in $text-align {
    .text-#{$name}-md {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-lg-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-md {
      text-wrap: #{$value};        
    }
  }
}

// Small
@mixin font-sizes-sm-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-sm {
      font-size: #{$value};        
    }
  }
}

@mixin text-align-sm-css {
  @each $name, $value in $text-align {
    .text-#{$name}-sm {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-sm-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-sm {
      text-wrap: #{$value};        
    }
  }
}

// Extra small
@mixin font-sizes-xs-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xs {
      font-size: #{$value};        
    }
  }
}

@mixin text-align-xs-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xs {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xs-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xs {
      text-wrap: #{$value};        
    }
  }
}