// styles meant to assist while designing markup conventions
// in elements.html, elements-drupal.html

@import ../mixins/helpers

$kit-font-family: futura, $font-sans

$sk-lightgray: mix($lightgray, $c-primary, 90%)
$sk-gray: mix($gray, $c-primary, 90%)
$sk-darkgray: mix($darkgray, $c-primary, 90%)

body.survival-kit
  #page
    > header
      background: $sk-lightgray
      font-family: $kit-font-family
      padding: 0 0.5em
      margin-bottom: 0
      a
        +link-colors($white, $sk-darkgray, $sk-darkgray, $white)
        +underline-links($white, $sk-darkgray, $sk-darkgray, $white)
      hgroup
        @extend .clearfix
      h1
        +adjust-font-size-to(ms(1))
        float: left
        padding-right: $kit-gutter
        margin-right: $kit-gutter
        border-right: 1px solid white
        font-family: $kit-font-family
        a
          +remove-link-underlines
          +replace-text-with-dimensions('survival-kit-logo.png')
          display: block
          padding: 0.3em
      h2
        +adjust-font-size-to(ms(2))
        margin-top: 0
        font-family: $kit-font-family
      .intro
        margin-left: calc-em(265px, $base-font-size)
  h1.section-title
    +adjust-font-size-to(ms(3))
    background-color: $sk-lightgray
    text-transform: uppercase
    padding-left: $kit-gutter-half
    margin-top: 0
    a
      +link-colors($black, $alt-color, $alt-color, $black, false)
      +underline-links($black, $alt-color, $alt-color, $black, false)
  .back-to-top
    +remove-link-underlines
    float: right
    font-size: 10px
  h1.section-title .fold-section, h2.element-title .fold-article
  .kit-nav, .section-nav
    +trailer
    padding: 0 0.5em
    font-family: $kit-font-family
    color: $sk-lightgray
    #{headings()}
      font-size: $base-font-size
    a
      +link-colors($white, $alt-color, $alt-color, $white)
      +underline-links($white, $alt-color, $alt-color, $white)
    ul
      +horizontal-list(0.5em)
  .kit-nav
    background: shade($sk-gray, 20%)
  .section-nav
    background: $sk-gray
    margin-top: calc-em(-24px, $base-font-size)
    margin-bottom: 0
    h3
      color: shade($sk-gray, 40%)
      +adjust-font-size-to($base-font-size - 2)
    h4
      float: left
      margin-right: 0.5em
      margin-top: 0
      margin-bottom: 0
  div.element
    +vertical-separation($kit-baseline * 2, 1px, transparentize($border-color, 0.9))
    &.closed
      +un-vertical-separation
    h2.element-title
      +adjust-font-size-to(ms(0))
      background-color: $sk-gray
      color: $white
      text-transform: uppercase
      padding-left: $kit-gutter-half
      a
        +link-colors($white, $alt-color, $alt-color, $white, false)
        +underline-links($white, $alt-color, $alt-color, $white, false)
    .example
      +vertical-separation($kit-baseline, 1px, transparentize($border-color, 0.9), dashed)
      +pie-clearfix
      .markup
        // +columns(4)
        display: inline
        float: left
        width: 64.228%
        margin-right: 2.439%
        & + .show-source
          // +columns(2)
          // +omega(6)
          display: inline
          float: right
          width: 30.894%
          margin-right: 0
          // margin-left: -24px
          @extend .mono
          .show-hide
            text-align: right
          & + p
            clear: both