/*!
 * 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.
 */

// Default styles for Markdown Format
// 1. Headings
// 2. Images
// 3. Blockquotes
// 4. Horizontal rules
// 5. Lists
// 6. Tables
// 7. Code

// The Markdown Format uses by default a few OUI components
// to render elements: OuiLink and OuiCode.

$browserDefaultFontSize: 16px;

// We're setting a function o transform px in em
// because it's easier to think in px
@function em($pixels, $context: $browserDefaultFontSize) {
  @return #{calc($pixels/$context)}em;
}

.ouiMarkdownFormat {
  @include ouiFont;
  @include ouiText;

  // We're using `em` values to support apps where consumers might adjust sizes
  // and consequently the markdown needs to adjust to these changes

  // Font size variables
  $ouiMarkdownFontSizeXS: em(12px);
  $ouiMarkdownFontSizeS: em(14px);
  $ouiMarkdownFontSize: em(16px);
  $ouiMarkdownFontSizeM:  em(18px);
  $ouiMarkdownFontSizeL: em(20px);
  $ouiMarkdownFontSizeXL: em(28px);
  $ouiMarkdownFontSizeXXL: em(36px);

  // Spacing variables
  $ouiMarkdownSizeXXS: em(4px);
  $ouiMarkdownSizeXS: em(8px);
  $ouiMarkdownSizeS: em(12px);
  $ouiMarkdownSize: em(16px);
  $ouiMarkdownSizeL: em(24px);

  // We're using alpha values to support apps that
  // display markdown on backgrounds of various colors

  // Grayscale variables
  $ouiMarkdownAlphaLightestShade: rgba($ouiColorFullShade, .05);
  $ouiMarkdownAlphaLightShade: rgba($ouiColorFullShade, .15);
  $ouiMarkdownAlphaDarkShade: rgba($ouiColorFullShade, .65);

  // Reverse grayscale for opposite of theme
  $ouiMarkdownAlphaLightestShadeReversed: rgba($ouiColorEmptyShade, .05);
  $ouiMarkdownAlphaLightShadeReversed: rgba($ouiColorEmptyShade, .15);
  $ouiMarkdownAlphaDarkShadeReversed: rgba($ouiColorEmptyShade, .65);

  &--reversed {
    color: $ouiColorLightestShade;
  }

  > div > *:first-child {
    // sass-lint:disable-block no-important
    margin-top: 0 !important;
  }

  > div > * {
    margin-top: 0;
    margin-bottom: $ouiMarkdownSize;
  }

  > div > *:last-child,
  .ouiCheckbox {
    // sass-lint:disable-block no-important
    margin-bottom: 0 !important;
  }

  .ouiCheckbox + *:not(.ouiCheckbox) {
    margin-top: $ouiMarkdownSize;
  }

  p,
  blockquote,
  ul,
  ol,
  dl,
  pre,
  table {
    margin-top: 0;
    margin-bottom: $ouiMarkdownSize;
    line-height: 1.5em;
  }

  strong {
    font-weight: 600;
  }

  // 2. Headings
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: $ouiMarkdownSizeXS;
  }

  h1 {
    font-size: $ouiMarkdownFontSizeXXL;
    line-height: 1.333333em;
    font-weight: 300;
  }

  h2 {
    font-size: $ouiMarkdownFontSizeXL;
    line-height: 1.428571em;
    font-weight: 300;
  }

  h3 {
    font-size: $ouiMarkdownFontSizeL;
    line-height: 1.6em;
    font-weight: 600;
  }

  h4 {
    font-size: $ouiMarkdownSize;
    line-height: 1.5em;
    font-weight: 600;
  }

  h5 {
    font-size: $ouiMarkdownFontSizeS;
    line-height: 1.142857em;
    font-weight: 700;
  }

  h6 {
    font-size: $ouiMarkdownFontSizeXS;
    line-height: 1.333333em;
    font-weight: 700;
    text-transform: uppercase;
  }

  // 3. Images
  img {
    max-width: 100%;
    box-sizing: content-box;
    border-style: none;
  }

  // 4. Blockquotes
  blockquote {
    padding: 0 1em;
    border-left: $ouiMarkdownSizeXXS solid $ouiMarkdownAlphaLightShade;
  }

  &--reversed blockquote {
    border-left-color: $ouiMarkdownAlphaLightShadeReversed;
  }

  // 5. Horizontal rules
  hr {
    border: none;
    height: 1px;
    background-color: $ouiMarkdownAlphaLightShade;
    margin: $ouiMarkdownSizeL 0;
  }

  hr::before {
    display: table;
    content: '';
  }

  hr::after {
    display: table;
    clear: both;
    content: '';
  }

  // 6. Lists
  ul,
  ol {
    padding-left: $ouiMarkdownSizeL;
    margin-top: 0;
    margin-bottom: $ouiMarkdownSize;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  ul ul {
    list-style-type: circle;
  }

  ol ol,
  ul ol {
    list-style-type: lower-roman;
  }

  ul ul ol,
  ul ol ol,
  ol ul ol,
  ol ol ol {
    list-style-type: lower-alpha;
  }

  dd {
    margin-left: 0;
  }

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li > p {
    margin-bottom: $ouiMarkdownSizeXS;
  }

  li + li {
    margin-top: $ouiMarkdownSizeXXS;
  }

  .task-list-item {
    list-style-type: none;
  }

  .task-list-item + .task-list-item {
    margin-top: $ouiMarkdownSizeXXS;
  }

  .task-list-item input {
    margin: 0 .2em .25em -1.6em;
    vertical-align: middle;
  }

  // 7. Tables
  table {
    display: block;
    width: 100%;
    overflow: auto;
    border-left: 1px solid $ouiMarkdownAlphaLightShade;
    border-spacing: 0;
    border-collapse: collapse;
  }

  td,
  th {
    padding: 0;
  }

  table th,
  table td {
    padding: $ouiMarkdownSizeXXS $ouiMarkdownSizeXS;
    border-top: 1px solid $ouiMarkdownAlphaLightShade;
    border-bottom: 1px solid $ouiMarkdownAlphaLightShade;

    &:last-child {
      border-right: 1px solid $ouiMarkdownAlphaLightShade;
    }
  }

  table tr {
    background-color: transparent;
    border-top: 1px solid $ouiMarkdownAlphaLightShade;
  }
}