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

@import ../mixins/helpers

body.survival-kit
  header
    h1
      +adjust-font-size-to(ms(6))
    h2
      +adjust-font-size-to(ms(5))
  h1.section-title
    +adjust-font-size-to(ms(4))
    background-color: $lightgray
    text-transform: uppercase
    padding-left: $kit-gutter-half
    a
      +link-colors($black, $alt-color, $alt-color, $black, false)
      +better-links($black, $alt-color, $alt-color, $black, false)
  article.element
    +vertical-separation($kit-baseline * 2, 1px, transparentize($base-color, 0.9))
    h2.element-title
      +adjust-font-size-to(ms(0))
      background-color: $gray
      color: $white
      text-transform: uppercase
      padding-left: $kit-gutter-half
      a
        +link-colors($white, $alt-color, $alt-color, $white, false)
        +better-links($white, $alt-color, $alt-color, $white, false)
    .example
      +vertical-separation($kit-baseline, 1px, transparentize($base-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