@use '@style/theme/index.scss' as global;

@forward '@style/theme/index.scss';
@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;

@use 'sass:string';
@use '@style/theme/index.scss' as *;

// Global
$switch-size-default: global.$size-6;
$switch-size-small: global.$size-4;
$switch-font-size-text: global.$font-size-caption;

// circle and round
$switch-size-dot-default: global.$size-4;
$switch-size-dot-small: 12px;

// line
$switch-line-size-dot-default: global.$size-5;
$switch-line-size-dot-small: global.$size-4;

// Circle
$switch-circle-default-width: global.$size-10;
$switch-circle-small-width: global.$size-7;

// Round
$switch-round-default-width: global.$size-10;
$switch-round-small-width: global.$size-7;

// Line
$switch-line-default-width: global.$size-9;
$switch-line-small-width: global.$size-7;
$switch-line-height-bg-line: 6px;
$switch-line-color-dot-shadow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-6'));

$switch-color-bg_on: global.$color-primary-6;
$switch-color-bg_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
$switch-color-bg_on_disabled: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
);
$switch-color-bg_off_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$switch-color-bg_on_loading: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
);
$switch-color-bg_off_loading: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$switch-color-dot-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
$switch-color-text_on: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$switch-color-text_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$switch-color-text_on_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$switch-color-text_off_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$switch-color-text_on_loading: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
);
$switch-color-text_off_loading: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$switch-color-dot-icon_on: global.$color-primary-6;
$switch-color-dot-icon_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
$switch-color-dot-icon_on_disabled: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
);
$switch-color-dot-icon_off_disabled: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
);
$switch-color-dot-icon_on_loading: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
);
$switch-color-dot-icon_off_loading: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
);