*
  box-sizing border-box

::placeholder
  color var(--tonic-medium)

@font-face
  font-family Avenir-Light
  src url("/fonts/Avenir-Light.ttf")

@font-face
  font-family Avenir-Book
  src url("/fonts/Avenir-Book.ttf")

@font-face
  font-family Avenir-Medium
  src url("/fonts/Avenir-Medium.ttf")

@font-face
  font-family Avenir-Heavy
  src url("/fonts/Avenir-Heavy.ttf")

@font-face
  font-family 'Source Code Pro'
  src url("/fonts/SourceCodePro-Regular.ttf")

@require '../../src/**/*.styl'
@require './hl.styl'

body
  text-rendering optimizeLegibility
  font-smoothing antialiased
  font-feature-settings "kern"
  font-variant-ligatures common-ligatures
  font-kerning normal
  font-weight normal
  color var(--tonic-primary)
  font-family var(--tonic-body)
  margin 0
  background-color var(--tonic-window)

  &[data-group="custom"]
    [data-group="component"]
      display none
    [data-group="custom"]
      display block

  [data-group="custom"]
    display none
  [data-group="component"]
    display block

  &[data-page="docs"]
    #intro
      padding-top 100px

      h1
        display none

blockquote
  border-left 4px solid var(--tonic-info)
  padding-left 14px
  font-style italic
  line-height 20px
  font-size 14px
  margin 10px
  color var(--tonic-info)
  display inline-block

p
  font 18px/32px var(--tonic-body)

h1, h2, h3, h4, h5
  font-weight normal
  margin 20px 0

h1
  font 48px/56px var(--tonic-header)
  padding 60px 0 20px 0
  @media (max-width: 850px)
    font 36px/45px var(--tonic-header)
    padding 20px 0 20px 0

h2
  font 14px/16px var(--tonic-subheader)
  font-weight 600
  text-transform uppercase
  letter-spacing 1.5px
  border-top 2px solid var(--tonic-primary)
  padding-top 20px
  margin 50px 0

h3
  font 26px/30px var(--tonic-header)
  margin-top 60px
  margin-bottom 30px

h4
  font 14px/16px var(--tonic-subheader)
  font-weight 400
  text-transform uppercase
  letter-spacing 1.5px
  margin-top 40px

hr
  height 2px
  margin 20px 0px
  background-color transparent
  border 0

a
  color inherit
  text-decoration none
  transition color 0.2s ease-in-out, border 0.2s ease-in-out

  &:visited
    color inherit

