/* ==========================================================================
   Alerts
   ========================================================================== */

%alert {
  @include border-radius($roundness);
  @extend  %islet;
}

@mixin alert($color: $alert-color) {
  @extend %alert;
  $background-color: mix($color, $white, 10%);
  $border-color:     mix($color, $background-color, 10%);
  color:             $color;
  background-color:  $background-color;
  border:            1px solid $border-color
}

.alert         { @include alert(); }
.alert-error   { @include alert($error-color); }
.alert-info    { @include alert($info-color); }
.alert-success { @include alert($success-color); }
.alert-warning { @include alert($warning-color); }

/* ==========================================================================
   Alerts
   ========================================================================== */

%alert {
  @include border-radius($roundness);
  @extend  %islet;
}

@mixin alert($color: $alert-color) {
  @extend %alert;
  $alert-background-color: mix($color, $white, 10%);
  $alert-border-color:     mix($color, $alert-background-color, 10%);
  color:                   $color;
  background-color:        $alert-background-color;
  border:                  1px solid $alert-border-color
}

.alert         { @include alert(); }
.alert-error   { @include alert($error-color); }
.alert-info    { @include alert($info-color); }
.alert-success { @include alert($success-color); }
.alert-warning { @include alert($warning-color); }

Tweak local variables so they don't interfere with global ones
Tweak local variables so they don't interfere with global ones
