@use 'styles/helpers.scss' as *;

$scope: 'search-field';

$themes: (
  'light': (
    'error-text': color('light', 'base-text-error'),
    'error-border': color('light', 'base-text-error'),
    'hint-text': color('light', 'base-text-secondary'),
    'paper-shadow': rgba(color('light', 'base-black'), 0.2),
    'paper-background': color('light', 'base-white'),
    'no-options-text': color('light', 'base-text-secondary'),
    'disabled-text': color('light', 'base-text-disabled'),
    'disabled-background': rgba(color('light', 'base-black'), 0.05),
    'input-background': rgba(color('light', 'base-white'), 0.05),
    'input-border': rgba(color('light', 'base-black'), 0.3),
    'input-focus-border': rgba(color('light', 'base-black'), 0.5),
    'icon-color': color('light', 'base-text-secondary'),
    'option-hover': rgba(color('light', 'primary-fill-1'), 0.05),
    'option-selected': rgba(color('light', 'primary-fill-1'), 0.1),
    'placeholder-text': color('light', 'base-text-secondary'),
  ),
  'dark': (),
);

@mixin search-field-theme-modifiers() {
  @include theme-modifiers($scope, $themes);
}

@function search-field-theme-color($name) {
  @return theme-color($scope, $name);
}