// Name:            Example
//
// Component:       `example`
//
//
// ========================================================================

// Variables
// ========================================================================

$example-title-text-shadow:     $color-white !default;
$example-title-span-color:      #ED5565 !default;

$example-typography-note-color: #AAB2BD !default;
$example-well-bg:               #f3f7f9 !default;

// Modifier: `example-well`
// ========================================================================

.example-well {
  background-color: $example-well-bg;
}

// Modifier: `example-grid`
// ========================================================================

.example-grid .example-col, .example-blocks .example-col {
  background-color: $example-well-bg;
}

.example-grid .example-col .example-col {
  background-color: darken($example-well-bg, 5%);
}

// Modifier: `example-box`
// ========================================================================

.example-box {
  border: 1px solid $border-color-base;
}

// Modifier: `example-typography`
// ========================================================================

.example-typography {

  .heading-note,
  .text-note {
    color: $example-typography-note-color;
  }
}