@import 'katex/dist/katex.min.css'

/* --- Docsector Reader --- */
@font-face
  font-family: "Fira Code Nerd Font"
  src: local('Fira Code Nerd Font'), local('FiraCode Nerd Font')
  font-weight: normal
  font-style: normal
// * General
body
  font-family: "Roboto", "Consolas"

// * Coloring
// Light mode
body.body--light
  --q-primary: #655529 !important
  --q-secondary: #000080 !important
  --task-list-checkbox-bg: #ffffff
  --task-list-checkbox-border: #7c6a3a
  --task-list-checkbox-checked-bg: #5e4c1f
  --task-list-checkbox-checked-border: #4f3f18
  --task-list-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M3.25 8.5 6.4 11.4 12.75 4.9'/%3E%3C/svg%3E")
  --kbd-color: #272b33
  --kbd-background: #f7f8fa
  --kbd-border: #d5dae0
  --kbd-shadow: inset 0 -1px 0 #c4cad3, 0 1px 2px rgba(15, 23, 42, 0.08)

  --q-primary-background: #FFF !important

  .content
    h1, h2, h3, h4, h5, h6
      color: black

      &:hover
        color: #595959
      &:hover:after
        color: #69562b
    // token
    code:not(pre > code)
      color: var(--q-primary) !important
      background: var(--q-primary-background) !important
      border: 1px solid #e6e6e6 !important
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125)

    a
      color: #34495e
      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):hover
        &:not(.button)
          color: #286fa3
          background-color: #cde3f3
      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
        color: #1b4a6c
        border-bottom: 1px dotted #1b4a6c
// Dark mode
body.body--dark
  --q-primary: #69562b !important
  --q-primary-in-dark-bg: #C1A667 !important
  --q-secondary: #FFA07A !important
  --q-negative: #fc001b !important
  --task-list-checkbox-bg: #181818
  --task-list-checkbox-border: #8f8a78
  --task-list-checkbox-checked-bg: #d3b874
  --task-list-checkbox-checked-border: #ebd08a
  --task-list-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23151515' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M3.25 8.5 6.4 11.4 12.75 4.9'/%3E%3C/svg%3E")
  --kbd-color: #f3f5f7
  --kbd-background: #2a303a
  --kbd-border: #4d5663
  --kbd-shadow: inset 0 -1px 0 #3a414d, 0 1px 2px rgba(0, 0, 0, 0.45)

  --q-light-in-dark-1: #ababab
  --q-light-in-dark-2: #c9c9c9

  --q-primary-background: #FFF !important

  color: var(--q-light-in-dark-1)

  .content
    h1, h2, h3, h4, h5, h6
      color: var(--q-light-in-dark-1)

      &:hover
        color: #969696
      &:hover:after
        color: #B19248
    section
      color: var(--q-light-in-dark-2)
    // token
    code:not(pre > code)
      color: var(--q-primary-in-dark-bg) !important
      background: var(--q-dark) !important
      border: 1px solid #e6e6e6
      box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)

    a
      color: #34495e
      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):hover
        &:not(.button)
          color: #286fa3
          background-color: #cde3f3
      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
        color: #3da6f3
        border-bottom: 1px dotted #1b4a6c

    &.overview,
    &.showcase
      blockquote
        border-left-color: #3d444d
        background-color: #161b22 !important

      .d-page-blockquote
        &--note
          border-left-color: #58a6ff
          background-color: rgba(56, 139, 253, 0.18) !important

          .d-page-blockquote__heading
            color: #58a6ff

        &--tip
          border-left-color: #3fb950
          background-color: rgba(63, 185, 80, 0.18) !important

          .d-page-blockquote__heading
            color: #3fb950

        &--important
          border-left-color: #bc8cff
          background-color: rgba(188, 140, 255, 0.2) !important

          .d-page-blockquote__heading
            color: #bc8cff

        &--warning
          border-left-color: #d29922
          background-color: rgba(210, 153, 34, 0.2) !important

          .d-page-blockquote__heading
            color: #d29922

        &--caution
          border-left-color: #ff7b72
          background-color: rgba(248, 81, 73, 0.2) !important

          .d-page-blockquote__heading
            color: #ff7b72

      table
        border-color: #3f3f3f
        box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.45)
        th
          border-bottom: 2px solid #3f3f3f
      table:not(.js-file-line-container)
        tr:nth-child(2n)
          background: #2a2a2a

