.StepIndicator {
    $variant-colors: (
        error: --danger,
        warning: --warning,
        success: --success,
        info: --info,
        revision: --revision,
        neutral: --gray-600,
    );

    display: flex;
    align-items: center;
    margin: 0 4px;

    @each $status-type, $variant-value in $variant-colors {
        &.variant-#{$status-type} {
            .glyphIconWrapper {
                display: flex;
                width: 24px;
                height: 24px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 12px;
                border: 2px solid var(#{$variant-value});
                svg.Icon.GlyphIcon {
                    width: 12px;
                    height: 12px;
                    flex-shrink: 0;
                }
            }
            .GlyphIcon {
                color: var(#{$variant-value});
            }
        }
    }

    &-text {
        margin-left: 4px;
    }
}