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

$scope: 'checkbox';

$themes: (
  'light': (
    'icon': color('light', 'base-white'),
    'icon-disabled': color('light', 'base-white'),
    'icon-selected-hover': color('light', 'base-white'),
    'icon-selected-disabled': color('light', 'base-white'),
    'icon-error': color('light', 'base-white'),
    'icon-error-hover': color('light', 'base-white'),
    'shadow': rgb(color('light', 'primary-fill-4'), 0.3),
    'border': rgb(color('light', 'base-black'), 0.3),
    'border-hover': rgb(color('light', 'base-black'), 0.5),
    'border-selected': color('light', 'primary-fill-4'),
    'border-selected-hover': color('light', 'primary-fill-3'),
    'border-disabled': rgb(color('light', 'base-black'), 0.3),
    'border-disabled-selected': 'transparent',
    'border-error-disabled-selected': rgb(color('light', 'base-black'), 0.3),
    'border-error': color('light', 'semantic-error-fill-2'),
    'border-error-selected': color('light', 'semantic-error-fill-2'),
    'background': rgb(color('light', 'base-white'), 0.05),
    'background-error': rgb(color('light', 'semantic-error-fill-2'), 0.05),
    'background-error-selected': color('light', 'semantic-error-fill-2'),
    'background-selected': color('light', 'primary-fill-4'),
    'background-disabled': rgb(color('light', 'base-black'), 0.05),
    'background-disabled-selected': rgb(color('light', 'base-black'), 0.3),
    'background-hover': color('light', 'primary-fill-3'),
    'error-shadow': rgb(color('light', 'semantic-error-fill-2'), 0.3),
  ),
  'dark': (
    'icon': color('dark', 'accent-primary-fill-1'),
    'icon-disabled': rgb(color('dark', 'base-black'), 0.5),
    'icon-error': color('dark', 'semantic-error-fill-1'),
    'icon-error-hover': color('dark', 'semantic-error-fill-1'),
    'icon-selected-hover': color('dark', 'accent-primary-fill-3'),
    'icon-selected-disabled': rgb(color('dark', 'base-white'), 0.5),
    'shadow': rgb(color('dark', 'primary-fill-4'), 0.3),
    'border': rgb(color('dark', 'base-white'), 0.2),
    'border-hover': rgb(color('dark', 'base-white'), 0.5),
    'border-selected': color('dark', 'accent-primary-fill-1'),
    'border-selected-hover': color('dark', 'accent-primary-fill-3'),
    'border-disabled': rgb(color('dark', 'base-white'), 0.1),
    'border-disabled-selected': rgb(color('dark', 'base-white'), 0.1),
    'border-error-disabled-selected': rgb(color('dark', 'base-black'), 0.3),
    'border-error': color('dark', 'semantic-error-fill-1'),
    'border-error-selected': color('dark', 'semantic-error-fill-1'),
    'background': 'transparent',
    'background-error': 'transparent',
    'background-error-selected': 'transparent',
    'background-selected': 'transparent',
    'background-disabled': 'transparent',
    'background-disabled-selected': 'transparent',
    'background-hover': 'transparent',
    'error-shadow': rgb(color('dark', 'semantic-error-fill-1'), 0.3),
  ),
);

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

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