/***
 * Component
 *
 * An individual piece of the styleguide.
 *
 * html:
TODO
 */
.component {
  @include clearFix;
  position: relative;
  padding: $vr * 6 calc((100% - #{$max-width}) / 2);

  @for $i from 2 through 4 {
    &--depth-#{$i} {
      padding-top: max($vr * 2, $vr * (8 - $i * 2));
      padding-bottom: max($vr * 2, $vr * (8 - $i * 2));
    }
  }

  &__header {
    position: relative;
    margin: 0 0 $vr;
    // @include icon ('right-arrow');
    // &::before {
    //   @include h3;
    //   position: absolute;
    //   top: 50%; right: 100%;
    //   margin-right: $wr;
    //   transform: translateY(-50%);
    // }

    .file-path {
      position: absolute;
      right: 0;
      bottom: $vr * .5;
    }
  }

  &__sub-elements {
    > .component {
      padding-right: 0;
      padding-left: $wr * 2;
      margin: 0;
      &:last-child {
        padding-bottom: 0;
      }
    }
  }

  &--depth-1 {
    border-top: 1px solid $border-html;
  }

  // &--depth-1 > .component__header::before {
  //   @include h1;
  // }
  //
  // &--title-colors, &--color {
  //   > .component__header {
  //     @include icon ('colors');
  //   }
  // }
  // &--title-fonts, &--font {
  //   > .component__header {
  //     @include icon ('fonts');
  //   }
  // }
  // &--title-quarks {
  //   > .component__header {
  //     @include icon ('quarks');
  //   }
  // }
  // &--title-atoms {
  //   > .component__header {
  //     @include icon ('atoms');
  //   }
  // }
  // &--title-molecules {
  //   > .component__header {
  //     @include icon ('molecules');
  //   }
  // }
  // &--title-organisms {
  //   > .component__header {
  //     @include icon ('organisms');
  //   }
  // }
  // &--title-settings {
  //   > .component__header {
  //     @include icon ('settings');
  //   }
  // }
  // &--title-utilities {
  //   > .component__header {
  //     @include icon ('utilities');
  //   }
  // }
  // &--html {
  //   > .component__header {
  //     @include icon ('html');
  //   }
  // }
  // &--code {
  //   > .component__header {
  //     @include icon ('code');
  //   }
  // }
}