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

$scope: 'alert';

$themes: (
  'light': (
    'link-border': rgba(color('light', 'base-black'), 0.6),
    'background':
      linear-gradient(
        93.78deg,
        rgba(color('light', 'base-white'), 0.8) 0%,
        rgba(color('light', 'base-white'), 0.8) 0.01%,
        rgba(color('light', 'base-white'), 0.4) 100%
      ),
    'success-primary-border': color('light', 'semantic-success-fill-2'),
    'success-secondary-border': rgba(color('light', 'semantic-success-fill-1'), 0.1),
    'success-bar':
      linear-gradient(
        114.55deg,
        color('light', 'semantic-success-fill-2') 0%,
        color('light', 'semantic-success-fill-3') 100%
      ),
    'error-primary-border': color('light', 'semantic-error-fill-2'),
    'error-secondary-border': rgba(color('light', 'semantic-error-fill-1'), 0.1),
    'error-bar':
      linear-gradient(
        114.55deg,
        color('light', 'semantic-error-fill-2') 0%,
        color('light', 'semantic-error-fill-3') 100%
      ),
    'warning-primary-border': color('light', 'semantic-warning-fill-2'),
    'warning-secondary-border': rgba(color('light', 'semantic-warning-fill-1'), 0.1),
    'warning-bar':
      linear-gradient(
        114.55deg,
        color('light', 'semantic-warning-fill-2') 0%,
        color('light', 'semantic-warning-fill-3') 100%
      ),
    'info-primary-border': color('light', 'semantic-info-fill-2'),
    'info-secondary-border': rgba(color('light', 'semantic-info-fill-1'), 0.1),
    'info-bar':
      linear-gradient(114.55deg, color('light', 'semantic-info-fill-2') 0%, color('light', 'semantic-info-fill-3') 100%),
  ),
  'dark': (),
);

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

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