@require './normalize.css/normalize.css'
@require './github-markdown-css/github-markdown.css'
@require './nprogress/nprogress.css'
@require './iconfonts/stylesheets/ionicons'

ion-font()

$bg ?= white
$black ?= #111
$slate ?= #505d6b
$accent ?= #4078C0
$nav-width ?= 250px
$collapsed-nav-width ?= 64px
$xpad ?= 24px
$line ?= rgba($black, 0.1)

// :before:

clearfix()
  &:after
    content: ''
    display: table
    clear: both
    zoom: 1

*
  box-sizing: border-box

html, body
  height: 100%

html
  background: $bg

.doc-layout
  width: 100%
  height: 100%

  .body
    padding: 16px

//
// Menu
//

.toc-menu
  $pad = 24px

  &
    position: relative
    padding: ($pad - 4px) 0
    // background: #fdfefe
    box-shadow: inset -1px 0 $line
    font-size: 13px
    transition: opacity 1500ms linear

  ul, li
    margin: 0
    padding: 0
    list-style: none

  .title
    display: block
    padding: 7px $pad
    height: 1em
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap
    box-sizing: content-box

  .-level-1.-parent
    margin-bottom: 16px

  .-level-1.-parent > .title
    margin-top: 16px
    font-weight: bold
    color: $black
    font-size: 1.1em

  .link
    &, &:visited
      color: $slate
      text-decoration: none
      position: relative

  .link, .hlink
    &
      transition: background-color 200ms linear, color 500ms linear, box-shadow 200ms linear
      box-shadow: inset -2px 0 rgba($accent, 0)
      box-sizing: content-box

    &:hover
      background-color: rgba($accent, 0.02)
      color: darken($slate, 20%)
      transition: box-shadow 200ms linear

    &:active
      background-color: rgba($accent, 0.1)
      color: $black
      transition: box-shadow 200ms linear

    &.-active
      box-shadow: inset -2px 0 $accent
      transition: background-color 200ms linear, color 500ms linear

  // The readme
  .-level-1:first-child
    margin-bottom: 16px

  // The readme's headings
  .-level-1:first-child > .heading-list
    margin-top: 16px

  // The readme's title
  .-level-1:first-child > .title
    margin-top: 0
    font-size: 1.5em
    font-weight: 300
    color: $black

  .-level-3 .title
    padding-left: $pad + 8px * 1

  .-level-4 .title
    padding-left: $pad + 8px * 2

//
// Headings menu
//

ul.heading-list
  $pad = 24px

  .hlink
    text-decoration: none
    padding: 6px $pad
    display: block
    height: 1em
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap

    &, &:visited
      color: $slate

  .hlink:before
    content: ''
    display: inline-block
    vertical-align: middle
    margin-right: 8px
    height: 2px
    width: 12px
    background: $slate
    opacity: 0.3

//
// Hover fade
//

.toc-menu.-faded
  .title:not(.-active)
    opacity: 0.2
    transition: opacity 1500ms linear

  &:hover .title
    opacity: 1
    transition: opacity 200ms linear

//
// Markdown body
//

.markdown-body
  margin: 0 auto
  max-width: 768px
  overflow: visible

//
// Markdown overrides
//

.markdown-body
  h1
    font-size: 2.5em
    font-weight: 300
    margin-bottom: .5em
    padding-bottom: .5em

//
// Nprogress
//

#nprogress
  .bar
    background: $accent

  .peg
    box-shadow: 0 0 10px $accent, 0 0 5px $accent
    display: block

  .spinner-icon
    border-top-color: $accent
    border-left-color: $accent

//
// Menu toggle
//

.menu-toggle
  $size = 40px

  &
    display: none
    box-sizing: content-box

  @media (min-width: 769px)
    display: block
    width: $size + 12px
    height: $size + 12px
    line-height: $size

    position: fixed
    padding-left: 12px
    left: 0
    bottom: 0
    color: $black
    z-index: 10
    cursor: pointer
    background: transparent

  &
    // keep the white visible
    transition: width 1ms linear 250ms, background-color 1ms linear 250ms, color 400ms linear

  .-menu-visible &
    width: $nav-width - 1px - 20px
    background-color: $bg
    transition: color 400ms linear

  &:before
    display: inline-block
    ion-icon('navicon', 24px)
    text-align: center
    width: $size

  &:hover
    color: $accent
    // transition: width 0 linear 250ms, background-color 0 linear 250ms, color 100ms linear

//
// Search (to do)
//

.toc-menu
  &:before
    ion-icon('ios-search-strong', 20px)
    display: block
    width: 40px
    height: 40px
    line-height: 40px
    text-align: center

    position: absolute
    right: 24px - 14px
    top: 24px - 8px
    color: $slate
    transition: color 400ms linear
    border-radius: 3px
    z-index: 10
    cursor: pointer

