@use 'sass:map';
@use '@angular/material' as mat;
@use '../core/tokens/m3-utils';
@use '../core/tokens/m3';
@use '../core/style/elevation';

/// Generates custom tokens for the mtx-select.
@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
  $system: m3-utils.get-system($theme);
  @if $color-variant {
    $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
  }

  $tokens: (
    base: (
      select-container-shape: map.get($system, corner-extra-small),
      select-container-elevation-shadow: elevation.get-box-shadow(2),
    ),
    color: (
      select-container-text-color: map.get($system, on-surface),
      select-placeholder-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
      select-disabled-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
      select-multiple-value-background-color: transparent,
      select-multiple-value-outline-color: map.get($system, outline),
      select-multiple-value-disabled-outline-color: m3-utils.color-with-opacity(map.get($system, outline), 38%),
      select-multiple-value-icon-hover-background-color: map.get($system, outline-variant),
      select-clear-icon-color: map.get($system, on-surface),
      select-clear-icon-hover-color: map.get($system, error),
      select-enabled-arrow-color: map.get($system, on-surface),
      select-disabled-arrow-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
      select-invalid-arrow-color: map.get($system, error),
      select-panel-background-color: map.get($system, surface-container),
      select-panel-divider-color: map.get($system, outline),
      select-optgroup-label-text-color: map.get($system, on-surface),
      select-option-label-text-color: map.get($system, on-surface),
      select-option-selected-state-background-color: map.get($system, secondary-container),
      select-option-selected-state-text-color: map.get($system, on-surface),
      select-option-hover-state-background-color: m3-utils.color-with-opacity(
        map.get($system, on-surface), map.get($system,hover-state-layer-opacity)),
      select-option-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
    ),
    typography: (),
    density: (),
  );

  @return $tokens;
}