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

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

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

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