@import '../default/var';
// @import './icon';
.#{$prefix}-step {
    &--horizontal {
        display: flex;
        .#{$prefix}-step-item {
            display: flex;
            align-items: center;
            &__line {
                flex: 1;
                height: 2px;
                margin-right: 10px;
                margin-left: 10px;
            }
        }
    }
    &--vertical {
        display: flex;
        flex-direction: column;
        .#{$prefix}-step-item {
            display: flex;
            flex-direction: column;
            &__line {
                flex: 1;
                width: 2px;
                margin: 10px 0;
            }
        }
    }
    &-item {
        flex: 1;
        box-sizing: border-box;
        &__main {
            display: flex;
            align-items: center;
        }
        &__desc {
            position: relative;
            padding-left: 10px;
            width: 100%;
            box-sizing: border-box;
            .major-title {
                font-weight: bold;
                white-space: nowrap;
            }
            .minor-title {
                position: absolute;
                top: 20px;
            }
        }
        &--v2 {
            @at-root .#{$prefix}-step--horizontal & {
                .#{$prefix}-step-item {
                    &__main {
                        position: relative;
                        display: block;
                    }
                    &__desc {
                        position: absolute;
                        padding-left: 0;
                        width: auto;
                        text-align: center;
                        left: 50%;
                        transform: translate(-50%);
                        margin-top: 6px;
                        .major-title {
                            font-weight: bold;
                            white-space: nowrap;
                        }
                        .minor-title {
                            position: static;
                            margin-top: 3px;
                        }
                    }
                }
            }
            &:last-of-type {
                flex-grow: 0;
            }
        }
        &--success {
            color: $step-color-success-fore;
        }
        &--error {
            color: $step-color-error;
        }
        &--waiting {
            color: $step-color-waiting-fore;
        }
        &--active {
            color: $step-color-active-fore;
        }
        &__icon {
            flex-shrink: 0;
            .#{$prefix}-icon-success-o {
                // @extend .#{$prefix}-icon-success-o;
                color: $step-color-active;
            }
            .#{$prefix}-icon-error-o {
                // @extend .#{$prefix}-icon-error-o;
                color: $step-color-error;
            }
            &--active {
                border: 2px solid $step-color-active;
                background: $step-color-active;
                color: $step-color-active-node-fore;
                border-radius: 50%;
                display: block;
                text-align: center;
                font-style: normal;
            }
            &--waiting {
                border: 2px solid $step-color-waiting;
                color: $step-color-waiting;
                border-radius: 50%;
                display: block;
                text-align: center;
                font-style: normal;
            }
        }
        &__line {
            @each $status in success,
            error,
            active,
            waiting {
                &.#{$status} {
                    background-color: map-get($step-colors-line, $status);
                }
            }
        }
        &:last-of-type {
            .#{$prefix}-step-item__desc {
                flex: 1;
            }
            .#{$prefix}-step-item__line {
                flex: 0;
            }
        }
    }
    @each $size in large,
    medium,
    small,
    mini {
        $fs: map-get($font-sizes, $size);
        $ss: map-get($step-sizes, $size);
        $cs: map-get($corner-sizes, $size);
        &--#{$size} {
            .#{$prefix}-step {
                &-item {
                    min-height: $ss * 3;
                    &__icon {
                        width: $ss;
                        height: $ss;
                        // overflow: hidden;
                        &--success,
                        &--error {
                            font-size: $ss;
                        }
                        &--active,
                        &--waiting {
                            font-size: $fs + 2px;
                            width: $ss;
                            height: $ss;
                            line-height: $ss - 4px;
                        }
                    }
                    &__desc {
                        .major-title {
                            font-size: $fs + 2px;
                        }
                        .minor-title {
                            font-size: $fs - 2px;
                            top: 16px + $fs / 2;
                        }
                    }
                }
            }
            &.#{$prefix}-step--vertical {
                .#{$prefix}-step-item {
                    &__line {
                        transform: translateX(($ss - 2px)/2);
                    }
                }
            }
        }
    }
}