@timeline-prefix-cls: ~"@{prefix}timeline";

.genbordercolor(@name){
    &.@{name}{
        border-color:@@name;
    }
}

.@{timeline-prefix-cls} {
    list-style: none;
    margin: 0;
    padding: 0 10px;

    &-item {
        list-style: none;
        position: relative;
        display: flex;

        &-pending &-tail {
            display: none;
        }

        &-time {
            width: 100px;
            text-align: right;
            padding: 0px 24px 30px 0px;
            color: @gray-color;
            font-size: 13px;
            display: none;
            text-align: right;
        }

        &-content {
            padding: 0px 0px 30px 24px;
            position: relative;
            flex:1;
            &:after{
                content: '';
                position: absolute;
                top: 3px;
                bottom: 0px;
                left: -0.5px;
                border-left: 1px dashed @gray1-color;
                z-index: -1;
            }
        }


        &-circle {
            position: absolute;
            width: 14px;
            height: 14px;
            border: 1px solid @blue-color;
            border-radius: 14px;
            left: -7px;
            top: 3px;
            background: #FFF;

            .genbordercolor(green-color);
            .genbordercolor(red-color);
            .genbordercolor(yellow-color);
        }

        &.has-icon .@{timeline-prefix-cls}-item-circle{
            font-size: 14px;
            border: none;
        }

        &:last-child {
            .@{timeline-prefix-cls}-item{
                &-content,&-time {
                    padding-bottom: 10px;
                    &:after{
                        border-left:1px solid transparent;
                    }
                }
            }
        }
    }



    &-time{
        .@{timeline-prefix-cls}-item-time{
            display: block;
        }
    }

    &-pending &-item{
        &:nth-last-of-type(2) {
            .@{timeline-prefix-cls}-item-content{
                padding-bottom: 40px;
                &:after {
                    border-left: 1px dotted @gray2-color;
                }
            }
        }
    }
}