$root-font-size = 16px
$main-blue = #70b7fd
$gradient-color = #ad95e4
$font-color = #555
$strong-color = #dd4a68

pxToRem(px)
  return unit(px/$root-font-size, 'rem')

html, body
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  color: $font-color
  font-size: $root-font-size
  font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif

  @media screen and (max-width: 960px)
    font-size: 14px

*
  -webkit-tap-highlight-color: transparent

#inner-scrollbar
  img
    display: block

[data-scrollbar]
  overflow: auto

strong
  color: lighten($strong-color, 20%)

a
  text-decoration: none
  color: darken($main-blue, 30%)

  &:hover
    text-decoration: underline

code
  font-size: 0.8em
  color: darken($font-color, 30%)
  padding: .1em .5em


header
  position: relative
  padding: 1em 1em 5em
  background: linear-gradient(45deg, $gradient-color, $main-blue)
  color: #fff
  font-size: pxToRem(14)
  text-align: center

  nav
    text-align: left

  h1
    font-size: 3em

  h2
    opacity: 0.85
    font-size: 1.5em
    font-weight: normal

  .repo
    display: inline-block
    margin: 1em
    padding: 0.5em 2em
    color: #fff
    text-decoration: none
    opacity: 0.85
    border: 1px solid currentColor
    border-radius: 2em

    &.doc
      opacity: 1
      background: rgba(255, 255, 255, 0.3)

    &:hover
      transform: translate3d(0, 2px, 0)

  .version-note
    position: absolute
    bottom: 0.5em
    right: 0.5em
    font-size: 0.8em
    opacity: 0.8

#content
  font-size: pxToRem(16)
  padding: 1em 2em 2em

  table
    font-size: .85em
    border-collapse: collapse

  thead, tr:nth-child(even)
    background-color: #f5f2f0

  th, td
    padding: 0.5em 1em
    border: 1px solid #ddd

  p::after
    content: ''
    display: table
    clear: both

  h2
    color: $main-blue
    font-size: 1.2em
    margin-left: -10px

    &::before
      content: '#'
      padding-right: .5em

  .intro
    ul
      padding-left: 1em

  .compatibility
    th, td
      &:first-child
        text-align: left
      &:last-child
        text-align: center

  .options
    th, td
      text-align: center

      &:last-child
        min-width: 20em
        text-align: left


#scrollbar-demo
  display: flex
  justify-content: space-around

#controller
  position: fixed
  bottom: 0
  left: 0
  z-index: 999

#inner-scrollbar
  max-width: 800px
  height: 400px
  border: 1px solid #ccc

footer
  text-align: center

// dat.gui
.dg
  user-select: none

  .close-button
    position: relative !important
  .property-name
    width: 60% !important

  .c
    width: 40% !important

   .selector
     margin-top: -105px;

#main-scrollbar
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0

#monitor
  display: none
  position: fixed
  right: 1em
  bottom: 1em
  z-index: 999
  background: #fff
  text-align: center
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8)

#chart
  width: 300px
  height: 200px
  border: 1px solid #aaa
  display: block

#track
  position: relative
  width: 100%
  height: 20px
  background: #ccc

#thumb
  margin: 0
  position: absolute
  top: 0
  right: 0
  height: 100%
  width: 100%
  background: #fff
  border: 3px solid #ccc
  box-sizing: border-box
  cursor: ew-resize

//
.github-corner:hover
  .octo-arm
    animation: octocat-wave 560ms ease-in-out

@keyframes octocat-wave
  0%, 100%
    transform: rotate(0)

  20%, 60%
    transform: rotate(-25deg)

  40%, 80%
    transform: rotate(10deg)

@media (max-width:500px)
  .github-corner:hover .octo-arm
    animation: none

  .github-corner .octo-arm
    animation: octocat-wave 560ms ease-in-out

  .badges
    display: none

  #options
    th, td
      &:nth-child(2)
      &:nth-child(3)
        display: none

  code
    white-space: pre-wrap !important