@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 *;

// road
$slider-size-road-width: 2px;
$slider-color-road-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
$slider-color-road-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));

// bar
$slider-color-bar-bg: global.$color-primary-6;
$slider-color-bar-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));

// button
$slider-color-button-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
$slider-border-size-button: global.$border-2;
$slider-color-button-border: global.$color-primary-6;
$slider-color-button-border_disabled: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
);
$slider-shadow-button_active: global.$shadow1-down;
$slider-size-button-width: global.$size-3;
$slider-size-button-width_active: 14px;

// dot
$slider-color-dot-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
$slider-border-size-dot: global.$border-2;
$slider-font-size-dot: global.$font-size-body-1;
$slider-size-dot-width: global.$size-2;

// mark
$slider-spacing-margin-bottom_with-mark: global.$spacing-9;
$slider-spacing-padding_width-mark: global.$spacing-8;
$slider-spacing-padding_width-mark_vertical: global.$spacing-8;
$slider-font-size-mark: global.$font-size-body-3;
$slider-color-mark-font: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));

// tick
$slider-size-tick-width: 1px;
$slider-size-tick-height: 3px;

// input
$slider-spacing-input-margin-left: global.$spacing-8;
$slider-size-input-width: global.$size-15;
$slider-size-input-height: global.$size-8;
$slider-size-input_range-width: global.$size-5;
$slider-size-input_range-height: global.$size-8;
$slider-size-input_range_content-width: global.$size-2;
$slider-size-input_range_content-height: 2px;
$slider-color-input_range_content-bg: rgb(
  var(string.unquote('#{global.$sd-cssvars-prefix}-gray-6'))
);

// vertical
$slider-size-height_vertical: 200px;
$slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离