global-reset()

borderColor = #D0D0D0 // using
highlightenBorderColor = darken(borderColor, 20%)
invBorderColor = #404849
brandBorderColor = #3FB399

focusBorderColor = #369DCD

buttonBorderColor = #4C4C4C

lightButtonColor = #898989

hoverBackgroundColor= transparentify(#444, 4%) // using

inactiveTextColor = #888 // using
textColor = #4D4D4D // using
backgroundColor= white
fontSize= 14px // using

shadowColor= #C5C5C5

invBackgroundColor = #4C4C4C
invTextColor = white

btnColor = #888
btnHighlightenColor = #000

brandColor = #2BAC8F

popupShadow = 0 0 5px 0 #888


tableHeadBgColor = white
tableOddBgColor = #F9F9F9
tableEvenBgColor = white

facebookColor= #3b5998
githubBtn= #201F1F

// using
successBackgroundColor= #E0F0D9
successTextColor= #3E753F
errorBackgroundColor= #F2DEDE
errorTextColor= #A64444
infoBackgroundColor= #D9EDF7
infoTextColor= #34708E

popupZIndex= 500

body
  font-size 16px
  padding 15px
  font-family helvetica, arial, sans-serif
  line-height 1.6
  overflow-x hidden
  background-color $ui-noteDetail-backgroundColor
  .katex
    font 400 1.2em 'KaTeX_Main'
    line-height 1.2em
    white-space initial
    text-indent 0
  .katex .mfrac>.vlist>span:nth-child(2)
    top 0 !important
  .katex-error
    background-color errorBackgroundColor
    color errorTextColor
    padding 5px
    margin -5px
    border-radius 5px
  .flowchart-error, .sequence-error .chart-error
    background-color errorBackgroundColor
    color errorTextColor
    padding 5px
    border-radius 5px
    justify-content left
li
  label.taskListItem
    margin-left -1.8em
    &.checked
      text-decoration line-through
      opacity 0.5
  &.taskListItem.checked
    text-decoration line-through
    opacity 0.5
div.math-rendered
  text-align center
.math-failed
  background-color alpha(red, 0.1)
  color darken(red, 15%)
  padding 5px
  margin 5px 0
  border-radius 5px
sup
  position relative
  top -.4em
  font-size 0.8em
  vertical-align top
sub
  position relative
  bottom -.4em
  font-size 0.8em
  vertical-align top
a
  color brandColor
  text-decoration none
  padding 5px
  border-radius 5px
  margin -5px
  transition .1s
  img
    vertical-align sub
  &:hover
    color lighten(brandColor, 5%)
    text-decoration underline
    background-color alpha(#FFC95C, 0.3)
  &:visited
    color brandColor
hr
  border-top none
  border-bottom solid 1px borderColor
  margin 15px 0
h1, h2, h3, h4, h5, h6
  font-weight bold
  word-wrap break-word
h1
  font-size 2.55em
  padding-bottom 0.3em
  line-height 1.2em
  border-bottom solid 1px borderColor
  margin 1em 0 0.44em
  &:first-child
    margin-top 0
h2
  font-size 1.75em
  padding-bottom 0.3em
  line-height 1.225em
  border-bottom solid 1px borderColor
  margin 1em 0 0.57em
  &:first-child
    margin-top 0
h3
  font-size 1.5em
  line-height 1.43em
  margin 1em 0 0.66em
h4
  font-size 1.25em
  line-height 1.4em
  margin 1em 0 0.8em
h5
  font-size 1em
  line-height 1.4em
  margin 1em 0 1em
h6
  font-size 1em
  line-height 1.4em
  margin 1em 0 1em
  color #777
p
  line-height 1.6em
  margin 0 0 1em
  white-space pre-line
  word-wrap break-word
img
  max-width 100%
strong, b
  font-weight bold
em, i
  font-style italic
s, del, strike
  text-decoration line-through
u
  text-decoration underline
blockquote
  border-left solid 4px brandBorderColor
  margin 0 0 1em
  padding 0 25px
ul
  list-style-type disc
  padding-left 2em
  margin-bottom 1em
  li
    display list-item
    &.taskListItem
      list-style none
    p
      margin 0
  &>li>ul, &>li>ol
    margin 0
  &>li>ul
    list-style-type circle
    &>li>ul
      list-style-type square
ol
  list-style-type decimal
  padding-left 2em
  margin-bottom 1em
  li
    display list-item
    p
      margin 0
  &>li>ul, &>li>ol
    margin 0
code
  padding 0.2em 0.4em
  background-color #f7f7f7
  border-radius 3px
  font-size 1em
  text-decoration none
  margin-right 2px
pre
  padding 0.5rem !important
  border solid 1px #D1D1D1
  border-radius 5px
  overflow-x auto
  margin 0 0 1rem
  display flex
  line-height 1.4em
  code
    background-color inherit
    margin 0
    padding 0
    border none
    border-radius 0
  &.CodeMirror
    height initial
    flex-wrap wrap
    &>code
      flex 1
      overflow-x auto
  &.mermaid svg
    max-width 100% !important
  &>span.filename
    margin -0.5rem 100% 0.5rem -0.5rem
    padding 0.125rem 0.375rem
    background-color #777;
    color white
    &:empty
      display none
  &>span.lineNumber
    display none
    font-size 1em
    padding 0.5rem 0
    margin -0.5rem 0.5rem -0.5rem -0.5rem
    border-right 1px solid
    text-align right
    border-top-left-radius 4px
    border-bottom-left-radius 4px
    &.CodeMirror-gutters
      position initial
      top initial
      left initial
      min-height 0 !important
    &>span
      display block
      padding 0 .5em 0
table
  display block
  width 100%
  margin 0 0 1em
  overflow-x auto
  thead
    tr
      background-color tableHeadBgColor
    th
      border-style solid
      padding 6px 13px
      line-height 1.6
      border-width 1px 0 2px 1px
      border-color borderColor
      font-weight bold
      &:last-child
        border-right solid 1px borderColor
  tbody
    tr:nth-child(2n + 1)
      background-color tableOddBgColor
    tr:nth-child(2n)
      background-color tableEvenBgColor
    td
      border-style solid
      padding 6px 13px
      line-height 1.6
      border-width 0 0 1px 1px
      border-color borderColor
      &:last-child
        border-right solid 1px borderColor
kbd
  background-color #fafbfc
  border solid 1px borderColor
  border-bottom-color btnColor
  border-radius 3px
  box-shadow inset 0 -1px 0 #959da5
  display inline-block
  font-size .8em
  line-height 1
  padding 3px 5px

$admonition
    box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
    position relative
    margin 1.5625em 0
    padding 0 1.2rem
    border-left .4rem solid #448aff
    border-radius .2rem
    overflow auto

html .admonition>:last-child
    margin-bottom 1.2rem

.admonition .admonition
    margin 1em 0

.admonition p
    margin-top: 0.5em

$admonition-icon
    position absolute
    left 1.2rem
    font-family: "Material Icons"
    font-weight: normal;
    font-style: normal;
    font-size: 24px
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';

$admonition-title
    margin 0 -1.2rem
    padding .8rem 1.2rem .8rem 4rem
    border-bottom .1rem solid rgba(68,138,255,.1)
    background-color rgba(68,138,255,.1)
    font-weight 700

.admonition>.admonition-title:last-child
    margin-bottom 0

admonition_types = {
    note: {color: #0288D1, icon: "note"},
    hint: {color: #009688, icon: "info_outline"},
    danger: {color: #c2185b, icon: "block"},
    caution: {color: #ffa726, icon: "warning"},
    error: {color: #d32f2f, icon: "error_outline"},
    attention: {color: #455a64, icon: "priority_high"}
}

for name, val in admonition_types
    .admonition.{name}
        @extend $admonition
        border-left-color: val[color]

    .admonition.{name}>.admonition-title
        @extend $admonition-title
        border-bottom-color: .1rem solid rgba(val[color], 0.2)
        background-color: rgba(val[color], 0.2)

    .admonition.{name}>.admonition-title:before
        @extend $admonition-icon
        color: val[color]
        content: val[icon]

dl
  margin 2rem 0
  padding 0
  display flex
  width 100%
  flex-wrap wrap
  align-items flex-start
  border-bottom 1px solid borderColor
  background-color tableHeadBgColor

dt
  border-top 1px solid borderColor
  font-weight bold
  text-align right
  overflow hidden
  flex-basis 20%
  padding 0.4rem 0.9rem
  box-sizing border-box

dd
  border-top 1px solid borderColor
  flex-basis 80%
  padding 0.4rem 0.9rem
  min-height 2.5rem
  background-color $ui-noteDetail-backgroundColor
  box-sizing border-box

dd + dd
  margin-left 20%

pre.fence
  flex-wrap wrap

  .chart, .flowchart, .mermaid, .sequence
    display flex
    justify-content center
    background-color white
    max-width 100%
    flex-grow 1

    canvas, svg
      max-width 100% !important

  .gallery
    width 100%
    height 50vh

    .carousel
      .carousel-main img
        min-width auto
        max-width 100%
        min-height auto
        max-height 100%

      .carousel-footer::-webkit-scrollbar-corner
        background-color transparent

      .carousel-main, .carousel-footer
        background-color $ui-noteDetail-backgroundColor
      .prev, .next
        color $ui-text-color
        background-color $ui-tag-backgroundColor

themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #f9f9f9
themeDarkBorder = lighten(themeDarkBackground, 20%)
themeDarkPreview = $ui-dark-noteDetail-backgroundColor
themeDarkTableOdd = themeDarkPreview
themeDarkTableEven = darken(themeDarkPreview, 10%)
themeDarkTableHead = themeDarkTableEven
themeDarkTableBorder = themeDarkBorder
themeDarkModalButtonDefault = themeDarkPreview
themeDarkModalButtonDanger = #BF360C

body[data-theme="dark"]
  color themeDarkText
  border-color themeDarkBorder
  background-color themeDarkPreview
  a:hover
    background-color alpha(lighten(brandColor, 30%), 0.2) !important

  code
    color #EA6730
    border-color darken(themeDarkBorder, 10%)
    background-color lighten(themeDarkPreview, 5%)

  pre
    border-color lighten(#21252B, 20%)
    code
      background-color transparent

  label.taskListItem
    background-color themeDarkPreview
  table
    thead
      tr
        background-color themeDarkTableHead
      th
        border-color themeDarkTableBorder
        &:last-child
          border-right solid 1px themeDarkTableBorder
    tbody
      tr:nth-child(2n + 1)
        background-color themeDarkTableOdd
      tr:nth-child(2n)
        background-color themeDarkTableEven
      td
        border-color themeDarkTableBorder
        &:last-child
          border-right solid 1px themeDarkTableBorder
  kbd
    background-color themeDarkBorder
    color themeDarkText
  dl
    border-color themeDarkBorder
    background-color themeDarkTableHead
  dt
    border-color themeDarkBorder
  dd
    border-color themeDarkBorder
    background-color themeDarkPreview

  pre.fence
    .gallery
      .carousel-main, .carousel-footer
        background-color $ui-dark-noteDetail-backgroundColor
      .prev, .next
        color $ui-dark-text-color
        background-color $ui-dark-tag-backgroundColor

themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
themeSolarizedDarkTableBorder = themeDarkBorder

body[data-theme="solarized-dark"]
  color $ui-solarized-dark-text-color
  border-color themeDarkBorder
  background-color $ui-solarized-dark-noteDetail-backgroundColor
  table
    thead
      tr
        background-color themeSolarizedDarkTableHead
      th
        border-color themeSolarizedDarkTableBorder
        &:last-child
          border-right solid 1px themeSolarizedDarkTableBorder
    tbody
      tr:nth-child(2n + 1)
        background-color themeSolarizedDarkTableOdd
      tr:nth-child(2n)
        background-color themeSolarizedDarkTableEven
      td
        border-color themeSolarizedDarkTableBorder
        &:last-child
          border-right solid 1px themeSolarizedDarkTableBorder
  dl
    border-color themeDarkBorder
    background-color themeSolarizedDarkTableHead
  dt
    border-color themeDarkBorder
  dd
    border-color themeDarkBorder
    background-color $ui-solarized-dark-noteDetail-backgroundColor

  pre.fence
    .gallery
      .carousel-main, .carousel-footer
        background-color $ui-solarized-dark-noteDetail-backgroundColor
      .prev, .next
        color $ui-solarized-dark-button--active-color
        background-color $ui-solarized-dark-button-backgroundColor

themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
themeMonokaiTableHead = themeMonokaiTableEven
themeMonokaiTableBorder = themeDarkBorder

body[data-theme="monokai"]
  color $ui-monokai-text-color
  border-color themeDarkBorder
  background-color $ui-monokai-noteDetail-backgroundColor
  table
    thead
      tr
        background-color themeMonokaiTableHead
      th
        border-color themeMonokaiTableBorder
        &:last-child
          border-right solid 1px themeMonokaiTableBorder
    tbody
      tr:nth-child(2n + 1)
        background-color themeMonokaiTableOdd
      tr:nth-child(2n)
        background-color themeMonokaiTableEven
      td
        border-color themeMonokaiTableBorder
        &:last-child
          border-right solid 1px themeMonokaiTableBorder
  kbd
    background-color themeDarkBackground

  dl
    border-color themeDarkBorder
    background-color themeMonokaiTableHead
  dt
    border-color themeDarkBorder
  dd
    border-color themeDarkBorder
    background-color $ui-monokai-noteDetail-backgroundColor

  pre.fence
    .gallery
      .carousel-main, .carousel-footer
        background-color $ui-monokai-noteDetail-backgroundColor
      .prev, .next
        color $ui-monokai-button--active-color
        background-color $ui-monokai-button-backgroundColor

themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
themeDraculaTableHead = themeDraculaTableEven
themeDraculaTableBorder = themeDarkBorder

body[data-theme="dracula"]
  color $ui-dracula-text-color
  border-color themeDarkBorder
  background-color $ui-dracula-noteDetail-backgroundColor
  table
    thead
      tr
        background-color themeDraculaTableHead
      th
        border-color themeDraculaTableBorder
        &:last-child
          border-right solid 1px themeDraculaTableBorder
    tbody
      tr:nth-child(2n + 1)
        background-color themeDraculaTableOdd
      tr:nth-child(2n)
        background-color themeDraculaTableEven
      td
        border-color themeDraculaTableBorder
        &:last-child
          border-right solid 1px themeDraculaTableBorder
  kbd
    background-color themeDarkBackground

  dl
    border-color themeDarkBorder
    background-color themeDraculaTableHead
  dt
    border-color themeDarkBorder
  dd
    border-color themeDarkBorder
    background-color $ui-dracula-noteDetail-backgroundColor

  pre.fence
    .gallery
      .carousel-main, .carousel-footer
        background-color $ui-dracula-noteDetail-backgroundColor
      .prev, .next
        color $ui-dracula-button--active-color
        background-color $ui-dracula-button-backgroundColor