@import "../vendor/bootstrap/scss/alert";

.alert-heading {
  @extend .h3;
}

.alert {
  @extend %text-md-regular;

  .alert-icon {
    margin-right: $alert-padding-x;

    .material-icons-round {
      font-size: $alert-icon-size;
      height: $alert-icon-size;
    }
  }
}

@each $state, $value in $alert-theme-colors {
  .alert-#{$state} {
    --#{$prefix}alert-color: #{$gray-800};
    --#{$prefix}alert-bg: #{$gray-100};
    --#{$prefix}alert-border-color: #{$value};

    .alert-icon { color: $value; }
  }

  .theme-backend { .alert-#{$state} { background-color: $white; } }
}