/***
 *  Section
 *
 *  The main sections of the guide.  Modifiers would define variations.
 *
 *  html:
 *    <section class="section {{ modifier }}">
 *      <div class="section__inner">
 *        <header class="section__header">
 *          <h4>This is a Section</h4>
 *        </header>
 *        <div class="section__description"><p>The info here is <em>super</em> important!</p></div>
 *      </div>
 *    </section>
 *
 *  wrap: [style="background: #a99"]
 */
$icons:
  'colors',
  'fonts',
  'quarks',
  'atoms',
  'molecules',
  'organisms',
  'settings',
  'utilities',
  'menu',
  'phone',
  'table',
  'desktop'
;

.section {
  @include clearFix();
  margin: $vr * 8 auto;
  position: relative;
  overflow: hidden;

  &--depth-1 {
    margin-top: $vr * 12;
  }
}

.section__inner {
  @include gridContainer;
  padding: 0 $wr;
  margin: 0 auto;
  box-sizing: border-box;

  @for $depth from 2 through 5 {
    .section--depth-#{$depth} & {
      padding-left: $wr * ($depth);
    }
  }
}

.section__sub-elements {
  position: relative;
  padding-top: $vr * 4;
  margin-top: $vr * 2;
  &::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; //left: 50%;
    margin: 0 auto;
    width: $max-width;
    max-width: 100%;
    border-left: 1px solid $border-html;
    transform: translateX(-50%);
    pointer-events: none;
  }
  > .section:first-child {
    margin-top: 0;
  }
  > .section:last-child {
    margin-bottom: 0;
  }
  .section__title::before {
    display: none;
  }

  @for $depth from 1 through 5 {
    .section--depth-#{$depth} &::before {
      left: calc(50% + #{$wr * ($depth - 1)});
    }
  }
}

.section__title {
  position: relative;
  &::before {
    position: absolute;
    right: 100%; top: 0;
    vertical-align: top;
    margin-right: $wr;
  }
  @include icon('menu');
}
@each $i in $icons {
  .section__title--#{$i} {
    @include icon($i);
  }
}