@use "sass:color"
@use 'quasar.variables.sass'
@use 'prism-theme.sass'

.q-markdown
  position: relative

  details > summary
    display: list-item

  code, pre
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace

  pre
    border-radius: quasar.$generic-border-radius
    padding: 5px
    margin: 0
    background-size: 1.5em 1.5em
    background-origin: content-box
    background-attachment: local
    max-height: inherit
    height: inherit
    display: block
    overflow: auto
    position: relative
    font-size: 12px
    background: quasar.$blue-grey-1
    color: quasar.$grey-10
    text-align: left
    white-space: pre
    word-spacing: normal
    word-break: normal
    word-wrap: normal
    line-height: 1.5em
    tab-size: 4
    hyphens: none

  pre code
    border-radius: 0
    width: max-content

  &--heading

    &-h1
      font-size: 2rem !important
      line-height: 2rem !important
      padding: 1rem 0
      font-weight: 500
      margin: 0 0 1rem

    &-h2
      font-size: 1.5rem !important
      line-height: 1.5rem !important
      padding: 0.5rem 0
      font-weight: 500
      margin: 1rem 0 1rem

    &-h3
      font-size: 1.1rem !important
      line-height: 1.1rem !important
      padding: 0.45rem 0
      margin: 1rem 0 1rem

    &-h4
      font-size: 1rem !important
      line-height: 1rem !important
      padding: 0.25rem 0
      margin: 1rem 0

    &-h5
      font-size: 0.9rem !important
      margin: 1rem 0

    &-h6
      font-size: 0.8rem !important
      margin: 1rem 0

    .q-markdown--link
      // border-bottom: inherit
      color: inherit

    &--anchor-link
      cursor: pointer

      &:after
        content: ' #'
        opacity: 0
        transition: opacity .2s

      &:hover:after
        opacity: 1

  &--title-heavy
    border-bottom: 3px solid #ccc

  &--title-light
    border-bottom: 1px solid #ccc

  &--image
    max-width: 100%
    height: auto

  &--link
    font-weight: 500
    text-decoration: none
    outline: 0
    // border-bottom: 1px dotted currentColor
    text-align: center
    transition: opacity .2s
    // white-space: nowrap // prevents long headlines from wrapping properly

    &:hover
      // color: yellow

    &-local
      font-family: inherit

    &-external
      font-family: inherit
      &:after
        content: '\e895' // hash
        font-family: Material Icons
        font-weight: normal
        font-style: normal
        display: inline-block
        line-height: 1
        text-transform: none
        letter-spacing: normal
        word-wrap: normal
        white-space: nowrap
        direction: ltr
        text-rendering: optimizeLegibility
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale
        font-feature-settings: "liga"
        margin: 0 0 0 3px
        padding: 0

  &--token
    white-space: nowrap
    background: quasar.$grey-1
    color: quasar.$grey-10
    border: quasar.$grey-8 solid 1px
    padding: 1px 2px
    font-family: inherit
    border-radius: quasar.$generic-border-radius

  &--note
    margin: 14px 0
    padding: 10px
    font-size: 1em
    letter-spacing: .5px
    background: quasar.$blue-grey-1
    color: quasar.$grey-10
    font-weight: 400

    > p:last-child, .q-markdown--note:last-child
      margin-bottom: 0

    .q-markdown--link
      // color: $grey-2

    &--
      border-left: 10px solid color.adjust(quasar.$grey-8, $lightness: 30%)
      border-radius: 8px 0 0 8px
      .q-markdown--link
        color: color.adjust(quasar.$grey-8, $lightness: 10%)

    &--info
      border-left: 10px solid color.adjust(quasar.$blue-8, $lightness: 30%)
      border-radius: 8px 0 0 8px
      color: quasar.$grey-9
      background: quasar.$blue-2
      .q-markdown--link
        color: color.adjust(quasar.$blue-8, $lightness: 10%)
      .q-markdown--note-title
        color: color.adjust(quasar.$blue-8, $lightness: 10%)

    &--tip
      border-left: 10px solid color.adjust(quasar.$green-8, $lightness: 30%)
      border-radius: 8px 0 0 8px
      color: quasar.$grey-9
      background: quasar.$green-2
      .q-markdown--link
        color: color.adjust(quasar.$green-8, $lightness: 10%)
      .q-markdown--note-title
        color: color.adjust(quasar.$green-8, $lightness: 10%)

    &--warning
      border-left: 10px solid color.adjust(quasar.$orange-10, $lightness: 30%)
      border-radius: 8px 0 0 8px
      color: quasar.$grey-9
      background: quasar.$orange-2
      .q-markdown--link
        color: color.adjust(quasar.$orange-10, $lightness: 10%)
      .q-markdown--note-title
        color: color.adjust(quasar.$orange-10, $lightness: 10%)

    &--danger
      border-left: 10px solid color.adjust(quasar.$negative, $lightness: 30%)
      border-radius: 8px 0 0 8px
      color: quasar.$grey-9
      background: quasar.$red-2
      .q-markdown--link
        color: color.adjust(quasar.$red-8, $lightness: 10%)
      .q-markdown--note-title
        color: color.adjust(quasar.$red-8, $lightness: 10%)

    &-title
      font-weight: 800
      margin-left: -4px
      margin-right: -4px
      padding: 0 4px
      margin-bottom: 4px

  &--table
    width: fit-content
    margin-bottom: 16px
    border-collapse: collapse
    max-width: 100%
    border-width: 1px
    border-style: solid
    border-color: quasar.$grey

  &--line-numbers-wrapper
    display: flex
    justify-content: flex-start
    font-size: 12px
    margin: 0 0 1.0em 0
    background: quasar.$blue-grey-1
    color: quasar.$grey-10
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
    border-radius: quasar.$generic-border-radius

  &--line-numbers
    padding: 5px
    text-align: right

  &--line-number
    color: quasar.$grey-6
    margin: 0
    position: relative
    text-align: left
    white-space: pre
    word-spacing: normal
    word-break: normal
    word-wrap: normal
    line-height: 1.5
    tab-size: 4
    hyphens: none

  &--code-wrapper
    width: 100%
    min-width: 0

  &--code,
  &--code__inner
    margin: 0
    position: relative
    text-align: left
    white-space: pre
    word-spacing: normal
    word-break: normal
    word-wrap: normal
    line-height: 1.5
    tab-size: 4
    hyphens: none

  &--code
    overflow: visible
    padding: 0

    &__inner
      max-height: inherit
      height: inherit
      display: block
      overflow: auto

  &--table
    border-color: quasar.$grey-4
    background: quasar.$grey-1

  &--table thead
    background: quasar.$grey-4

  &--table thead tr th
    padding: 8px
    border-width: 1px
    border-style: solid
    background: quasar.$grey-2

  &--table tbody
    background: quasar.$grey-1

  &--table tbody td,
  &--table tbody th
    padding: 8px
    border-width: 1px
    border-style: solid

  &--table tbody tr:nth-child(odd)
    background: quasar.$grey-4

