@step-item-dot-size: var(--td-step-item-dot-size, 8px);
@step-item-circle-size: var(--td-step-item-circle-size, 22px);
@step-item-circle-text-font: var(--td-step-item-circle-text-font, @font-body-medium);
@step-item-description-color: var(--td-step-item-description-color, @text-color-placeholder);

@step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer);
@step-item-default-circle-color: var(--td-step-item-default-circle-color, @text-color-placeholder);
@step-item-default-title-color: var(--td-step-item-default-title-color, @text-color-placeholder);
@step-item-default-icon-color: var(--td-step-item-default-icon-color, @text-color-placeholder);
@step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border);

@step-item-process-circle-color: var(--td-step-item-process-circle-color, @font-white-1);
@step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color);
@step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color);
@step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color);
@step-item-process-dot-border-color: var(--td-step-item-process-dot-border-color, @brand-color);

@step-item-finish-circle-color: var(--td-step-item-finish-circle-color, @brand-color);
@step-item-finish-circle-bg: var(--td-step-item-finish-circle-bg, @brand-color-light);
@step-item-finish-title-color: var(--td-step-item-finish-title-color, @text-color-primary);
@step-item-finish-icon-color: var(--td-step-item-finish-icon-color, @brand-color);
@step-item-finish-dot-border-color: var(--td-step-item-finish-dot-border-color, @brand-color);

@step-item-error-circle-color: var(--td-step-item-error-circle-color, @error-color);
@step-item-error-circle-bg: var(--td-step-item-error-circle-bg, @error-color-1);
@step-item-error-title-color: var(--td-step-item-error-title-color, @error-color);
@step-item-error-icon-color: var(--td-step-item-error-icon-color, @error-color);
@step-item-error-dot-border-color: var(--td-step-item-error-dot-border-color, @error-color);

@step-item-line-color: var(--td-step-item-line-color, @component-border);
@step-item-finish-line-color: var(--td-step-item-finish-line-color, @brand-color);

@step: ~'@{prefix}-step';
@steps: ~'@{step}s';
@item: ~'@{step}-item';