html {
  --bz-action-spinner-track: color-mix(in srgb, currentColor 20%, transparent);
  --bz-action-spinner-stroke: color-mix(in srgb, var(--brand-400, #60a5fa) 84%, currentColor 16%);
  --bz-action-spinner-size: 1em;
  --bz-action-spinner-border: 2px;
}

html[data-theme="light"] {
  --bz-action-spinner-track: color-mix(in srgb, currentColor 18%, transparent);
  --bz-action-spinner-stroke: color-mix(in srgb, var(--brand-500, #1a4fd8) 86%, currentColor 14%);
}

html[data-theme="dark"] {
  --bz-action-spinner-track: color-mix(in srgb, currentColor 24%, transparent);
  --bz-action-spinner-stroke: color-mix(in srgb, var(--brand-400, #60a5fa) 88%, #ffffff 12%);
}

:is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a.button,
  a[role="button"],
  .button,
  .ops-button,
  .ops-button-muted,
  .ops-button-secondary,
  .ui-button,
  .ui-confirm-button,
  .cta-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdq-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pds-button,
  .chat-button,
  .catalog-small-button,
  .catalog-danger-button,
  .commerce-primary-action,
  .commerce-secondary-action,
  .industrial-btn,
  a[hx-get],
  a[hx-post],
  a[hx-put],
  a[hx-patch],
  a[hx-delete],
  a[data-hx-get],
  a[data-hx-post],
  a[data-hx-put],
  a[data-hx-patch],
  a[data-hx-delete],
  a[class*="action"],
  a[class*="btn"],
  a[class*="cta"],
  [data-action-loading]
).bz-action-loading {
  cursor: progress;
}

:is(button, a.button, a[role="button"], .button, .ops-button, .ops-button-muted, .ops-button-secondary, .ui-button, .ui-confirm-button, .cta-button, .pd-solid-button, .pd-outline-button, .pdq-button, .pdr-solid-button, .pdr-outline-button, .pds-button, .chat-button, .catalog-small-button, .catalog-danger-button, .commerce-primary-action, .commerce-secondary-action, .industrial-btn, a[hx-get], a[hx-post], a[hx-put], a[hx-patch], a[hx-delete], a[data-hx-get], a[data-hx-post], a[data-hx-put], a[data-hx-patch], a[data-hx-delete], a[class*="action"], a[class*="btn"], a[class*="cta"], [data-action-loading]).bz-action-loading:not([data-bz-action-button])::before {
  content: "";
  display: inline-block;
  width: var(--bz-action-spinner-size);
  height: var(--bz-action-spinner-size);
  margin-inline-end: 0.5rem;
  border: var(--bz-action-spinner-border) solid var(--bz-action-spinner-track);
  border-block-start-color: var(--bz-action-spinner-stroke);
  border-radius: 999px;
  vertical-align: -0.16em;
  animation: bzActionLoadingSpin 720ms linear infinite;
}

:is(
  .button--primary,
  .ops-button,
  .ui-button-primary,
  .ui-confirm-button--confirm,
  .cta-button:not(.cta-button-secondary),
  .pd-solid-button,
  .pdr-solid-button,
  .commerce-primary-action
).bz-action-loading {
  --bz-action-spinner-track: rgba(255, 255, 255, 0.32);
  --bz-action-spinner-stroke: #ffffff;
}

:is(
  .button--danger,
  .catalog-danger-button,
  .ui-button-danger,
  .ops-button-danger
).bz-action-loading {
  --bz-action-spinner-stroke: var(--danger, #ef4444);
}

button.bz-action-loading:disabled,
input.bz-action-loading:disabled {
  cursor: progress;
  opacity: 0.86;
}

a.bz-action-loading[aria-disabled="true"] {
  pointer-events: none;
}

@keyframes bzActionLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, a.button, a[role="button"], .button, .ops-button, .ops-button-muted, .ops-button-secondary, .ui-button, .ui-confirm-button, .cta-button, .pd-solid-button, .pd-outline-button, .pdq-button, .pdr-solid-button, .pdr-outline-button, .pds-button, .chat-button, .catalog-small-button, .catalog-danger-button, .commerce-primary-action, .commerce-secondary-action, .industrial-btn, a[hx-get], a[hx-post], a[hx-put], a[hx-patch], a[hx-delete], a[data-hx-get], a[data-hx-post], a[data-hx-put], a[data-hx-patch], a[data-hx-delete], a[class*="action"], a[class*="btn"], a[class*="cta"], [data-action-loading]).bz-action-loading:not([data-bz-action-button])::before {
    animation-duration: 1.6s;
  }
}