/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// This should only be used for .ouiText, therefore it's not included in a separate mixin file

@mixin ouiScaleText($baseFontSize) {
  $baseLineHeightMultiplier: $baseFontSize / 2;
  line-height: convertToRem($baseLineHeightMultiplier * 3);

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

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

  blockquote {
    padding:  convertToRem($baseFontSize * 1.5);
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 4));
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: convertToRem($baseLineHeightMultiplier * 1);
  }

  dd + dt {
    margin-top: convertToRem($baseLineHeightMultiplier * 2);
  }

  * + h2,
  * + h3,
  * + h4,
  * + h5,
  * + h6 {
    margin-top: convertToRem($baseLineHeightMultiplier * 4);
  }

  h1 {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 1));
    line-height: convertToRem($baseLineHeightMultiplier * 6);
  }

  h2 {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 2));
    line-height: convertToRem($baseLineHeightMultiplier * 5);
  }

  h3 {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 3));
    line-height: convertToRem($baseLineHeightMultiplier * 4);
  }

  h4,
  dt,
  .oui-definitionListReverse dd {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 5)); // skip level 4 on purpose
    line-height: convertToRem($baseLineHeightMultiplier * 3);
  }

  .oui-definitionListReverse dt {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 7));
    color: $ouiTextColor;
  }

  h5 {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 6));
    line-height: convertToRem($baseLineHeightMultiplier * 2);
  }

  h6 {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 7));
    line-height: convertToRem($baseLineHeightMultiplier * 2);
  }

  small {
    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 6));
  }

  pre {
    padding: $baseLineHeightMultiplier * 2;
  }

  code {
    // Setting the font size in rem's ensure it doesn't compound
    // the 90% set by ouiCodeBlock
    font-size: convertToRem($baseFontSize * .9);
  }
}

.ouiText {
  @include ouiText;
  @include ouiFontSize;
  // The ouiText mixin forces a color. Since ouiText 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;
  // OuiImage with floats are often used within OuiText.
  clear: both;

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

    &:hover,
    &:focus {
      color: darken($ouiLinkColor, 10%);
      text-decoration: underline;
    }

    &:focus {
      @include ouiFocusBackground($ouiLinkColor);
      @include ouiFocusRing;
    }
  }

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

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  blockquote {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    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: $ouiColorDarkShade;
    }

    &:before {
      top: 0;
    }

    &:after {
      bottom: 0;
    }
  }

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

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

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

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

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

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

  pre {
    white-space: pre-wrap;
    background: $ouiCodeBlockBackgroundColor;
    color: $ouiCodeBlockColor;
  }

  pre,
  pre code {
    display: block;
  }

  // unset font-size from ouiCodeBlock so it doesn't doubly add 90%

  code {
    @include ouiCodeFont;
    display: inline-block; // ensures background stretches the full line-height
    font-weight: $ouiFontWeightRegular;
  }

  @include ouiScaleText($ouiFontSize);

  &.ouiText--constrainedWidth {
    max-width: $ouiTextConstrainedMaxWidth;
    // 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,
  .ouiTextColor > :last-child {
    margin-bottom: 0 !important; // sass-lint:disable-line no-important
  }
}

.ouiText--small {
  @include fontSize($ouiFontSizeS);
  @include ouiScaleText($ouiFontSizeS);
}

.ouiText--extraSmall {
  @include fontSize($ouiFontSizeXS);
  @include ouiScaleText($ouiFontSizeXS);
}


/* OUI -> EUI Aliases */
@mixin euiScaleText($baseFontSize) { @include ouiScaleText($baseFontSize); }
/* End of Aliases */