div {
  -dls-steps-title-font-size-s: 12px;
  -dls-steps-title-font-size-m: 14px;
  -dls-steps-desc-font-size-s: 12px;
  -dls-steps-desc-font-size-m: 12px;
  -dls-steps-marker-font-size-s: 14px;
  -dls-steps-marker-font-size-m: 16px;
  -dls-steps-title-font-weight: 500;
  -dls-steps-title-font-color: #282c33;
  -dls-steps-title-font-color-hover: #282c33;
  -dls-steps-title-font-color-focus: #282c33;
  -dls-steps-title-font-color-active: #282c33;
  -dls-steps-desc-font-color: #848b99;
  -dls-steps-title-font-color-incomplete: #848b99;
  -dls-steps-desc-font-color-incomplete: #848b99;
  -dls-steps-marker-size-s: 28px;
  -dls-steps-marker-size-m: 32px;
  -dls-steps-marker-icon-size: calc(1em + 2px);
  -dls-steps-title-max-width-horizontal: 10em;
  -dls-steps-desc-max-width-horizontal: 12em;
  -dls-steps-marker-spacing: 8px;
  -dls-steps-title-spacing: 4px;
  -dls-steps-connector-spacing-horizontal: 12px;
  -dls-steps-connector-spacing-vertical: 8px;
  -dls-steps-connector-min-length: 24px;
  -dls-steps-marker-background-color-incomplete: #fff;
  -dls-steps-marker-border-color-incomplete: #e2e6f0;
  -dls-steps-marker-foreground-color-incomplete: #848b99;
  -dls-steps-connector-color-incomplete: #e2e6f0;
  -dls-steps-marker-background-color-completed: #fff;
  -dls-steps-marker-background-color-completed-hover: #f2f7ff;
  -dls-steps-marker-background-color-completed-focus: #f2f7ff;
  -dls-steps-marker-background-color-completed-active: #e1edff;
  -dls-steps-marker-border-color-completed: #0052cc;
  -dls-steps-marker-foreground-color-completed: #0052cc;
  -dls-steps-marker-shadow-completed-focus: 0 0 0 2px rgba(0, 102, 255, 0.2);
  -dls-steps-connector-color-completed: #0052cc;
  -dls-steps-marker-background-color-error: #fff;
  -dls-steps-marker-background-color-error-hover: #fff4f2;
  -dls-steps-marker-background-color-error-focus: #fff4f2;
  -dls-steps-marker-background-color-error-active: #ffe4e1;
  -dls-steps-marker-border-color-error: #cc1800;
  -dls-steps-marker-foreground-color-error: #cc1800;
  -dls-steps-marker-shadow-error-focus: 0 0 0 2px rgba(255, 30, 0, 0.2);
  -dls-steps-connector-color-error: #cc1800;
  -dls-steps-marker-background-color-current: #0052cc;
  -dls-steps-marker-background-color-current-hover: #0066ff;
  -dls-steps-marker-background-color-current-focus: #0066ff;
  -dls-steps-marker-background-color-current-active: #0046ad;
  -dls-steps-marker-border-color-current: transparent;
  -dls-steps-marker-border-color-current-focus: #0052cc;
  -dls-steps-marker-foreground-color-current: #fff;
  -dls-steps-marker-shadow-current-focus: 0 0 0 2px rgba(0, 102, 255, 0.2);
  -dls-steps-connector-color-current: #0052cc;
  -dls-steps-marker-background-color-error-current: #cc1800;
  -dls-steps-marker-background-color-error-current-hover: #ff1e00;
  -dls-steps-marker-background-color-error-current-focus: #ff1e00;
  -dls-steps-marker-background-color-error-current-active: #ad1400;
  -dls-steps-marker-border-color-error-current: transparent;
  -dls-steps-marker-border-color-error-current-focus: #cc1800;
  -dls-steps-marker-foreground-color-error-current: #fff;
  -dls-steps-marker-shadow-error-current-focus: 0 0 0 2px rgba(255, 30, 0, 0.2);
  -dls-steps-connector-color-error-current: #cc1800;
}