.alert {
  position: relative;
  display: flex;

  i {
    margin-top: $spacer * .25;
    margin-right: $spacer * .5;
    font-size: $font-size-base;
  }
}

@each $state, $value in $theme-colors {
  $alert-border: var(--#{$prefix}#{$state}-border-subtle);
  $alert-color: var(--#{$prefix}#{$state}-text-emphasis);
  $alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
  @if $state == "danger" {
    $alert-bg: $danger-25;
  } @else if $state == "success" {
    $alert-bg: $success-50;
  }

  .alert-#{$state} {
    --#{$prefix}alert-color: #{$alert-color};
    --#{$prefix}alert-bg: #{$alert-bg};
    --#{$prefix}alert-border-color: #{$alert-border};
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}