breadcrumb-the-shire/web/css/components/app-buttons.css

@layer components {
  /* Subtle 3D lift (inset top highlight + drop shadow) on filled
     action-intent buttons only — explicit opt-in via class so chrome
     buttons (topbar icons, aside icon bar, menu toggles) stay flat. */
  :where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
    .primary,
    .app-action-success,
    .app-action-danger,
    .danger
  ):not(.outline):not(.contrast) {
    box-shadow: var(--app-button-filled-shadow);
  }

  :where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
    .primary,
    .app-action-success,
    .app-action-danger,
    .danger
  ):not(.outline):not(.contrast):is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active
  ) {
    box-shadow: var(--app-button-filled-shadow-hover);
  }

  /* 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: color-mix(in srgb, var(--app-action-success-border) 10%, transparent);
  --app-border-color: var(--app-action-success-border);
  --app-color: var(--app-action-success-outline-color);
}

.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: color-mix(in srgb, var(--app-action-success-border) 22%, transparent);
  --app-border-color: var(--app-action-success-border);
  --app-color: var(--app-action-success-outline-color);
}

.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: color-mix(in srgb, var(--app-action-danger-border) 10%, transparent);
  --app-border-color: var(--app-action-danger-border);
  --app-color: var(--app-action-danger-outline-color);
}

.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: color-mix(in srgb, var(--app-action-danger-border) 22%, transparent);
  --app-border-color: var(--app-action-danger-border);
  --app-color: var(--app-action-danger-outline-color);
}

.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);
}
}