// Rewrite navbar
.navbar
  background-color transparent
  font-size 0.875rem
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

  .navbar-brand
    color var(--navbar-text-color)

  .navbar-toggler .animated-icon span
    background-color var(--navbar-text-color)

  .nav-item .nav-link
    display block
    color var(--navbar-text-color)
    transition color .2s ease-in-out, background-color .2s ease-in-out

    &:hover
      color var(--link-hover-color)
      background-color rgba(0, 0, 0, 0.1)

    i
      font-size 0.875rem

  .navbar-toggler
    border-width 0
    outline 0

  &.scrolling-navbar
    will-change background, padding
    -webkit-transition background 0.5s ease-in-out, padding 0.5s ease-in-out
    transition background 0.5s ease-in-out, padding 0.5s ease-in-out

    @media (min-width: 600px)
      &
        padding-top 12px
        padding-bottom 12px

      & .navbar-nav > li
        -webkit-transition-duration 1s
        transition-duration 1s

    &.top-nav-collapse
      padding-top 5px
      padding-bottom 5px

  .dropdown-menu
    font-size 0.875rem
    color var(--navbar-text-color)
    background-color rgba(0, 0, 0, 0.3)
    border none
    -webkit-transition background .5s ease-in-out,padding .5s ease-in-out
    transition background .5s ease-in-out,padding .5s ease-in-out

    @media (max-width: 991.98px)
      text-align center

  .dropdown-item
    color var(--navbar-text-color)

    &:hover, &:focus
      color var(--link-hover-color)
      background-color rgba(0, 0, 0, 0.1)

  @media (min-width: 992px)
    .dropdown:hover > .dropdown-menu
      display block

    .dropdown > .dropdown-toggle:active
      pointer-events none

    .dropdown-menu
      top 95%

  .animated-icon
    width 30px
    height 20px
    position relative
    margin 0
    -webkit-transform rotate(0deg)
    -moz-transform rotate(0deg)
    -o-transform rotate(0deg)
    transform rotate(0deg)
    -webkit-transition .5s ease-in-out
    -moz-transition .5s ease-in-out
    -o-transition .5s ease-in-out
    transition .5s ease-in-out
    cursor pointer

    span
      display block
      position absolute
      height 3px
      width 100%
      border-radius 9px
      opacity 1
      left 0
      -webkit-transform rotate(0deg)
      -moz-transform rotate(0deg)
      -o-transform rotate(0deg)
      transform rotate(0deg)
      -webkit-transition .25s ease-in-out
      -moz-transition .25s ease-in-out
      -o-transition .25s ease-in-out
      transition .25s ease-in-out
      background #ffffff

      &:nth-child(1)
        top 0

      &:nth-child(2)
        top 10px

      &:nth-child(3)
        top 20px

    &.open
      span
        &:nth-child(1)
          top 11px
          -webkit-transform rotate(135deg)
          -moz-transform rotate(135deg)
          -o-transform rotate(135deg)
          transform rotate(135deg)

        &:nth-child(2)
          opacity 0
          left -60px

        &:nth-child(3)
          top 11px
          -webkit-transform rotate(-135deg)
          -moz-transform rotate(-135deg)
          -o-transform rotate(-135deg)
          transform rotate(-135deg)

.navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
  if $navbar-glass-enable
    ground-glass($navbar-glass-px, $navbar-bg-color, $navbar-glass-alpha)
  else
    background-color var(--navbar-bg-color)

@media (max-width: 767px)
  .navbar
    font-size 1rem
    line-height 2.5rem

// Rewrite reboot.scss
label
  margin-bottom 0

// Rewrite github-markdown.css
.markdown-body
  font-size 1rem
  line-height 1.6
  font-family $font-family
  margin-bottom 2rem
  color var(--post-text-color)

  h1, h2
    border-bottom-color var(--line-color)

  h1, h2, h3, h4, h5, h6
    color var(--post-heading-color)
    transition color .2s ease-in-out, border-bottom-color 0.2s ease-in-out
    font-weight bold
    margin-bottom .75em
    margin-top 2em

    &:focus
      outline none

  a
    color var(--post-link-color)

  strong
    font-weight bold

  code
    tab-size 4
    background-color var(--inlinecode-bg-color)
    transition background-color .2s ease-in-out

  table
    tr
      background-color var(--board-bg-color)
      transition background-color .2s ease-in-out
    tr:nth-child(2n)
      background-color var(--board-bg-color)
      transition background-color .2s ease-in-out
    th, td
      border-color var(--line-color)
      transition border-color .2s ease-in-out

  pre
    font-size $code-font-size !important

    .mermaid
      text-align center

      & > svg
        min-width 100%

  p > img, p > a > img, figure > img, figure > a > img
    max-width 90%
    margin 1.5rem auto
    display block
    box-shadow $img-shadow
    border-radius 4px
    background-color transparent

  blockquote
    color var(--sec-text-color)

  details
    cursor pointer

    summary
      outline none

// Rewrite hr
hr, .markdown-body hr
  background-color initial
  border-top 1px solid var(--line-color)
  transition border-top-color .2s ease-in-out

.markdown-body hr
  height 0
  margin 2rem 0

// Rewrite highlight
.markdown-body

  .highlight pre, pre
    padding 1.45rem 1rem

  pre code.hljs
    padding 0

  pre[class*="language-"]
    padding-top 1.45rem
    padding-bottom 1.45rem
    padding-right 1rem

  .code-wrapper
    position relative
    border-radius 4px

.markdown-body
  .hljs, .highlight pre, .code-wrapper pre, figure.highlight td.gutter
    transition color .2s ease-in-out, background-color .2s ease-in-out
    background-color var(--highlight-bg-color)

