// 888                                                                 888
// 888                                                                 888
// 888                                                                 888
// 888888 888  888 88888b.   .d88b.   .d88b.  888d888 8888b.  88888b.  88888b.  888  888
// 888    888  888 888 "88b d88""88b d88P"88b 888P"      "88b 888 "88b 888 "88b 888  888
// 888    888  888 888  888 888  888 888  888 888    .d888888 888  888 888  888 888  888
// Y88b.  Y88b 888 888 d88P Y88..88P Y88b 888 888    888  888 888 d88P 888  888 Y88b 888
//  "Y888  "Y88888 88888P"   "Y88P"   "Y88888 888    "Y888888 88888P"  888  888  "Y88888
//             888 888                    888                 888                    888
//        Y8b d88P 888               Y8b d88P                 888               Y8b d88P
//         "Y88P"  888                "Y88P"                  888                "Y88P"

// Typography
//
// These are utility classes that can be used to change font weight, size, alignment, etc.
//
// Styleguide Utilities.Typography

@each $family, $data in $font-family-files {
  @each $variant, $variant-data in $data {
    @include font-def(
      $family,
      $variant,
      map-get($variant-data, 'weight'),
      map-get($variant-data, 'style'),
      map-get($variant-data, 'stretch')
    );
  }
}

.max-line {
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    max-width: $max-line-length;
  }
}

// Weight
//
// These classes change the font weight, defined in [Tokens ➔ Typography](/tokens/typography).
//
// .black  - Use the black weight.
// .bold   - Use the bold weight.
// .unbold - Use the normal weight.
//
// Styleguide Utilities.Typography.Weight
//
// Weight: 1
.black {
  font-weight: $font-weight-black;
}

.bold {
  font-weight: $font-weight-bold;
}

.unbold {
  font-weight: $font-weight-normal !important;
}

.mono {
  font-family: $font-family-mono;
}

// Size
//
// These classes change the font size, defined in [Tokens ➔ Typography](/tokens/typography).
//
// .size-xxs    - Use the XXS size.
// .size-xs     - Use the XS size.
// .size-s      - Use the small size.
// .size-m      - Use the medium size.
// .size-l      - Use the large size.
// .size-xl     - Use the XL size.
// .size-xxl    - Use the XXL size.
// .size-xxxl   - Use the XXXL size.
// .size-xxxxl  - Use the XXXXL size.
//
// Styleguide Utilities.Typography.Size
//
// Weight: 2
.size-xxs {
  font-size: $font-size-xxs;
}

.size-xs {
  font-size: $font-size-xs;
}

.size-s {
  font-size: $font-size-s;
}

.size-m {
  font-size: $font-size-m;
}

.size-l {
  font-size: $font-size-l;
}

.size-xl {
  font-size: $font-size-xl;
}

.size-xxl {
  font-size: $font-size-xxl;
}

.size-xxxl {
  font-size: $font-size-xxxl;
}

.size-xxxxl {
  font-size: $font-size-xxxxl;
}

// Alignment
//
// These classes change the text alignment. Please note that these force the element to a block-level element.
//
// .text-left   - Left-align the element.
// .text-center - Center the element.
// .text-right  - Right-align the element.
//
// Styleguide Utilities.Typography.Alignment
//
// Weight: 3
.text-left {
  display: block;
  text-align: left !important;
}

.text-center {
  display: block;
  text-align: center !important;
}

.text-right {
  display: block;
  text-align: right !important;
}

// Various
//
// These classes change other typography settings.
//
// .italic    - Italicize the text.
// .uppercase - Display the text as all uppercase letters.
//
// Styleguide Utilities.Typography.Various
//
// Weight: 4
.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}