@import 'functions';
@import '../variables';

@mixin generate_alerts {
  @for $i from 1 through length($all_colors) {
    .is-alert {
      padding: variable("spacing");
    
      &.is-#{nth($all_colors, $i)} {
        background: variable(#{nth($all_colors, $i)});
        color: variable("white");
      
        &.is-outline {
          background: none;
          border: 2px solid variable(#{nth($all_colors, $i)});
          color: variable(#{nth($all_colors, $i)});
        }
      }
    }
    
    .is-alert.is-rounded {
      border-radius: 10rem;
    }
  }
}

@include generate_alerts;