pre[class*=language-].line-numbers
  position initial

figure
  margin 1rem 0

figure.highlight
  position relative

  table
    border 0
    margin 0
    width auto
    border-radius 4px

  td
    border 0
    padding 0

  tr
    border 0

  td.code
    width 100%

  td.gutter
    display table-cell
    position -webkit-sticky
    position sticky
    left 0
    z-index 1

    pre
      text-align right
      padding 0 .75rem
      border-radius initial
      border-right 1px solid #999

      span.line
        color #999

  td.code > pre
    border-top-left-radius 0
    border-bottom-left-radius 0

// Rewrite mdb.css
.list-group-item
  display flex
  background-color transparent
  border 0

  time
    flex 0 0 5rem

  .list-group-item-title
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

@media (max-width: 575px)
  .list-group-item
    font-size .95rem
    padding 0.5rem 0.75rem

    time
      flex 0 0 4rem

.page-link
  font-size 1.1rem

// Rewrite pagination
.pagination
  margin-top 3rem
  justify-content center

  .space
    align-self flex-end

  a, .current
    outline 0
    border 0
    background-color transparent
    font-size .9rem
    padding .5rem .75rem
    line-height 1.25
    border-radius .125rem
    transition background-color .2s ease-in-out

  a:hover, .current
    background-color var(--link-hover-bg-color)

// Rewrite modal
.modal-dialog .modal-content
  background-color var(--board-bg-color)
  border 0
  border-radius .125rem
  -webkit-box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
  box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)

.modal-dialog .modal-content .modal-header
  border-bottom-color var(--line-color)
  transition border-bottom-color .2s ease-in-out

.close
  color var(--text-color)

  &:hover
    color var(--link-hover-color)

  &:focus
    outline 0

.modal-dialog .modal-content .modal-header
  border-top-left-radius .125rem
  border-top-right-radius .125rem
  border-bottom 1px solid #dee2e6

.md-form
  position relative
  margin-top 1.5rem
  margin-bottom 1.5rem

.md-form
  input[type]
    -webkit-box-sizing content-box
    box-sizing content-box
    background-color transparent
    border none
    border-bottom 1px solid #ced4da
    border-radius 0
    outline none
    -webkit-box-shadow none
    box-shadow none
    transition border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out

    $normal = #4285f4

    &:focus:not([readonly])
      border-bottom 1px solid $normal
      -webkit-box-shadow 0 1px 0 0 $normal
      box-shadow 0 1px 0 0 $normal

      & + label
        color: $normal

    $valid = #00c851

    &.valid, &:focus.valid
      border-bottom 1px solid $valid
      -webkit-box-shadow 0 1px 0 0 $valid
      box-shadow 0 1px 0 0 $valid

      & + label
        color: $valid

    $invalid = #f44336

    &.invalid, &:focus.invalid
      border-bottom 1px solid $invalid
      -webkit-box-shadow 0 1px 0 0 $invalid
      box-shadow 0 1px 0 0 $invalid

      & + label
        color $invalid

    &.validate
      margin-bottom 2.5rem

    &.form-control
      height auto
      padding .6rem 0 .4rem 0
      margin 0 0 .5rem 0
      color var(--text-color)
      background-color transparent
      border-radius 0

  label
    font-size 0.8rem
    position absolute
    top -1rem
    left 0
    color #757575
    cursor text
    transition color .2s ease-out

// Rewrite toc
.toc-list-item
  white-space nowrap
  overflow hidden
  text-overflow ellipsis

// Rewrite anchorjs
.anchorjs-link
  text-decoration none !important
  transition opacity .2s ease-in-out

.markdown-body h1, h2, h3, h4, h5, h6
  &:hover > .anchorjs-link
    opacity 1

// Rewrite iconfont
i.iconfont
  font-size 1em
  line-height 1

// Rewrite checkbox
input[type=checkbox]
  margin 0 0.2em 0.2em 0
  vertical-align middle

// Rewrite list-group
.list-group-item-action
  color var(--text-color)

  &:focus, &:hover
    color var(--link-hover-color)
    background-color var(--link-hover-bg-color)

// Rewrite fancybox
a.fancybox:hover
  text-decoration none

// Rewrite nprogress
$npColor = theme-config("fun_features.progressbar.color", "#29d")
#nprogress
  .bar
    height theme-config-unit("fun_features.progressbar.height_px", 3, "px") !important
    background-color $npColor !important
  .peg
    box-shadow 0 0 14px $npColor, 0 0 8px $npColor !important

  @media (max-width: 575px)
    .bar
      display none

// Rewrite valine
.v[data-class=v]
  .status-bar, .veditor, .vinput, .vbtn, p, pre code
    color var(--text-color) !important

  .vicon
    fill var(--text-color) !important

// Rewrite gitalk
.gt-container

  .gt-comment-content:hover
    -webkit-box-shadow none
    box-shadow none

  .gt-comment-body
    color var(--text-color) !important
    transition color .2s ease-in-out

// Rewrite remark42
#remark-km423lmfdslkm34-back
  z-index 1030
#remark-km423lmfdslkm34-node
  z-index 1031

// Rewrite mathjax
mjx-container, .mjx-container
  overflow-x auto
  overflow-y hidden !important
  padding .5em 0

  &:focus, svg:focus
    outline none

.mjx-char
  line-height 1

// Rewrite katex
.katex-block
  overflow-x auto

.katex, .mjx-mrow
  white-space pre-wrap !important

// Rewrite hint
.footnote-ref [class*=hint--][aria-label]:after
  max-width 12rem
  white-space nowrap
  overflow hidden
  text-overflow ellipsis