// Styles needed to properly explain the helper classes

.example-box {
  min-height: 50px;
  border: 1px dashed $gray;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 6px;
}

.example-box-small {
  display: inline-block;
  text-align: center;
  padding: 6px;
}

.example-list li {
  padding: 5px;
  background-color: $gray-medium;
}

$colors: (
  red: $red,
  blue: $blue,
  blue-toggle: $blue-toggle,
  blue-hover-light: $blue-hover-light,
  blue-input-focus: $blue-input-focus,
  'black': $black,
  gray: $gray,
  gray-label-light: $gray-label-light,
  gray-light: $gray-light,
  gray-medium: $gray-medium,
  gray-light-background: $gray-light-background,
  gray-form-background: $gray-form-background,
  gray-placeholder: $gray-placeholder,
  gray-input-border: $gray-input-border,
  white: $white,
  purple: $purple
);

@each $name, $value in $colors {
  .color-#{$name} {
    background-color: $value;
  }
}