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

$scope: 'badge';

$themes: (
  'light': (
    'tertiary-color': color('light', 'base-text-primary'),
    'tertiary-background': rgb(color('light', 'primary-fill-1'), 0.3),
    'tertiary-border': rgb(color('light', 'base-black'), 0.2),
    'primary-color': color('light', 'base-text-primary'),
    'primary-background': rgb(color('light', 'base-white'), 0.5),
    'secondary-background': rgb(color('light', 'primary-fill-1'), 0.8),
    'secondary-color': color('light', 'base-text-reverse'),
    'secondary-border': rgb(color('light', 'base-black'), 0.2),
    'quaternary-background': rgb(color('light', 'primary-fill-1'), 0.15),
    'quaternary-border': rgb(color('light', 'base-black'), 0.2),
    'quinary-color': color('light', 'base-text-secondary'),
    'quinary-background': rgb(color('light', 'primary-fill-1'), 0.1),
    'quinary-border': rgb(color('light', 'primary-fill-1'), 0.1),
  ),
  'dark': (),
);

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

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