// .q-markdown--page > div, .q-markdown--page > pre
//   margin-bottom: 22px

blockquote.q-markdown--link
  background: transparent
  // color: $teal-6

  &:hover
    // color: yellow

blockquote.q-markdown--note
  border-width: 1px 8px 1px 8px
  border-radius: 8px
  border-style: solid
  border-color: quasar.$grey-6 quasar.$teal-6

.q-markdown__copy
  position: absolute
  top: 15px
  right: 15px

.body--dark
  .q-markdown
    color: quasar.$grey-2

    code
      background: quasar.$grey-9
      color: quasar.$grey-2

    .q-markdown--link
      // color: $teal-6

      &:hover
        // color: yellow

    blockquote.q-markdown--note
      border-color: quasar.$grey-6 quasar.$grey-6
      background: quasar.$dark
      color: quasar.$grey-2

    pre, pre code
      background: quasar.$dark

    .q-markdown--line-numbers-wrapper
      background: quasar.$dark
      color: quasar.$grey-2

    .q-markdown--token
      background: quasar.$grey-6
      color: quasar.$grey-10
      border: quasar.$grey-4 solid 1px

    .q-markdown--code
      background: quasar.$dark
      color: quasar.$grey-10

    .q-markdown--note
      background: quasar.$grey-10
      color: white
      border-top: 1px solid quasar.$grey-9
      border-bottom: 1px solid quasar.$grey-9

    .q-markdown--note--
      border-left: 10px solid quasar.$grey-6

    .q-markdown--note--info
      border-left: 10px solid quasar.$light-blue-10

    .q-markdown--note--tip
      border-left: 10px solid quasar.$light-green-10

    .q-markdown--note--warning
      border-left: 10px solid quasar.$orange-10

    .q-markdown--note--danger
      border-left: 10px solid quasar.$red-10

    .q-markdown--table thead tr th,
    .q-markdown--table tbody
      background-color: quasar.$dark

    .q-markdown--table tbody tr:nth-child(2n+1)
      background-color: quasar.$grey-9