.header-nav,
.footer-nav
  font-size: 16px

//
// Header
//
.header-nav
  &
    position: fixed
    top: 0
    right: 0
    left: 0
    height: 40px + $xpad + $xpad
    line-height: 40px
    text-align: center

  &
    opacity: 0
    transition: opacity 250ms linear
    pointer-events: none

  &.-expanded
    opacity: 1
    pointer-events: auto

  .left
    position: absolute
    left: 0
    top: 0
    text-align: left

  .right
    position: absolute
    right: 0
    top: 0
    text-align: right

  .iconlink
    position: relative
    display: inline-block
    vertical-align: middle
    height: 32px
    line-height: 1em
    color: rgba($slate, 0.75)
    transition: all 150ms linear
    padding: $xpad

  .iconlink:hover
    color: $accent

  .iconlink
    white-space: nowrap
    text-decoration: none

  .title, .label
    white-space: nowrap
    margin: 0 8px

    position: relative
    top: -4px

  // Tooltip
  .iconlink[data-title]:before
    content: attr(data-title)
    display: inline-block
    position: absolute
    bottom: -24px - $xpad
    right: $xpad
    font-size: 13px
    padding: 3px 10px
    background: rgba($black, 0.8)
    color: white
    border: solid 1px rgba($black, 0.2)
    border-radius: 2px
    text-decoration: none
    height: 22px
    line-height: 22px
    width: auto
    white-space: nowrap
    pointer-events: none
    opacity: 0
    transition: opacity 150ms linear, transform 150ms linear
    transform: translate3d(0, -8px, 0)

  .iconlink[data-title]:hover:before
    opacity: 1
    transform: translate3d(0, 0, 0)
    pointer-events: auto

  .icon:after
    font-size: 24px
    width: 32px
    height: 32px
    text-align: center

  .icon
    color: rgba($slate, 0.5)
    transition: color 150ms linear

  &.-expanded .icon
    color: $black

  .iconlink:hover .icon
    color: $accent

  // Icons
  .icon.-github:after
    ion-icon('social-github')

//
// Footer nav
//

.footer-nav
  &
    position: fixed
    bottom: 0
    right: 0
    left: 0
    border-top: solid 1px transparent
    background-color: rgba(white, 0)
    clearfix()

  &, a
    height: 24px + 16px + $xpad
    line-height: 24px

  a
    display: block
    white-space: nowrap
    text-overflow: ellipsis

  // Expanded: background
  &.-expanded
    background-color: rgba(white, 1)

    &:before
      content: ''
      position: absolute
      left: $xpad
      right: $xpad
      top: 0
      height: 1px
      background: $line

  // Layout
  .left
    position: absolute
    left: 0
    top: 0

  .right
    position: absolute
    right: 0
    top: 0
    text-align: right

  &.-expanded .right
    width: 60%

  // Title and labels
  .title,
  .label
    opacity: 0
    pointer-events: none

  // Fly the 'next: ___' from the left
  .right .title,
  .right .label
    transform: translate3d(-8px, 0, 0)

  .title,
  .label,
  a:before,
  a:after
    transition: all 250ms ease-in

  &.-expanded .title,
  &.-expanded .label
    opacity: 1
    transform: translate3d(0, 0, 0)
    pointer-events: auto

  // Link styles
  a
    text-decoration: none
    color: $slate
    padding: 16px $xpad $xpad $xpad

  .label,
  .left .title
    color: rgba($slate, 0.5)

  .right .title
    margin-right: 0.1em
    color: $black

  .left a:hover:before,
  .right a:hover:after
    color: $accent

  a:hover .title
    color: $accent

  .left a:before,
  .right a:after
    display: inline-block
    font-size: 20px
    vertical-align: middle
    position: relative
    top: -1px

  .left a:before
    ion-icon('chevron-left')
    margin-right: 16px

  .right a:after
    ion-icon('chevron-right')
    margin-left: 16px

//
// Desktop layout
//

@media (min-width: 960px)
  .doc-layout
    .menu
      width: $nav-width
      position: fixed
      top: 0
      left: 0
      height: 100%
      overflow-y: auto

    .body
      padding-top: $xpad + 40px
      padding-bottom: 64px + 64px
      transition: all 250ms ease-in

    .menu
      display: block
      transform: translate3d(-1 * $nav-width, 0, 0)
      transition: all 250ms ease-in

    .header-nav,
    .footer-nav
      transition: all 250ms ease-in
      left: $collapsed-nav-width

    .-menu-visible &
      .header-nav,
      .footer-nav
        left: $nav-width

      .body
        padding-left: $nav-width + $xpad
        padding-right: $xpad

      .menu
        transform: translate3d(0, 0, 0)

        // compensate for toggle button
        &:after
          content: ''
          display: block
          height: 64px