// * General
.content
  --big-play-button-background: #000 !important
  --big-play-button-background-dark: #000 !important

  h1, h2, h3, h4, h5, h6
    font-weight: 600
    padding: 6px
    cursor: pointer
    user-select: none

    &:hover:after
      content: ' #'
      font-weight: bold

  h1
    font-size: 2rem
    line-height: 2rem
    margin: 0 0 0.7em
  h2
    font-size: 1.7rem
    line-height: 1.7rem
    margin: 1.35em 0 0.7em
    border-bottom: 1px solid #ddd
  h3
    font-size: 1.5rem
    line-height: 1.5rem
    margin: 1.4em 0 0.7em

    &:first-child
      margin-top: 0
    &:before
      content: '# '
  h4
    font-size: 1.25rem
    line-height: 1.25rem
    margin: 1em 0 0.7em
  h5
    font-size: 1.12rem
    line-height: 1.12rem
    margin: 0.5em 0 0.3em
  h6
    font-size: 1.06rem
    line-height: 1.06rem
    margin: 0.3em 0 0.1em

  code:not(pre > code)
    padding: 1px 3px
    margin: 0 2px
    border-radius: 2px
    white-space: normal
    word-break: break-word
    display: inline
    line-height: 0.85em

  kbd
    display: inline-flex
    align-items: center
    justify-content: center
    min-width: 1.8em
    padding: 0.18rem 0.42rem
    margin: 0 0.1rem
    border: 1px solid var(--kbd-border)
    border-radius: 0.45rem
    background: var(--kbd-background)
    box-shadow: var(--kbd-shadow)
    color: var(--kbd-color)
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif
    font-size: 0.85em
    font-weight: 600
    line-height: 1.1
    letter-spacing: 0.01em
    vertical-align: middle
    white-space: nowrap
    text-transform: none

  .katex
    color: inherit
    max-width: 100%

  .katex-display
    max-width: 100%
    overflow-x: auto
    overflow-y: hidden
    padding: 0.35rem 0.1rem

  ul.contains-task-list,
  ol.contains-task-list
    list-style: none
    padding-left: 1.75rem

  li.task-list-item
    list-style: none

  input.task-list-item-checkbox
    appearance: none
    -webkit-appearance: none
    width: 1rem
    height: 1rem
    margin: 0 0.55rem 0 -1.45rem
    vertical-align: middle
    pointer-events: none
    opacity: 1
    border: 2px solid var(--task-list-checkbox-border)
    border-radius: 0.2rem
    background-color: var(--task-list-checkbox-bg)
    background-position: center
    background-repeat: no-repeat
    background-size: 0.72rem 0.72rem
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08)

    &:checked
      background-color: var(--task-list-checkbox-checked-bg)
      border-color: var(--task-list-checkbox-checked-border)
      background-image: var(--task-list-checkbox-check)

    &:disabled
      opacity: 1

  a
    text-decoration: none
    outline: 0
    cursor: pointer
    &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
      font-weight: 700
      padding: 0 2px
      transition: all 0.3s ease

  &.overview,
  &.showcase
    blockquote
      margin: 1.5em 0
      padding: 0.85em 1.1em
      border-left: 4px solid #d0d7de
      border-radius: 0 6px 6px 0
      background-color: #f6f8fa !important
      p
        margin: 0.65em 0
        letter-spacing: normal

      p:first-child
        margin-top: 0

      p:last-child
        margin-bottom: 0

    .d-page-blockquote
      &__heading
        display: flex
        align-items: center
        gap: 0.35rem
        margin: 0 0 0.6rem 0

        strong
          font-weight: 700

      &--note
        border-left-color: #0969da
        background-color: rgba(9, 105, 218, 0.12) !important

        .d-page-blockquote__heading
          color: #0969da

      &--tip
        border-left-color: #1a7f37
        background-color: rgba(26, 127, 55, 0.12) !important

        .d-page-blockquote__heading
          color: #1a7f37

      &--important
        border-left-color: #8250df
        background-color: rgba(130, 80, 223, 0.12) !important

        .d-page-blockquote__heading
          color: #8250df

      &--warning
        border-left-color: #9a6700
        background-color: rgba(154, 103, 0, 0.14) !important

        .d-page-blockquote__heading
          color: #9a6700

      &--caution
        border-left-color: #cf222e
        background-color: rgba(207, 34, 46, 0.14) !important

        .d-page-blockquote__heading
          color: #cf222e
    img
      border: 0
      max-width: 100%
    strong
      font-weight: 600
    hr
      margin: 2em 0
      height: 2px
      background-color: #e5e5e5
      border: 0
      padding: 0
    iframe
      border: 0
      margin: 1em 0
    ul
      padding-left: 1.25em
      line-height: 1.4em
    span
      &.light
        color: #57a0d6
      &.info
        font-size: 0.85em
        display: inline-block
        vertical-align: middle
        width: 280px
        margin-left: 20px
    .d-table-wrapper
      overflow-x: auto
      -webkit-overflow-scrolling: touch
      max-width: 100%
      margin-bottom: 10px
    table
      width: max-content
      border: 1px solid #eee
      border-radius: 4px
      border-spacing: 0
      box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.125)
      th
        font-weight: bold
        border-bottom: 2px solid #eee
        text-align: left
        white-space: nowrap
      td code
        white-space: nowrap
      tr
        vertical-align: top
      &:not(.js-file-line-container)
        tr
          &:nth-child(2n)
            background: #f8f8f8
    figure
      table
        border: 0
        box-shadow: none
        th
          border-bottom: 0
    .highlight
      pre
        padding: 0
        .line
          min-height: 20px
    & > h1
      i
        font-size: 70%
        vertical-align: middle
        color: #286fa3
    ul ul,
    ul p
      margin: 0.6em 0
    ul,
    ol
      line-height: 1.6em
    ul,
    ol
      padding-left: 1.5em
    table th,
    table td
      padding: 10px 10px



/* --- Quasar --- */
// * General
.q-item__section--avatar
  min-width: 45px
// ! Layouts
// QDrawer
.q-drawer__opener
  top: 86px

// ! Components
// QDialog
.q-dialog__inner > div
  border-radius: 0 !important
// QList
// QList -> Item
.q-item__section--main + .q-item__section--main
  margin-left: 0
// QList -> Item -> Label
.q-item__label--header
  font-weight: 500
  padding-left: 0
  padding-bottom: 10px
// QBtn
.q-btn
  &.filled
    padding: 13px
// QScrollArea
.q-scrollarea__thumb
  z-index: 3
// QTree
.q-tree__node
  padding: 0 0 3px 5px
.q-tree__node-header:before
  width: 15px
  left: -18px !important
// QSelect
.q-field--labeled .q-field__native,
.q-field--labeled .q-field__prefix,
.q-field--labeled .q-field__suffix
  padding-bottom: 0

// * Coloring
// Light mode
body.body--light
  .q-item__label--header
    color: #565656
  .q-tree__arrow
    color: #474747
// Dark mode
body.body--dark
  .q-tree__arrow
    color: #a9a9a9
