.Stepper {
    $variant-colors: (
        danger: --danger,
        warning: --warning,
        success: --success,
        info: --info,
        revision: --revision,
        neutral: --gray-600,
        solid: --gray-1000,
    );

    display: flex;

    &.layout-horizontal {
        display: flex;
        flex-direction: row;
        gap: var(--padding-medium-small);

        .Stepper-Step-content {
            display: flex;
            flex-direction: column;
            gap: var(--padding-medium);
        }
    }

    &.layout-vertical {
        flex-direction: column;
        gap: var(--padding-medium);

        .Stepper-Step-content {
            display: flex;
            flex-direction: column;
            gap: var(--padding-medium);

            &:not(:last-child) {
                padding-bottom: var(--padding-medium);
            }
        }
    }

    &-Step {
        display: flex;
        flex-direction: column;
        gap: var(--padding-medium-small);

        &.horizontal {
            flex-direction: column;
            min-width: 296px;
        }

        &.vertical {
            flex-direction: row;
            max-width: 328px;
            min-height: 64px;
        }

        &-header {
            display: flex;

            &.vertical {
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            &.horizontal {
                flex-direction: row;
                align-items: center;
            }

            .horizontal-line {
                flex: 1;
                height: 1px;
                border: 1px solid var(--dividers-light-stroke);
                margin-left: 6px;
            }
        }

        &-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            border-width: 2px;
            border-style: solid;
            border-radius: 16px;
            width: 25px;
            height: 24px;

            @each $type, $variant-value in $variant-colors {
                &.variant-#{$type} {
                    border-color: var(#{$variant-value});
                }
            }

            .number {
                font-size: 14px; // TODO use vars
                font-weight: 500;
            }

            > .number,
            > .GlyphIcon {
                padding-top: 1px;

                @each $type, $variant-value in $variant-colors {
                    &.variant-#{$type} {
                        color: var(#{$variant-value});
                    }
                }
            }
        }

        .vertical-line {
            flex: 1;
            width: 1px;
            height: 100%;
            border: 1px solid var(--dividers-light-stroke);
            margin-top: 6px;
        }

        &:last-child {
            .vertical-line {
                border-color: transparent;
            }
        }

        &-title-row {
            display: flex;
            align-items: center;

            .title {
                font-size: 16px;
                font-weight: 500;
                color: var(--gray-800);
            }

            .title-action {
                margin-left: 10px;
                font-size: 12px;
                color: var(--gray-600);
            }
        }

        &-description {
            font-size: 14px;
        }

        &-action {
            margin-top: 8px;
        }
    }
}