@layer components {
.danger:is(button, [type="submit"], [type="button"], [role="button"]) {
  --app-background-color: var(--app-notice-error-border-color);
  --app-border-color: var(--app-notice-error-border-color);
  --app-color: var(--app-secondary-inverse);
}

.danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  --app-background-color: var(--app-form-element-invalid-active-border-color);
  --app-border-color: var(--app-form-element-invalid-active-border-color);
  --app-color: var(--app-secondary-inverse);
}

.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
  --app-background-color: transparent;
  --app-border-color: var(--app-notice-error-border-color);
  --app-color: var(--app-notice-error-border-color);
}

.danger:is(
    button,
    [type="submit"],
    [type="button"],
    [role="button"]
  ).outline:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  --app-background-color: var(--app-notice-error-background-color);
  --app-border-color: var(--app-notice-error-border-color);
  --app-color: var(--app-notice-error-border-color);
}

.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
  --app-box-shadow:
    var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--app-outline-width) var(--app-form-element-invalid-focus-color);
}
}