@use "sass:map";
@use "./base";

$steps-size-list: base.$base-size-list !default;
$steps-node-knob-margin: base.padding(3) !default;

$steps-node-color-waiting: base.$color-border-intensive !default;
$steps-node-color-done: base.color-brand() !default;
$steps-node-color-danger: base.color-danger() !default;

$steps-node-font-color-waiting: base.$color-text-hint !default;
$steps-node-knob-info-margin-vertical: base.padding(2) !default;

$steps-node-joint-line-width: base.$border-width-base !default;
$steps-node-joint-line-color-waiting: $steps-node-color-waiting !default;
$steps-node-joint-line-color-done: $steps-node-color-done !default;
$steps-node-joint-line-color-danger: $steps-node-color-danger !default;

$steps-node-knob-border-color-waiting: $steps-node-color-waiting !default;
$steps-node-knob-border-color-done: $steps-node-color-done !default;
$steps-node-knob-border-color-danger: $steps-node-color-danger !default;

$steps-node-clickable-standard-waiting-knob-border-color-hover: base.color-brand() !default;
$steps-node-clickable-standard-waiting-font-color-hover: base.color-brand() !default;
$steps-node-clickable-standard-waiting-knob-border-color-active: base.color-brand() !default;
$steps-node-clickable-standard-waiting-font-color-active: base.color-brand() !default;
$steps-node-clickable-standard-waiting-bg-color-active: base.color-brand(2) !default;

$steps-node-clickable-standard-done-bg-color-hover: base.color-brand(1) !default;
$steps-node-clickable-standard-done-bg-color-active: base.color-brand(2) !default;

$steps-node-clickable-standard-danger-bg-color-hover: base.color-danger(1) !default;
$steps-node-clickable-standard-danger-bg-color-active: base.color-danger(2) !default;

$steps-node-clickable-standard-active-bg-color-hover: base.color-brand(5) !default;
$steps-node-clickable-standard-active-bg-color-active: base.color-brand(7) !default;

$steps-node-clickable-standard-terminated-bg-color-hover: base.color-danger(5) !default;
$steps-node-clickable-standard-terminated-bg-color-active: base.color-danger(7) !default;

$steps-node-knob-standard-size: (
  sm: map.get(base.$form-control-height, sm), // 28px
  md: map.get(base.$form-control-height, md), // 32px
) !default;

$steps-node-knob-dot-color-waiting: base.color-gray() !default;
$steps-node-knob-dot-color-done: $steps-node-color-done !default;
$steps-node-knob-dot-color-active: $steps-node-color-done !default;
$steps-node-knob-dot-color-danger: $steps-node-color-danger !default;
$steps-node-knob-dot-color-terminated: $steps-node-color-danger !default;


$steps-node-knob-dot-size: (
  sm: 8px,
  md: 12px,
) !default;

$steps-node-knob-dot-size-active: (
  sm: 12px,
  md: 16px,
) !default;

$steps-node-knob-font-size: (
  sm: base.$font-size-md,
  md: base.$font-size-lg,
) !default;

$steps-node-label-max-width: 120px !default;
$steps-node-description-max-width: $steps-node-label-max-width * 1.5 !default;

$steps-node-label-font-size: (
  sm: base.$font-size-sm,
  md: base.$font-size-md,
) !default;

$steps-node-description-font-size: (
  sm: base.$font-size-sm,
  md: base.$font-size-sm,
) !default;

$steps-node-label-description-margin: base.padding(1);

$steps-direction-vertical-node-min-height: base.height(32) !default;