@import '../default/var';

.#{$prefix}-timeline {
    display: flex;
    flex-direction: column;
    &.is-reverse {
        flex-direction: column-reverse;
        .#{$prefix}-timeline-item {
            &:first-of-type {
                .#{$prefix}-timeline-item__line {
                    display: none;
                }
            }
            &:last-of-type {
                .#{$prefix}-timeline-item__line {
                    display: block;
                }
            }
        }
    }
    .#{$prefix}-timeline-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        box-sizing: border-box;
        position: relative;
        &:last-of-type {
            .#{$prefix}-timeline-item__line {
                display: none;
            }
        }
        &__line {
            flex: 1;
            width: 2px;
            background: $timeline-color-passed;
            transform: translateX(5px);
            position: absolute;
            z-index: 0;
            height: 100%;
        }
        &__main {
            position: relative;
            z-index: 1;
        }
        &__desc {
            padding: 0 10px;
            box-sizing: border-box;
            margin-left: 10px;
            margin-bottom: 40px;
            &__title {
                font-weight: bold;
                font-size: 14px;
                line-height: 1;
                margin-bottom: 6px;
                color: $timeline-color-fore-major;
            }
            &__time {
                background: #F0F5FF;
                border: 1px solid #E6EDFF;
                border-radius: 4px;
                color: $timeline-color-fore-minor;
                display: inline-block;
                padding: 2px 5px;
                margin: 10px 0;
            }
            &__content {
                width: 100%;
                font-size: 14px;
                color: $timeline-color-fore-minor;
            }
        }
        &__icon {
            width: 12px;
            box-sizing: border-box;
            height: 12px;
            border-radius: 50%;
            border: solid 2px $timeline-color-passed;
            background-color: #fff;
            float: left;
            &--active {
                border: solid 1px $timeline-color-active;
                background-color: $timeline-color-active;
            }
        }
        &:last-of-type {
            flex: unset;
            .#{$prefix}-step-item__desc {
                flex: 1;
            }
            .#{$prefix}-step-item__line {
                flex: 0;
            }
        }
    }
}