@layer components {
  /* Action button variants — success and danger colors with outline and focus states. */
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
  --app-background-color: var(--app-action-success-background);
  --app-border-color: var(--app-action-success-border);
  --app-color: var(--app-action-success-color);
}

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

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

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

.app-action-success: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-action-success-focus-color);
}

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

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

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

.danger:is(
    button,
    [type="submit"],
    [type="button"],
    [role="button"]
  ).outline:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
.app-action-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-action-danger-outline-background);
  --app-border-color: var(--app-action-danger-border);
  --app-color: var(--app-action-danger-border);
}

.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,
.app-action-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-action-danger-focus-color);
}
}