@scope (toggle-scheme-ui) {
  :where(:scope) {
    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
  }

  :scope {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }

  :scope[disabled] {
    pointer-events: none;
  }

  :scope > [part="button"] {
    transition: color var(--toggle-scheme-icon-transition);
  }
}
