//
// Copyright 2026 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

@mixin root {
  // LINT.IfChange
  --handle-color: var(--md-sys-color-outline);
  --handle-size: 16px;
  --with-icon-handle-size: 24px;
  --icon-color: var(--md-sys-color-surface-container-highest);
  --icon-size: 18px;
  --state-layer-color: var(--md-sys-color-on-surface);
  --state-layer-size: 40px;
  --track-color: var(--md-sys-color-surface-container-highest);
  --track-height: 32px;
  --track-outline-color: var(--md-sys-color-outline);
  --track-outline-width: 2px;
  --track-width: 52px;
  // LINT.ThenChange(md-switch.ts) keep in sync with `@cssprop` jsdoc tags
}

@mixin hovered {
  --handle-color: var(--md-sys-color-on-surface-variant);
}

@mixin selected {
  --track-color: var(--md-sys-color-primary);
  --track-outline-color: transparent;
  --handle-color: var(--md-sys-color-on-primary);
  --handle-size: 24px;
  --icon-color: var(--md-sys-color-on-primary-container);
  --state-layer-color: var(--md-sys-color-primary);
}

@mixin selected-hovered {
  --handle-color: var(--md-sys-color-primary-container);
}

@mixin pressed {
  --handle-size: 28px;
}

@mixin disabled {
  --handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
  --track-color: hsl(
    from var(--md-sys-color-surface-container-highest) h s l / 12%
  );
  --track-outline-color: hsl(
    from var(--md-sys-color-on-surface) h s l / 12%
  );
}

@mixin disabled-selected {
  --handle-color: var(--md-sys-color-surface);
  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
  --track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%);
}