body
  .theme-picker
    width 80px
    text-align right
    position absolute
    top 30px
    right 30px
    z-index 99

    svg
      width 18px
      height 18px
      margin auto
      transition opacity 0.2s ease
      opacity 0.5
      cursor pointer
      use
        fill var(--tonic-primary)
        color var(--tonic-primary)
      &:hover
        opacity 1

  > main
    ul
      font 15px/30px var(--tonic-body)
      list-style disc
      padding 0
      padding-left 40px
      margin 30px 0
      @media (max-width: 850px)
        padding-left 20px
        margin 10px 0

      li
        margin 10px 0

  > nav
    width 300px
    padding 50px
    position fixed
    top 0
    left 0
    bottom 0
    overflow scroll
    overflow-x hidden
    border-right 1px solid var(--tonic-border)
    @media (max-width: 850px)
      display none

    .page-selection
      font 13px var(--tonic-subheader)
      text-transform uppercase
      letter-spacing 1px
      padding 20px 0 0 0
      margin-bottom 50px

      a
        display inline-block
        padding 0px 0px 5px 0px
        border-bottom 1px solid transparent

        &:first-of-type
          margin-right 15px

        &.active,
        &:hover
          border-bottom 1px solid var(--tonic-primary)

    ul
      list-style none
      padding 0
      margin-left -10px

    li
      margin 20px 0
      a
        font 17px var(--tonic-header)
        font-weight 400
        padding 5px 8px
        background-color transparent
        border-radius 3px
        transition background-color 0.2s ease
        &:hover
          color var(--tonic-accent)
        &.selected
          color var(--tonic-accent)

    a.logo
      display inline-block
      margin-bottom 10px

      svg
        width 150px
        use
          fill var(--tonic-primary)
          color var(--tonic-primary)

  > main
    padding 0 60px 60px 60px
    position absolute
    top 0
    left 300px
    right 0
    bottom 0
    overflow scroll
    @media (max-width: 850px)
      position relative
      left 0
      padding 30px

    .logo
      margin-bottom 50px
      display none
      @media (max-width: 850px)
        display flex
        justify-content center

    a
      border-bottom 1px solid var(--tonic-border)
      &:hover
        color var(--tonic-accent)
        border-bottom-color var(--tonic-accent)

    .hero
      margin-top 0
      @media (max-width: 850px)
        margin-bottom 100px

      .label
        margin auto
        text-align center
        margin-bottom 50px
        font-style italic
        letter-spacing 1px
        font-size 14px

        a
          border none

    .tooltip
      padding 10px
      h3
        margin 0
      p
        margin 4px 0
        font-size 12px
        line-height 18px

    span.req
      color var(--tonic-danger)
      font-style italic
      display block
      float right

    div.example
      width 100%
      border 1px solid var(--tonic-border)
      .header
        font 13px/16px var(--tonic-subheader)
        font-weight 400
        text-transform uppercase
        letter-spacing 1px
        padding 12px 10px 9px 10px
        background-color var(--tonic-background)
        border-bottom 1px solid var(--tonic-border)
      .content
        max-width 450px
        padding 15px
      @media (max-width: 850px)
        & ~ h2,
        & ~ h3,
        & ~ h4,
        & ~ p,
        & ~ code,
        & ~ pre,
        & ~ table
          display none

    table
      width 100%
      text-align left
      margin-bottom 15px
      border-collapse collapse
      border 1px solid var(--tonic-border)

    th
      font 13px/16px var(--tonic-subheader)
      font-weight 400
      text-transform uppercase
      letter-spacing 1px
      padding 12px 10px 9px 10px
      background-color var(--tonic-background)
      border-bottom 1px solid var(--tonic-border)
      border-right 1px solid var(--tonic-border)

    td
      line-height 22px
      padding 15px
      border-bottom 1px solid var(--tonic-border)

    td:not(:first-of-type)
      border-left 1px solid var(--tonic-border)

    tr:last-of-type td
      border-bottom 0

    td:last-of-type
      border-right 0

    pre
      font-family 'Source Code Pro'
      padding 15px
      overflow scroll
      white-space pre-line
      border-radius 3px
      border 1px solid var(--tonic-border)
      background-color var(--tonic-background)

      code
        border 0
        padding 0
        white-space pre
        overflow scroll

        i
          color #999

    code
      font 16px/22px 'Source Code Pro'
      padding 2px 6px 3px 6px
      margin 0 2px
      white-space nowrap
      background-color var(--tonic-background)
      border 1px solid var(--tonic-border)
      border-radius 3px

    > section
      max-width 800px
      padding-bottom 60px

    > footer
      max-width 800px
      text-align center
      padding 20px 50px 50px 50px

      > div
        border-bottom 0
        display inline-block
        vertical-align middle
        &:first-of-type
          border-right 1px solid var(--tonic-border)
          padding-right 40px
          margin-right 40px
          @media (max-width: 850px)
            border 0
            padding-right 0
            margin-right 0
            margin-bottom 50px

        &:not(:first-of-type)
          span, svg
            display inline-block
            margin-right 10px
            vertical-align middle
          svg
            width 130px
            height 50px

        &:hover
          span
            color var(--tonic-primary)
          svg
            use
              fill var(--tonic-primary)
              color var(--tonic-primary)

      span
        color var(--tonic-medium)
        font 13px var(--tonic-subheader)
        font-weight 600
        text-transform uppercase
        letter-spacing 2px
        display inline-block
        transition all 0.2s ease-in-out

      svg
        height 30px
        width 175px
        margin 0 auto
        display block
        use
          fill var(--tonic-medium)
          color var(--tonic-medium)
          transition all 0.2s ease-in-out

  .invalidate-buttons
    text-align center
    margin-top 10px

  .mobile-nav
    display none
    position absolute
    top 30px
    left 30px
    @media (max-width: 850px)
      display block

  .mobile-nav, .github
    font 13px var(--tonic-subheader)
    text-transform uppercase
    letter-spacing 1px
    margin-bottom 50px
    padding 0

    a
      display inline-block
      margin-right 17px
      padding 0px 0px 5px 0px
      border-bottom 1px solid var(--tonic-border)
      &:first-of-type
        margin-right 15px
      &.active,
      &:hover
        border-bottom-color var(--tonic-primary)

  .component-github-link
    position absolute
    margin-top 30px
    margin-left 4px

    @media (max-width: 850px)
      margin-top -10px
      margin-left 2px

    a
      display inline-block
      text-transform uppercase
      font-size 12px
      border 1px solid
      padding 2px 4px
      display inline-block

  section#intro
    padding-top 30px

    .tonic-icon
      svg
        width 115px
        margin 0 auto
        display block
        use
          fill var(--tonic-primary)
          color var(--tonic-primary)

    .github
      position absolute
      top -12px
      right 35px
      color var(--tonic-info)
      margin-top 40px

      img
        vertical-align middle

    .status
      width 210px
      font 12px var(--tonic-subheader)
      text-transform uppercase
      display flex
      justify-content space-around
      margin 0px auto

      &:before
        content attr(data-before)
        color var(--tonic-medium)
        text-align center
        letter-spacing 1px
        padding 4px 8px
        display inline-block

      &:after
        content attr(data-after)
        color white
        letter-spacing 1px
        padding 4px 8px
        display inline-block
        background-color var(--tonic-accent)

    .logo svg
      width 200px
      use
        fill var(--tonic-primary)
        color var(--tonic-primary)

    p:not(.intro-copy)
      font-size 17px
      line-height 28px

    .col
      width 50%
      padding 10px 0
      padding-right 30px
      display table-cell
      @media (max-width: 850px)
        width 100%
        padding 0
        display block

      li
        font-size 18px

    tonic-button
      text-align center
      margin 50px 0
      display block

    span.first-word
      color var(--tonic-primary)

    p.intro-copy
      color var(--tonic-medium)
      max-width 670px
      font 30px var(--tonic-header)
      text-align center
      margin 0 auto
      @media (max-width: 850px)
        font 26px var(--tonic-header)

  content-tooltip
    pre
      margin 0

    span.code-type
      font 12px var(--tonic-subheader)
      text-transform uppercase
      text-align center
      letter-spacing 1px
      display block
      padding 5px

  content-dialog
    header
      text-align center
      height 70px
      font 14px var(--tonic-subheader)
      text-transform uppercase
      letter-spacing 1.5px
      position absolute
      top 0
      left 0
      right 0
      padding 26px 65px 25px 65px

    main
      width auto
      text-align center
      padding 20px
      margin 0 auto
      height 100px

    footer
      height 75px
      text-align center
      position absolute
      bottom 0
      left 0
      right 0
      padding 12px
      display flex
      justify-content center

  content-tags
    [data-tab-group]
      height 40px

  notification-badge
    display inline-block
    user-select none

  .button-group
    display inline-block
    margin-left 15px

    span
      display inline-block
      margin-left 15px
      border-bottom 1px solid var(--tonic-border)
      user-select none
      cursor pointer

      &:hover
        border-bottom-color var(--tonic-accent)

  #progressbar
    @media (max-width: 850px)
      .button-group
        margin-left -15px
        margin-top 20px
        text-align center
        display block