@use "sass:map";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;

@each $key, $value in $font-sizes {
  .font-size--#{$key} {
    font-size: #{$value} !important;
  }
}

@each $key, $value in $font-families {
  .font-family--#{$key} {
    font-family: #{$value} !important;
  }
}

@each $breakpoint in map.keys($breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @each $value in $text-aligns {
      .text-align-#{$infix}-#{$value} {
        text-align: #{$value} !important;
      }
    }

    @each $value in $text-transforms {
      .text-transform-#{$infix}-#{$value} {
        text-transform: #{$value} !important;
      }
    }

    @each $value in $text-wraps {
      .text-wrap-#{$infix}-#{$value} {
        white-space: #{$value} !important;
      }
    }

    @each $key, $value in $font-weights {
      .font-weight-#{$infix}-#{$key} {
        font-weight: #{$value} !important;
      }
    }

    @each $value in $font-styles {
      .font-style-#{$infix}-#{$value} {
        font-style: #{$value} !important;
      }
    }
  }
}

.text-wrap--truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

code {
  color: $pink !important;
  font-family: $font-family-monospace !important;
}