// Color
$theme-colors: $bz-theme-100 $bz-theme-200 $bz-theme-300 $bz-theme-400 $bz-theme-500 $bz-theme-600;
$neutral-colors: $bz-neutral-100 $bz-neutral-200 $bz-neutral-300 $bz-neutral-400 $bz-neutral-500 $bz-neutral-600;

@mixin bz-color($name, $list) {
  @each $color in $list {
    $i: index($list, $color);
    .bz-color--#{$name}-#{$i}00 {
      color: $color;
    }
    .bz-color-border--#{$name}-#{$i}00 {
      border-color: $color;
    }
    .bz-color-bg--#{$name}-#{$i}00 {
      background-color: $color;
    }
  }
}

@include bz-color('theme', $theme-colors);
@include bz-color('neutral', $neutral-colors);
.bz-color {

  &--success {
    background-color: $bz-color-state-success;
  }

  &--warning {
    background-color: $bz-color-state-warning;
  }

  &--error {
    background-color: $bz-color-state-error;
  }

  &--info {
    background-color: $bz-color-state-info;
  }
}

.bz-border-color {
  &--warning {
    border-color: $bz-color-state-warning;
  }
}

.bz-icon-color {

  &--warning {
    svg {
      fill: $bz-color-state-warning;
    }
  }

  &--error {
    svg {
      fill: $bz-color-state-error;
    }
  }

  &--info {
    svg{
      fill: $bz-color-state-info;
    }
  }

}