$typography-condensed: em(640px);

@mixin when-typography-not-condensed {
  @include breakpoint-after($typography-condensed) {
    @content;
  }
}

@mixin when-typography-condensed {
  @include breakpoint-before($typography-condensed) {
    @content;
  }
}

@mixin text-style-caption {
  font-size: font-size(caption);
  font-weight: 400;
  line-height: line-height(caption);

  @include when-typography-not-condensed {
    font-size: font-size(caption, large-screen);
    line-height: line-height(caption, large-screen);
  }
}

@mixin text-style-heading {
  font-size: font-size(heading);
  font-weight: 600;
  line-height: line-height(heading);

  @include when-typography-not-condensed {
    font-size: font-size(heading, large-screen);
  }
}

@mixin text-style-subheading {
  font-size: font-size(subheading);
  font-weight: 700;
  line-height: line-height(subheading);
  text-transform: uppercase;

  @include when-typography-not-condensed {
    font-size: font-size(subheading, large-screen);
  }
}

@mixin text-style-input {
  font-size: font-size(input);
  font-weight: 400;
  line-height: line-height(input);

  text-transform: initial;
  letter-spacing: initial;

  @include when-typography-not-condensed {
    font-size: font-size(input, large-screen);
  }
}

@mixin text-style-body {
  font-size: font-size(body);
  font-weight: 400;
  line-height: line-height(body);

  text-transform: initial;
  letter-spacing: initial;

  @include when-typography-not-condensed {
    font-size: font-size(body, large-screen);
  }
}

@mixin text-style-button {
  font-size: font-size(button);
  font-weight: 400;
  line-height: line-height(button);

  text-transform: initial;
  letter-spacing: initial;

  @include when-typography-not-condensed {
    font-size: font-size(button, large-screen);
  }
}

@mixin text-style-button-large {
  font-size: font-size(button-large);
  font-weight: 400;
  line-height: line-height(button-large);

  text-transform: initial;
  letter-spacing: initial;

  @include when-typography-not-condensed {
    font-size: font-size(button-large, large-screen);
  }
}

@mixin text-style-display-x-large {
  font-size: font-size(display-x-large);
  font-weight: 600;
  line-height: line-height(display-x-large);

  @include when-typography-not-condensed {
    font-size: font-size(display-x-large, large-screen);
    line-height: line-height(display-x-large, large-screen);
  }
}

@mixin text-style-display-large {
  font-size: font-size(display-large);
  font-weight: 600;
  line-height: line-height(display-large);

  @include when-typography-not-condensed {
    font-size: font-size(display-large, large-screen);
    line-height: line-height(display-large, large-screen);
  }
}

@mixin text-style-display-medium {
  font-size: font-size(display-medium);
  font-weight: 400;
  line-height: line-height(display-medium);

  @include when-typography-not-condensed {
    font-size: font-size(display-medium, large-screen);
    line-height: line-height(display-medium, large-screen);
  }
}

@mixin text-style-display-small {
  font-size: font-size(display-small);
  font-weight: 400;
  line-height: line-height(display-small);

  @include when-typography-not-condensed {
    font-size: font-size(display-small, large-screen);
    line-height: line-height(display-small, large-screen);
  }
}

@mixin text-emphasis-placeholder() {
  color: color('ink', 'lightest');
}

@mixin text-emphasis-subdued($for-background: null) {
  color: color('ink', 'lighter', $for-background: $for-background);
}

@mixin text-emphasis-strong {
  font-weight: 600;
}

@mixin text-emphasis-normal($for-background: null) {
  font-weight: 400;
  color: color(ink, $for-background: $for-background);
}

@mixin text-breakword {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

@mixin truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin print-hidden {
  @media print {
    // stylelint-disable-next-line declaration-no-important
    display: none !important;
  }
}
