@use "../typography/config" as typographyConfig;
@use "../typography/mixins" as typographyMixins;
@use "../tools/layout" as *;
@use "../tools/text" as *;
@use "../tools/generate";
@use "../tokens/color";
@use "../tokens/base";
@use "../tokens/breakpoint";
@use "sass:map";

@layer utilities {
  strong,
  .bold {
    font-weight: 700 !important;
  }

  .normal {
    font-weight: 400 !important;
  }

  .thin {
    font-weight: 300 !important;
  }

  em,
  .italic {
    font-style: italic !important;
  }

  .underline {
    text-decoration: underline !important;
  }

  .no-underline {
    text-decoration: none !important;
  }

  .underline-hover {
    text-decoration: none !important;

    &:hover {
      text-decoration: underline !important;
    }
  }

  .no-accent {
    color: inherit !important;
    text-decoration: underline;
  }

  small,
  .small {
    @include generate.responsive-css-map(
      map.get(typographyConfig.$body-text, "small")
    );
  }

  .body-text-sm {
    @include generate.css-map(
      map.get(map.get(typographyConfig.$body-text, "default"), "default")
    );
  }

  .large {
    @include generate.responsive-css-map(
      map.get(typographyConfig.$body-text, "large")
    );
  }

  .text-nowrap {
    white-space: nowrap !important;
  }

  .text-wrap {
    white-space: normal !important;
  }

  .text-ellipsis {
    @include text-ellipsis;
  }

  .align-left {
    text-align: left !important;
  }
  .align-center {
    text-align: center !important;
  }
  .align-right {
    text-align: right !important;
  }

  @each $name, $width in breakpoint.$map {
    @if $name != "xs" {
      @include breakpoint.get($name) {
        .align-#{$name}-right {
          text-align: right !important;
        }
        .align-#{$name}-left {
          text-align: left !important;
        }
        .align-#{$name}-center {
          text-align: center !important;
        }
      }
    }
  }

  .reset-text-decoration {
    text-decoration: none !important;
  }

  .align-middle {
    vertical-align: middle !important;
  }
  .align-top {
    vertical-align: top !important;
  }
  .align-bottom {
    vertical-align: bottom !important;
  }
  .align-baseline {
    vertical-align: baseline !important;
  }

  @each $name, $width in breakpoint.$map {
    @if $name != "xs" {
      @include breakpoint.get($name) {
        .align-middle--#{$name} {
          vertical-align: middle !important;
        }
        .align-top--#{$name} {
          vertical-align: top !important;
        }
        .align-bottom--#{$name} {
          vertical-align: bottom !important;
        }
        .align-baseline--#{$name} {
          vertical-align: baseline !important;
        }
      }
    }
  }

  .reset-font-weight {
    font-weight: normal !important;
  }
  .reset-font-size {
    font-size: base.$font-size !important;
    line-height: base.$line-height !important;
  }

  .text-fullwidth {
    @include typographyMixins.text-fullwidth;
  }
  .text-readable {
    @include typographyMixins.text-readable;
  }
  .text-narrow {
    @include typographyMixins.text-narrow;
  }
  .text-relaxed {
    @include typographyMixins.text-relaxed;
  }
}