@import 'init';

// This file is used to add styles to the style guide and is not included in
// the Drupal site. It gets included by the style guide by adding it to the
// options.styleGuide.css object in gulpfile.js.

// Add an outline to every grid item in the style guide.
[id^="kssref-layouts-"] [class^="layout-"][class*="__"] {
  outline: 1px dotted color(grey-medium);
}

.wrap-demo {
  padding: 20px;

  @include respond-to('medium') {
    background-color: color(link);
  }
}

.demo-bg {
  padding-top: 60px;
  background: color(link);
  position: relative;

  @include respond-to('medium') {
    background: none;
    padding: 0;
  }
}
