@use '@angular/cdk';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;

$_tokens: tokens-mtx-colorpicker.$prefix, tokens-mtx-colorpicker.get-token-slots();

// 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;

  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(color, toggle-icon-color);
  }
}

.mtx-colorpicker-toggle-active {
  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(color, toggle-active-state-icon-color);
  }
}

@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;
  }
}