$styleguide-block-padding: $gutter-width*2;
$styleguide-separator-color: $c-bggrey;
$styleguide-block-border-color: $c-bordergrey;

.styleguide {
  &__hero {
    padding: 2em $gutter-width / 2;
    margin-right: - $gutter-width / 2;
    margin-left: - $gutter-width/2;
    color: #fff;
    background-color: $c-navy;

    @include respond-to($sidebar-breakpoint, true) {
      padding: 2em $gutter-width/2;
    }

    @include respond-to(desktop, true) {
      padding-left: $gutter-width;
      margin-left: - $gutter-width/2;
    }
  }

  &__hero-heading {
    margin-bottom: 0;
  }

  &__block {
    @extend %clearfix;
    position: relative;
    padding-bottom: $styleguide-block-padding / 1.5;
    border-bottom: 1px solid $styleguide-separator-color;

    + .styleguide__block {
      padding-top: $styleguide-block-padding / 2;
    }
  }

  &__header {
    padding-top: $styleguide-block-padding/2;
    padding-bottom: $styleguide-block-padding/2;

    @include respond-to(tablet, true) {
      padding-top: $styleguide-block-padding/2;
    }
  }

  &__title {
    margin-top: 1em;
    margin-bottom: 1em;
    color: $c-navy;
  }

  &__description {
    color: $c-typegrey-2;
  }

  &__content {
    padding-top: $gutter-width;

    @include respond-to(desktop, true) {
      &--w-sidebar {
        border-right: 1px solid $c-keylinegrey;
      }
    }
  }

  &__file-link {
    @include link-colors($c-typegrey, $c-typecyan);
    display: inline-block;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    vertical-align: middle;
    background-color: $c-bggrey;
    border-radius: 2px;
  }

  &__block-title {
    position: relative;
    margin-bottom: $gutter-width/2;
    color: $c-navy;
  }

  &__block-small-title {
    padding: $gutter-width/2 $gutter-width/2 0 $gutter-width/2;
    margin-bottom: 0;
    font-size: 1.125em;
    color: $c-typegrey-2;
    text-transform: uppercase;
  }

  &__block-examples {
    border: 1px solid $styleguide-block-border-color;
    border-radius: 3px;
  }

  &__block-example {
    @extend %clearfix;
    position: relative;
    padding: $gutter-width $gutter-width/2;

    + &__block-example {
      border-top: 1px dashed darken($styleguide-separator-color, 10%);
    }
  }

  &__block-example-class {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 8px;
    font-size: .85em;
    color: $c-typegrey;
    background-color: $c-bggrey;
  }

  &__block-states {
    padding-left: 0;
    margin-top: 0;
    color: lighten($c-typegrey, 10%);
    list-style: none;

    li:before {
      display: inline-block;
      margin: 0 .35em;
      font-size: 1.4em;
      font-weight: normal;
      color: $c-bordergrey;
      content: "\203A";
    }
  }
}