[data-fui-comp="ui-toggle-action"] {
  /* Inherits .ui-button base; override only what the toggle flip needs. */
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}
/* Committed state — success tone signals "active". */
[data-fui-comp="ui-toggle-action"][data-state="committed"] {
  background: var(--color-success, #16A34A);
  color: var(--color-primary-fg, #FFFFFF);
  border-color: var(--color-success, #16A34A);
}
/* Pending — same look as committed (optimistic) plus a busy cursor
   while the RPC is in flight. The runtime also sets aria-busy +
   disabled during this window. */
[data-fui-comp="ui-toggle-action"][data-state="pending"] {
  cursor: progress;
  background: var(--color-success, #16A34A);
  color: var(--color-primary-fg, #FFFFFF);
  border-color: var(--color-success, #16A34A);
}