@use '@angular/cdk';
@use '../core/tokens/token-utils';
@use './m3-colorpicker';

$fallbacks: m3-colorpicker.get-tokens();

// We support the case where the form field is disabled, but the colorpicker is not.
// MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
.mtx-colorpicker-toggle {
  pointer-events: auto;
  color: token-utils.slot(colorpicker-toggle-icon-color, $fallbacks);
}

.mtx-colorpicker-toggle-active {
  color: token-utils.slot(colorpicker-toggle-active-state-icon-color, $fallbacks);
}

@include cdk.high-contrast(active, off) {
  .mtx-colorpicker-toggle-default-icon {
    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
    color: CanvasText;
  }
}