/**
 * Copyright © 2016-2025 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:host {
  .tb-markdown-view {
    display: block;

    $headings: h1, h2, h3, h4, h5, h6;

    h1 {
      font-size: 32px;
      padding-right: 60px;
    }

    @each $heading in $headings {
      #{$heading} {
        color: #0F161D;
        line-height: normal;
        font-weight: 500;
        border-bottom: none;
        margin: 0;
      }
      & > #{$heading} {
        padding: 30px 32px 10px;
      }
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.25em;
      margin: 0;
    }

    p + p {
      margin-top: 10px;
    }

    p, div {
      color: rgba(15, 22, 29, 0.8);
      line-height: 1.5em;
    }

    & > p, & > div {
      padding-right: 32px;
      padding-left: 32px;
    }

    ul {
      padding-left: 62px;
      padding-right: 32px;
      color: rgba(15, 22, 29, 0.8);
      margin-top: 16px;
      margin-bottom: 16px;
    }

    ul {
      @each $heading in $headings {
        & + #{$heading} {
          padding-top: 14px;
        }
      }
    }

    li {
      padding-bottom: .75em;
      line-height: 1.5em;

      ul {
        margin-bottom: 0;
      }

      p {
        padding-left: 0;
      }
    }

    a {
      font-weight: 500;
      color: #2a7dec;
      text-decoration: none;
      border: none;

      &:hover {
        color: #2a7dec;
        text-decoration: underline;
        border: none;
      }
    }

    & > table {
      margin-left: 32px;
      width: calc(100% - 64px);
      border: 1px solid rgba(42, 125, 236, .2);
      border-radius: 4px;
      border-collapse: unset;
      border-spacing: 0;
      margin-top: 30px;
      margin-bottom: 30px;
      overflow: hidden;
      table-layout: fixed;

      &.auto {
        table-layout: auto;
      }

      & > thead {
        background-color: #f9fbff;
        color: rgba(33, 37, 41, .6);

        & > tr {
          & > th {
            border-bottom: 1px solid rgba(42, 125, 236, .2);
            font-size: 16px;
            padding: 12px 16px;
            text-align: left;
            margin: 0;
            @media screen and (max-width: 400px) {
              font-size: 12px;
              padding: 12px 4px;
              code:not([class*=language-]) {
                font-size: 12px;
              }
            }
          }
        }
      }

      & > tbody {
        & > tr:not(:last-child) {
          & > td {
            border-bottom: 1px solid rgba(42, 125, 236, .2);
          }
        }

        & > tr {
          & > td {
            font-size: 16px;
            padding: 12px 16px;
            text-align: left;
            margin: 0;
            color: rgba(15, 22, 29, 0.8);
            @media screen and (max-width: 400px) {
              font-size: 12px;
              padding: 12px 4px;
              code:not([class*=language-]) {
                font-size: 12px;
              }
            }
          }
        }
      }

      th, td {
        font-size: .85em;
        padding: 8px;
        margin: 0;
        text-align: left;
      }

      td[align=center], th[align=center] {
        text-align: center;
      }

      td[align=right], th[align=right] {
        text-align: right;
      }

      tr td div {
        padding-left: 0;
        padding-right: 0;
      }
    }


    div.divider {
      padding-top: 32px;
      border-bottom: 1px solid rgba(15, 22, 29, 0.1);
    }

    ul + div.divider {
      padding-top: 16px;
    }

    img {
      max-width: 100%;
    }

    button.tb-button {
      cursor: pointer;
      display: inline-block;
      border-radius: 4px;
      border: none;
      padding: 10px 20px;
      line-height: 24px;
      color: #fff;
      background-color: #305680;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      transition: background-color .4s cubic-bezier(.25, .8, .25, 1);

      &:hover {
        background-color: #264363;
        color: #fff;
        text-decoration: none;
      }
    }

    #video {
      width: 100%;
      margin: 0;
      position: relative;

      #video_wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        padding-left: 0;
        padding-right: 0;

        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    @media screen and (min-width: 750px) {
      #video {
        width: 100%;
        display: block;
      }
    }

    @media screen and (min-width: 1025px) {
      #video {
        width: 50%;
        position: relative;
      }
    }

    code:not([class*=language-]) {
      color: #eb5757;
      font-family: monospace;
      font-size: 16px;
    }

    div.code-wrapper {
      position: relative;

      button.clipboard-btn {
        pointer-events: none;
        outline: none;
        position: absolute;
        width: 206px;
        height: 42px;
        top: 0;
        right: 32px;
        background: 0 0;
        border: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &.multiline {
          right: 44px;
        }

        p {
          padding: 8px;
          top: 1px;
          transition: .2s;
          color: #2a7dec;
          background: rgba(255, 255, 255, .85);
          backdrop-filter: blur(4px);
          opacity: 0;
          font-weight: 500;
          right: 32px;
          position: absolute;
        }

        div {
          background-color: #fff;
          position: absolute;
          width: 38px;
          height: 38px;
          top: 3px;
          right: 3px;
          padding: 10px;

          img {
            position: initial;
            width: 18px;
            height: 18px;
            filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%);
          }
        }
      }

      &:hover {
        cursor: pointer;

        pre[class*="language-"] {
          border: solid 1px #2a7dec;
        }

        button.clipboard-btn {
          p {
            opacity: 1;
          }

          div {
            img {
              filter: invert(49%) sepia(97%) saturate(3730%) hue-rotate(200deg) brightness(95%) contrast(95%);
            }
          }
        }
      }
    }

    th, td {
      div.code-wrapper {
        display: inline-block;
        width: 100%;

        button.clipboard-btn {
          top: -10px;
          right: 0;
          padding: 0 3px;
        }
      }
    }

    pre[class*="language-"] {
      font-size: 16px;
      border: 1px solid rgba(42, 125, 236, .2);
      border-radius: 4px;
      background: 0 0;
      padding: 8px 16px;
      color: #212529;

      .token.atrule, .token.attr-value, .token.keyword {
        color: #2a7dec;
      }

      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
        color: #eb5757;
      }

      .token.punctuation {
        color: #212529;
      }

      &.line-numbers {
        padding-left: 66px;

        & > code {
          span.line-numbers-rows {
            top: -11px;
            bottom: -11px;
            left: -66px;
            width: 50px;
            border: none;
            padding: 8px 12px 8px 18px;
            text-align: right;
            background: #f9fbff;

            & > span:before {
              color: rgba(33, 37, 41, .6);
              padding-right: 0;
            }
          }
        }

        &.no-line-numbers {
          padding-left: 16px;

          & > code {
            span.line-numbers-rows {
              display: none;
            }
          }
        }
      }
    }
  }
}