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

// Two size: Default and small
$steps-size-default: global.$size-7;
$steps-size-small: global.$size-6;
$steps-size-default-arrow: global.$size-18;
$steps-size-small-arrow: global.$size-10;

$steps-size-default-font-size-icon: global.$size-4;
$steps-size-default-font-size-title: global.$font-size-title-1;
$steps-size-default-font-size-description: global.$font-size-body-1;
$steps-size-small-font-size-icon: 14px;
$steps-size-small-font-size-title: global.$font-size-body-3;
$steps-size-small-font-size-description: global.$font-size-body-1;

$steps-label-vertical-content-width: 140px;
$steps-direction-horizontal-description-width: 140px;

// Circle
$steps-circle-size-item-tail: global.$border-1;
$steps-circle-size-item-icon-gap: 12px;

$steps-circle-font-weight-item-title_active: global.$font-weight-500;

$steps-circle-border-radius-item-icon: global.$radius-circle;

$steps-circle-horizontal-item-description-margin-top: global.$spacing-1;
$steps-circle-vertical-item-description-margin-top: global.$spacing-1;

$steps-circle-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$steps-circle-color-item-border_wait: global.$color-transparent;
$steps-circle-color-item-icon-text_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
);
$steps-circle-color-item-tail_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
);
$steps-circle-color-item-title_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
);
$steps-circle-color-item-description_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-circle-color-item-bg_process: global.$color-primary-6;
$steps-circle-color-item-border_process: global.$color-transparent;
$steps-circle-color-item-icon-text_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);
$steps-circle-color-item-tail_process: global.$color-primary-6;
$steps-circle-color-item-title_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-circle-color-item-description_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-circle-color-item-bg_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
);
$steps-circle-color-item-border_finish: global.$color-transparent;
$steps-circle-color-item-icon-text_finish: global.$color-primary-6;
$steps-circle-color-item-title_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-circle-color-item-description_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-circle-color-item-bg_error: global.$color-danger-6;
$steps-circle-color-item-border_error: global.$color-transparent;
$steps-circle-color-item-icon-text_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);
$steps-circle-color-item-tail_error: global.$color-danger-6;
$steps-circle-color-item-title_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-circle-color-item-description_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

// Dot
$steps-dot-horizontal-item-title-margin-top: global.$spacing-2;
$steps-dot-horizontal-item-description-margin-top: global.$spacing-2;
$steps-dot-vertical-item-title-margin-top: -2px;
$steps-dot-vertical-item-description-margin-top: global.$spacing-2;

$steps-dot-size-item-icon: global.$size-2;
$steps-dot-size-item-icon-active: 10px;
$steps-dot-size-item-icon-gap: global.$spacing-2;
$steps-dot-size-item-tail: global.$border-1;

$steps-dot-vertical-item-icon-margin-right: global.$spacing-7;

$steps-dot-font-weight-item-title_active: global.$font-weight-500;

$steps-dot-border-radius-item-icon: global.$radius-circle;

$steps-dot-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
$steps-dot-color-item-border_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
$steps-dot-color-item-tail_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
);
$steps-dot-color-item-title_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$steps-dot-color-item-description_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-dot-color-item-bg_process: global.$color-primary-6;
$steps-dot-color-item-border_process: global.$color-primary-6;
$steps-dot-color-item-tail_process: global.$color-primary-6;
$steps-dot-color-item-title_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-dot-color-item-description_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-dot-color-item-bg_finish: global.$color-primary-6;
$steps-dot-color-item-border_finish: global.$color-primary-6;
$steps-dot-color-item-title_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-dot-color-item-description_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-dot-color-item-bg_error: global.$color-danger-6;
$steps-dot-color-item-border_error: global.$color-danger-6;
$steps-dot-color-item-tail_error: global.$color-danger-6;
$steps-dot-color-item-title_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
$steps-dot-color-item-description_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

// Arrow
$steps-arrow-size-item-gap: global.$spacing-2;

$steps-arrow-size-default-title-padding-left: global.$spacing-7;
$steps-arrow-size-small-title-padding-left: global.$spacing-8;

$steps-arrow-item-description-margin-top: 0;

$steps-arrow-font-weight-item-title_active: global.$font-weight-500;

$steps-arrow-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
$steps-arrow-color-item-title_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
);
$steps-arrow-color-item-description_wait: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-arrow-color-item-bg_process: global.$color-primary-6;
$steps-arrow-color-item-title_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);
$steps-arrow-color-item-description_process: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);

$steps-arrow-color-item-bg_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
);
$steps-arrow-color-item-title_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
);
$steps-arrow-color-item-description_finish: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);

$steps-arrow-color-item-bg_error: global.$color-danger-6;
$steps-arrow-color-item-title_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);
$steps-arrow-color-item-description_error: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);

// Navigation
$steps-navigation-color-arrow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
$steps-navigation-size-arrow: 6px;
$steps-navigation-size-arrow-line-width: 2px;
$steps-navigation-size-arrow-top: global.$spacing-5;

// Circle

$steps-circle-vertical-spacing-tail-top: global.$spacing-3;
$steps-circle-vertical-spacing-tail-bottom: global.$spacing-3;

// Dot
$steps-dot-vertical-item-dot-margin-top: global.$spacing-4;
$steps-dot-vertical-spacing-tail-top: global.$spacing-2;
$steps-dot-vertical-spacing-tail-bottom: global.$spacing-2;

$steps-navigation-padding-left: global.$spacing-8;
$steps-navigation-margin-right: global.$spacing-10;
$steps-navigation-spacing-arrow-right: global.$spacing-5;
$steps-navigation-spacing-ink-left: global.$spacing-none;
$steps-navigation-spacing-ink-right: 30px;