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

$scope: 'button';

$themes: (
  'light': (
    // Primary
    'primary-color': color('light', 'base-text-primary'),
    'primary-border-color': rgb(color('light', 'primary-fill-1'), 0.1),
    'primary-background': linear-gradient(99.85deg, #75d7cf 0%, #48c1d1 100%),
    'primary-hover-border-color': rgb(color('light', 'primary-fill-1'), 0.5),
    'primary-hover-background': linear-gradient(99.85deg, #99e5dc 0%, #70d3db 100%),
    'primary-active-border-color': rgb(color('light', 'primary-fill-1'), 0.5),
    'primary-active-background': linear-gradient(99.85deg, #75d7cf 0%, #48c1d1 100%),
    'primary-focus-outline': 3px solid rgb(color('light', 'primary-fill-4'), 0.3),
    'primary-disabled-color': color('light', 'base-text-disabled'),
    'primary-disabled-border-color': rgb(color('light', 'primary-fill-1'), 0.1),
    'primary-disabled-background': linear-gradient(99.85deg, rgba(117, 215, 207, 0.6) 0%, rgb(72, 193, 209, 0.6) 100%),
    // Secondary
    'secondary-color': color('light', 'base-text-primary'),
    'secondary-border-color': rgb(color('light', 'primary-fill-1'), 0.2),
    'secondary-background': rgb(color('light', 'primary-fill-1'), 0.05),
    'secondary-hover-border-color': rgb(color('light', 'primary-fill-1'), 0.5),
    'secondary-hover-background': rgb(color('light', 'primary-fill-1'), 0.1),
    'secondary-active-border-color': rgb(color('light', 'primary-fill-1'), 0.5),
    'secondary-active-background': rgb(color('light', 'primary-fill-1'), 0.1),
    'secondary-focus-outline': 3px solid rgb(color('light', 'primary-fill-4'), 0.3),
    'secondary-disabled-color': color('light', 'base-text-disabled'),
    'secondary-disabled-border-color': rgb(color('light', 'primary-fill-1'), 0.05),
    'secondary-disabled-background': rgb(color('light', 'primary-fill-1'), 0.05),
    // Tertiary
    'tertiary-color': color('light', 'base-text-primary'),
    'tertiary-background': rgb(color('light', 'primary-fill-1'), 0.05),
    'tertiary-hover-background': rgb(color('light', 'primary-fill-1'), 0.1),
    'tertiary-active-background': rgb(color('light', 'primary-fill-1'), 0.1),
    'tertiary-focus-outline': 3px solid rgb(color('light', 'primary-fill-4'), 0.3),
    'tertiary-disabled-color': color('light', 'base-text-disabled'),
    'tertiary-disabled-background': rgb(color('light', 'primary-fill-1'), 0.05),
  ),
  'dark': (
    // Primary
    'primary-color': color('dark', 'base-text-primary'),
    'primary-border-color': rgb(color('dark', 'base-white'), 0.1),
    'primary-background': linear-gradient(135deg, #3d8699 0%, #346573 99.4%),
    'primary-hover-border-color': rgb(color('dark', 'base-white'), 0.5),
    'primary-hover-background': linear-gradient(135deg, #479cb3 0%, #3f7c8c 99.4%),
    'primary-active-border-color': rgb(color('dark', 'base-white'), 0.5),
    'primary-active-background': linear-gradient(135deg, #3d8699 0%, #346573 99.4%),
    'primary-focus-outline': 3px solid rgb(color('dark', 'primary-fill-4'), 0.3),
    'primary-disabled-color': rgb(color('dark', 'base-white'), 0.6),
    'primary-disabled-border-color': rgb(color('dark', 'base-white'), 0.05),
    'primary-disabled-background': linear-gradient(135deg, rgba(61, 134, 153, 0.6) 0%, rgba(52, 101, 115, 0.6) 99.4%),
    // Secondary
    'secondary-color': color('dark', 'base-text-primary'),
    'secondary-border-color': rgb(color('dark', 'base-white'), 0.1),
    'secondary-background': rgb(color('dark', 'base-white'), 0.05),
    'secondary-hover-border-color': rgb(color('dark', 'base-white'), 0.5),
    'secondary-hover-background': rgb(color('dark', 'base-white'), 0.1),
    'secondary-active-border-color': rgb(color('dark', 'base-white'), 0.5),
    'secondary-active-background': rgb(color('dark', 'base-white'), 0.1),
    'secondary-focus-outline': 3px solid rgb(color('dark', 'primary-fill-4'), 0.3),
    'secondary-disabled-color': rgb(color('dark', 'base-white'), 0.6),
    'secondary-disabled-border-color': rgb(color('dark', 'base-white'), 0.05),
    'secondary-disabled-background': rgb(color('dark', 'base-white'), 0.05),
    // Tertiary
    'tertiary-color': color('dark', 'base-text-primary'),
    'tertiary-background': rgb(color('dark', 'base-black'), 0.3),
    'tertiary-hover-background': rgb(color('dark', 'base-black'), 0.6),
    'tertiary-active-background': rgb(color('dark', 'base-black'), 0.3),
    'tertiary-focus-outline': 3px solid rgb(color('dark', 'primary-fill-4'), 0.3),
    'tertiary-disabled-color': rgb(color('dark', 'base-white'), 0.6),
    'tertiary-disabled-background': rgb(color('dark', 'base-black'), 0.2),
  ),
);

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

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