// Example component
//
// A demonstration of how to start a file.
//
// .example--alt - A green variant of this style.
//
// Markup: example.hbs
//
// Style guide: components.example

.example,
%example {
  color: color('red');

  // Styles that are shared across multiple elements.
  &__base {
    margin: 0;
    font-style: italic;
  }

  &__title {
    @extend %example__base;
    font-weight: weight(bold);
  }

  &__content {
    @extend %example__base;
  }
}


// A variation of example with a different colour.
.example--alt,
%example--alt {
  @extend %example;
  color: color('green-dark');
}
