// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_globals" as *;

.markdown {
  font-family: "Chappe Proxima Nova Regular", sans-serif;

  * {
    &:first-child {
      margin-top: 0 !important;
    }

    &:last-child {
      margin-bottom: 0 !important;
    }
  }

  h1,
  h2,
  h3 {
    font-family: "Chappe Proxima Nova Bold", sans-serif;
  }

  h4,
  h5,
  h6 {
    font-family: "Chappe Proxima Nova Semibold", sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    a {
      font-family: inherit;
      color: inherit;
    }
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 20px;
    margin-bottom: 14px;
  }

  h3,
  h4,
  h5,
  h6 {
    color: var(--color-markdown-title-small-text);
  }

  h1,
  h2 {
    color: var(--color-black);
  }

  h1 {
    margin-top: 42px;
    margin-bottom: 20px;

    @include font-size(20px);
  }

  h2 {
    @include font-size(18px);
  }

  h3 {
    @include font-size(17.5px);
  }

  h4 {
    @include font-size(17px);
  }

  h5 {
    @include font-size(16.5px);
  }

  h6 {
    @include font-size(16px);
  }

  p,
  ul,
  ol,
  blockquote,
  .emphasis {
    line-height: 22px;

    @include font-size(14.5px);
  }

  p {
    margin-bottom: .9em;
  }

  a {
    color: var(--color-accent-base);

    &:hover {
      text-decoration: underline;
    }
  }

  hr {
    background-color: var(--color-grey-light);
    border: 0 none;
    height: 1px;
    margin: 28px auto 30px;
  }

  img {
    width: 100%;
    margin: 16px auto;
  }

  em {
    font-style: italic;
  }

  strong,
  a,
  table thead,
  figure figcaption,
  .embed .embed-caption {
    font-family: "Chappe Proxima Nova Semibold", sans-serif;
  }

  ul,
  ol {
    list-style-type: none;
    margin: 18px 0;

    li {
      line-height: 20px;
      margin-bottom: 8px;
      padding-left: 24px;
      position: relative;

      &:last-of-type {
        margin-bottom: 0;
      }

      ul,
      ol {
        &,
        &:first-child,
        &:last-child {
          margin-top: 12px !important;
          margin-bottom: 18px !important;
        }
      }

      ul {
        li {
          padding-left: 20px;

          &::before {
            background-color: var(--color-black);
            width: 4px;
            height: 4px;
            margin-top: 1px;
            border-radius: 0;
          }
        }
      }
    }
  }

  ul {
    li {
      &::before {
        content: "";
        background-color: var(--color-markdown-list-item-bullet);
        width: 7px;
        height: 7px;
        border-radius: 100%;
        position: absolute;
        top: 7px;
        left: 10px;
      }
    }
  }

  ol {
    counter-reset: list-counter;

    li {
      counter-increment: list-counter;

      &::before {
        content: counter(list-counter) ".";
        text-align: right;
        min-width: 19px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  figure,
  .embed {
    margin: 36px auto 32px;
  }

  figure figcaption,
  .embed .embed-caption {
    color: var(--color-markdown-figure-text);
    text-align: center;
    line-height: 18px;
    margin-top: 10px;
    display: block;

    @include font-size(14px);
  }

  figure {
    text-align: center;
    max-width: 70%;
    display: block;

    img {
      border: 1px solid var(--color-markdown-figure-border);
      width: auto;
      max-width: 100%;
      margin: 0 auto;
      display: block;
    }
  }

  code {
    font-family: "Chappe Hack Regular", sans-serif;
    font-size: .8em;
    background-color: var(--color-markdown-code-inline-background);
    border: 1px solid var(--color-markdown-code-inline-border);
    color: var(--color-markdown-code-inline-text);
    hyphens: auto;
    word-break: break-all;
    margin: 0 1px;
    padding: 2px 6px;
    display: inline;
    border-radius: 2px;
  }

  pre {
    margin: 22px auto;
    position: relative;

    &.copy {
      &[data-copy-state="copied"] {
        .code-clipboard {
          border-color: var(--color-markdown-code-block-clipboard-border-copied);

          &::after {
            background-color: var(--color-markdown-code-block-clipboard-icon-background-copied);
            width: 16px;
            height: 12px;

            @include mask-image-internal("common/markdown/code-clipboard-copied.svg");
          }
        }
      }

      &[data-copy-state="copied"],
      &:hover {
        .code-clipboard {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    .code-clipboard {
      $code-clipboard-size: 30px;

      background-color: var(--color-markdown-code-block-clipboard-background-default);
      border: 1px solid var(--color-markdown-code-block-clipboard-border-default);
      width: $code-clipboard-size;
      height: $code-clipboard-size;
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      top: 8px;
      right: 9px;
      transition: all linear 75ms;
      transition-property: background-color, border-color, opacity;
      border-radius: 5px;

      &:hover {
        background-color: var(--color-markdown-code-block-clipboard-background-hover);
        border-color: var(--color-markdown-code-block-clipboard-border-hover);
      }

      &:active {
        background-color: var(--color-markdown-code-block-clipboard-background-active);
        border-color: var(--color-markdown-code-block-clipboard-border-active);
      }

      &::after {
        content: "";
        background-color: var(--color-markdown-code-block-clipboard-icon-background-default);
        width: 13px;
        height: 15px;
        transition: background-color linear 75ms;

        @include mask-image-internal("common/markdown/code-clipboard-copy.svg");
      }
    }

    code {
      background-color: var(--color-markdown-code-block-background);
      border: 0 none;
      color: var(--color-markdown-code-block-text);
      line-height: 19px;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      overflow-wrap: normal;
      tab-size: 4;
      hyphens: none;
      margin: 0;
      padding: 15px 18px;
      overflow: auto hidden;
      display: block;
    }

    @include selection {
      background-color: var(--color-markdown-code-selection);
    }
  }

  table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    margin: 26px 0 34px;

    @include font-size(13px);

    thead {
      background-color: var(--color-markdown-table-head-background);
      color: var(--color-markdown-table-head-text);
      letter-spacing: .1px;
      user-select: none;
    }

    tbody {
      tr {
        &:hover {
          background-color: var(--color-markdown-table-body-row-background-hover);
        }
      }
    }

    th,
    td {
      border: 1px solid var(--color-markdown-table-cell-border);
      line-height: 18px;
      word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
      hyphens: auto;
      padding: 6px 10px 6px 16px;
    }
  }

  blockquote,
  .emphasis {
    $emphasis-margin-top-bottom-base: 26px;

    margin: $emphasis-margin-top-bottom-base 0;
    padding: 14px 20px 14px 28px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;

    & + blockquote,
    & + .emphasis {
      margin-top: ((-1 * $emphasis-margin-top-bottom-base) + 9px);
    }

    &::before {
      content: "";
      width: 4px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }
  }

  blockquote {
    background-color: var(--color-markdown-blockquote-background);
    color: var(--color-markdown-blockquote-text);
    font-style: italic;

    &::before {
      background-color: var(--color-markdown-blockquote-border);
    }
  }

  .emphasis {
    &.emphasis--warning {
      background-color: var(--color-markdown-emphasis-warning-background);

      &::before {
        background-color: var(--color-markdown-emphasis-warning-border);
      }
    }

    &.emphasis--info {
      background-color: var(--color-markdown-emphasis-info-background);

      &::before {
        background-color: var(--color-markdown-emphasis-info-border);
      }
    }

    &.emphasis--notice {
      background-color: var(--color-markdown-emphasis-notice-background);

      &::before {
        background-color: var(--color-markdown-emphasis-notice-border);
      }
    }
  }

  .embed {
    &[data-loaded="true"] {
      .embed-wrap {
        .embed-frame {
          opacity: 1;
          z-index: 2;
        }

        .embed-preview {
          opacity: 0;

          &::after {
            display: none;
          }
        }
      }
    }

    .embed-wrap {
      height: 420px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      position: relative;

      .embed-preview,
      .embed-frame,
      .embed-frame iframe {
        background-color: var(--color-markdown-embed-wrap-background);
      }

      .embed-preview,
      .embed-frame {
        width: 100%;
        height: 100%;
        transition: opacity ease-in-out 600ms;
      }

      .embed-preview {
        cursor: pointer;
        opacity: 1;
        position: relative;
        z-index: 1;

        @include background-image-fill($display: false);

        &:hover {
          &::after {
            opacity: 1;
          }
        }

        &:active {
          &::after {
            opacity: .95;
          }
        }

        &::after {
          $icon-size: 68px;

          content: "";
          width: $icon-size;
          height: $icon-size;
          position: absolute;
          top: 50%;
          left: 50%;
          opacity: .9;
          transition: opacity ease-in-out 300ms;
          transform: translate(-50%, -50%);

          @include background-image-internal-fill("common/markdown/embed-preview-play.svg");
        }
      }

      .embed-frame {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;

        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  sup {
    &:has([data-footnote-ref]) {
      display: inline-block;
      vertical-align: baseline;
      font-size: smaller;
      position: relative;
      top: -0.4em;
    }
  }
  
  .footnotes {
    ol {
      list-style: none;

      li {
        counter-increment: footnote-counter;

        &::before {
          content: counter(footnote-counter) ".";
          top: 1px;
        }
      }
    }
  }
}


// - Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-small-width-breakpoint) {
  .markdown {
    figure {
      max-width: 80%;
    }

    .embed {
      .embed-wrap {
        height: 380px;
      }
    }
  }
}

@media screen and (max-width: $screen-tiny-width-breakpoint) {
  .markdown {
    figure {
      max-width: none;
    }

    .embed {
      .embed-wrap {
        height: 280px;
      }
    }
  }
}