@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 {
  display: block;
}

.demo-bg {
  @include padding-top(4);
  background: color('black');
  position: relative;

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