@mixin alert() {
  $alert: settings($settings, "define.alert.class");
  #{$alert} {
    padding: value(space);
    border-radius: value(border-radius);
    background-color: value(alert-background-color, value(accent));
    color: value(alert-text-color, currentColor);

    &--success {
      --alert-background-color: #{value(green-80)};
      --alert-text-color: #{value(green-20)};
    }
    &--warning {
      --alert-background-color: #{value(orange-80)};
      --alert-text-color: #{value(orange-20)};
    }
    &--error {
      --alert-background-color: #{value(red-80)};
      --alert-text-color: #{value(red-20)};
    }
    &--tip {
      --alert-background-color: #{value(blue-80)};
      --alert-text-color: #{value(blue-20)};
    }
  }
}