// stylelint-disable declaration-no-important
.mc-text {
  // Transformation
  &--uppercase {
    letter-spacing: 0.06em;
    text-transform: uppercase !important;
  }
  &--lowercase { text-transform: lowercase !important; }
  &--capitalize { text-transform: capitalize !important; }

  // Weight / opacity
  &--bold { font-weight: 500 !important; }
  &--italic { font-style: italic !important; }
  &--normal { font-weight: 400 !important; }
  &--light { font-weight: 300 !important; }

  // Treatments
  &--airy {
    font-weight: 400 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
  }

  &--1-line,
  &--1-line-max,
  &--2-lines,
  &--2-lines-max,
  &--3-lines,
  &--3-lines-max {
    // https://css-tricks.com/almanac/properties/l/line-clamp/
    display: block;
    /* stylelint-disable */
    display: -webkit-box;

    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;

    /* stylelint-enable */
    overflow: hidden;
  }

  &--1-line,
  &--1-line-max {
    // For single lines, reset back to just a block element
    // so the standard ellipsis overflow will work (ignore webkit box)
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;

    // Default body / anything not defined
    height: #{$mc-lh-md}em;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: #{$mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: #{$mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: #{$mc-lh-lg}em;
    }
  }

  &--1-line-max {
    height: auto;
    max-height: #{$mc-lh-md}em;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: auto;
      max-height: #{$mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: auto;
      max-height: #{$mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: auto;
      max-height: #{$mc-lh-lg}em;
    }
  }

  &--2-lines,
  &--2-lines-max {
    // Default body / anything not defined
    height: #{2 * $mc-lh-md}em;
    -webkit-line-clamp: 2;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: #{2 * $mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: #{2 * $mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: #{2 * $mc-lh-lg}em;
    }
  }

  &--2-lines-max {
    // Default body / anything not defined
    height: auto;
    max-height: #{2 * $mc-lh-md}em;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: auto;
      max-height: #{2 * $mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: auto;
      max-height: #{2 * $mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: auto;
      max-height: #{2 * $mc-lh-lg}em;
    }
  }

  &--3-lines,
  &--3-lines-max {
    // Default body / anything not defined
    height: #{3 * $mc-lh-md}em;
    -webkit-line-clamp: 3;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: #{3 * $mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: #{3 * $mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: #{3 * $mc-lh-lg}em;
    }
  }

  &--3-lines-max {
    // Default body / anything not defined
    height: auto;
    max-height: #{3 * $mc-lh-md}em;

    // Headings
    &[class^="mc-text-h"],
    [class^="mc-text-h"] & {
      height: auto;
      max-height: #{3 * $mc-lh-sm}em;
    }

    // Small text
    &.mc-text-small,
    .mc-text-small & {
      height: auto;
      max-height: #{3 * $mc-lh-sm}em;
    }

    // Large text
    &.mc-text-large,
    .mc-text-large & {
      height: auto;
      max-height: #{3 * $mc-lh-lg}em;
    }
  }

  // Colors
  &--error { color: $mc-color-error; }
  &--success { color: $mc-color-success; }
  &--highlight { color: $mc-color-highlight; }

  // Links
  &--link,
  &--link:hover,
  &--bare-link:hover,
  .mc-text--bare-link-parent:hover &--bare-link {
    text-decoration: underline;
    cursor: pointer;
  }

  // Misc
  &--monospace { font-family: monospace !important; }
  &--nowrap { white-space: nowrap; }
}

// Responsive
@each $breakpoint in map-keys($grid-breakpoints) {
  @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .mc-text#{$infix}--left   { text-align: left !important; }
    .mc-text#{$infix}--right  { text-align: right !important; }
    .mc-text#{$infix}--center { text-align: center !important; }
  }
}