_text.scss

// This should only be used for .euiText, therefore it's not included in a separate mixin file
@mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
  @include fontSize($baseFontSize, $sizingMethod);

  $baseLineHeightMultiplier: $baseFontSize / 2;
  line-height: ($baseLineHeightMultiplier * 3) / $baseFontSize;

  p,
  ul,
  ol,
  dl,
  blockquote,
  img,
  pre {
    margin-bottom: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
  }

  ul,
  ol {
    margin-left: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
  }

  blockquote {
    font-size: fontSizeToRemOrEm($baseFontSize, $sizingMethod);
    padding:  marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
  }

  // headings
  $fontSizeH1: $baseFontSize * nth($euiTextScale, 1);
  $fontSizeH2: $baseFontSize * nth($euiTextScale, 2);
  $fontSizeH3: $baseFontSize * nth($euiTextScale, 3);
  $fontSizeH4: $baseFontSize * nth($euiTextScale, 5); // skip level 4 on purpose
  $fontSizeH5: $baseFontSize * nth($euiTextScale, 6);
  $fontSizeH6: $baseFontSize * nth($euiTextScale, 7);

  $headingMarginBottom: $baseLineHeightMultiplier * 1;
  $headingMarginTop: $baseLineHeightMultiplier * 4;

  h1 {
    font-size: fontSizeToRemOrEm($fontSizeH1, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 6) / $fontSizeH1;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH1, $sizingMethod);
  }

  h2 {
    font-size: fontSizeToRemOrEm($fontSizeH2, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 5) / $fontSizeH2;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH2, $sizingMethod);
  }

  h3 {
    font-size: fontSizeToRemOrEm($fontSizeH3, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 4) / $fontSizeH3;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH3, $sizingMethod);
  }

  h4 {
    font-size: fontSizeToRemOrEm($fontSizeH4, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 3) / $fontSizeH4;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH4, $sizingMethod);
  }

  h5 {
    font-size: fontSizeToRemOrEm($fontSizeH5, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 2) / $fontSizeH5;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH5, $sizingMethod);
  }

  h6 {
    font-size: fontSizeToRemOrEm($fontSizeH6, $sizingMethod);
    line-height: ($baseLineHeightMultiplier * 2) / $fontSizeH6;
    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH6, $sizingMethod);
  }

  * + h2 {
    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH2, $sizingMethod);
  }

  * + h3 {
    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH3, $sizingMethod);
  }

  * + h4 {
    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH4, $sizingMethod);
  }

  * + h5 {
    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH5, $sizingMethod);
  }

  * + h6 {
    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH6, $sizingMethod);
  }

  dd + dt {
    $marginTop: $baseLineHeightMultiplier * 2;

    margin-top: marginToRemOrEm($marginTop, $marginTop/$baseFontSize, $sizingMethod);
  }

  dt,
  .eui-definitionListReverse dd {
    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
    line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
  }

  .eui-definitionListReverse dt {
    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
    color: $euiTextColor;
  }

  small {
    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
  }

  pre {
    padding: fontSizeToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
  }

  code:not(.euiCode):not(.euiCodeBlock__code) {
    // Excluding EuiCode and EuiCodeBlock selectors to not compound the reduced font-size
    font-size: fontSizeToRemOrEm(($baseFontSize * .9), $sizingMethod);
  }

  // specific markdown format components that need to scale
  &.euiMarkdownFormat {
    .euiMarkdownFormat__blockquote {
      padding: 0 marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
      border-left-width:  marginToRemOrEm($baseLineHeightMultiplier / 2, $baseFontSize, $sizingMethod);
      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
    }

    .euiCheckbox + *:not(.euiCheckbox) {
      margin-top: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
    }

    .euiCheckbox__label {
      font-size: fontSizeToRemOrEm($baseFontSize, $sizingMethod);
      padding-left: marginToRemOrEm($baseLineHeightMultiplier * 3, $baseFontSize, $sizingMethod);
      line-height: $baseLineHeightMultiplier * 3 / $baseFontSize;
    }

    .euiCheckbox + *:not(.euiCheckbox) {
      margin-top: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
    }

    .euiMarkdownFormat__codeblockWrapper {
      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
    }

    .euiMarkdownFormat__table {
      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
    }

    .euiMarkdownFormat__table th,
    .euiMarkdownFormat__table td {
      padding: marginToRemOrEm($baseLineHeightMultiplier / 2, $baseFontSize, $sizingMethod) marginToRemOrEm($baseLineHeightMultiplier * 1, $baseFontSize, $sizingMethod);
    }
  }
}

.euiText {
  @include euiText;
  // The euiText mixin forces a color. Since euiText is usually a child
  // of other styling concerns, we should inherit their coloring. The default
  // coloring will likely coming from the reset.scss anyway.
  color: inherit;
  // EuiImage with floats are often used within EuiText.
  clear: both;

  // Style anchors that don't have a class. This prevents overwriting "buttons"
  // and other stylized elements passed in.
  a:not([class]) {
    @include euiLink;
  }

  img {
    display: block;
    width: 100%;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  blockquote:not(.euiMarkdownFormat__blockquote) {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, Times, Times New Roman, serif;
    font-style: italic;
    letter-spacing: normal;

    p:last-child {
      margin-bottom: 0;
    }

    &:before,
    &:after {
      position: absolute;
      content: '';
      height: 2px;
      width: 50%;
      right: 0;
      transform: translateX(-50%);
      background: $euiColorDarkShade;
    }

    &:before {
      top: 0;
    }

    &:after {
      bottom: 0;
    }
  }

  h1 {
    @include euiTitle('l');
  }

  h2 {
    @include euiTitle('m');
  }

  h3 {
    @include euiTitle('s');
  }

  h4,
  dt {
    @include euiTitle('xs');
  }

  h5 {
    @include euiTitle('xxs');
  }

  h6 {
    @include euiTitle('xxxs');
    text-transform: uppercase;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dt {
    color: inherit;
  }

  pre {
    white-space: pre-wrap;
    background: $euiCodeBlockBackgroundColor;
    color: $euiCodeBlockColor;
  }

  pre,
  pre code {
    display: block;
  }

  code {
    @include euiCodeFont;
  }

  &.euiText--constrainedWidth {
    max-width: $euiTextConstrainedMaxWidth;
    // If the max-width is way too short of the width of the container,
    // at least make it 2/3 of its parent
    min-width: 75%;
  }

  > :last-child,
  .euiTextColor > :last-child {
    margin-bottom: 0 !important; // sass-lint:disable-line no-important
  }
}

.euiText--medium {
  @include euiScaleText($euiFontSize, 'rem');
}

.euiText--small {
  @include euiScaleText($euiFontSizeS, 'rem');
}

.euiText--extraSmall {
  @include euiScaleText($euiFontSizeXS, 'rem');
}

.euiText--relative {
  @include euiScaleText($euiFontSize, 'em');
}