.#{$prefix}timeline{

    &-item{
       padding-bottom: $space-base*6;
       position: relative;
       text-align: left;
       padding-left:30px;

       &__decoration{
           position: absolute;
           left:0;
           top:0;
           bottom:0;
       }
       &__line{
            display: block;
            position: absolute;
            bottom:0;
            top:0;
            left: 12px;
            width:0px;
            // border-left:1px solid $color-border;
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: $color-border;
        }

        &__dot{
            position: absolute;
            top:0;
            left:0;
            z-index: 1;
            padding:$space-base;
            min-width: 24px;
            min-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $color-bg;
        }

        &__title{
            font-size: $font-size-l;
            line-height: $line-height-fz-l;
            h3{
                font-size: $font-size-l;
            }
        }

        &__info{
            font-size: $font-size-default;
            line-height: 24px;
            margin-bottom: $space-base*2;
        }
        &__card{
            display: inline-block;
            padding:$space-base*2 $space-base*4;
            background-color:$color-bg-second;
            min-width: 240px;
            word-wrap:break-word;
            word-break:break-word;

            &-name{
                margin-bottom: $space-base;
                line-height: 22px;
                font-size: $font-size-l;
            }

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

        &:last-child{
            .#{$prefix}timeline-item__line{
                display: none;
            }
        }
        
        // &--dashline{
        //     .#{$prefix}timeline-item__line{
        //         border-style:dashed;
        //     }
        // }
        
    }

    &-operate{
        margin-top: $space-base*5;
        padding-left: 12px;

        .#{$prefix}btn--weak{
            width: 100%;
        }
    }
}

.#{$prefix}timeline--dashline{
    .#{$prefix}timeline-item__line{
        
        border-style: dashed;
    }
}

.#{$prefix}timeline--timeleft{
    .#{$prefix}timeline-item{
        display: flex;
        padding-left: 0;
        // &__title,
        &__info{
            flex:0 0 84px;
            text-align: right;
            margin-right: 32px;
        }

        &__decoration{
            left:88px
        }
        
        &__card{
            
            position: relative;
        }
    }
}

.#{$prefix}timeline--alternately{
    .#{$prefix}timeline-item{
        padding-left: 0;
        max-width: 50%;
        min-width: 240px;
        &__decoration{
            position: absolute;
            top:0;
            bottom:0;
            left:calc(100% -  12px);
        }
        &__title,
        &__info,
        &__card{
            position: relative;
            left: calc(100% + 16px);
            
        }

        &--right{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .#{$prefix}timeline-item__title,
            .#{$prefix}timeline-item__info,
            .#{$prefix}timeline-item__card{
                left:0;
                text-align: right;
                margin-right: 16px;
            }
        }
    }
}

.#{$prefix}timeline--horizontal{
    display: flex;
    .#{$prefix}timeline-item{
        padding-left: 0;
        padding-bottom: 0;
        padding-right:48px;

        &__decoration{
            height: 24px;
            top:24px;
            left:0;
            right:0;
        }
        &__dot{

        }
        &__line{
            left:0;
            right:0;
            top:12px;
            bottom:0;
            // border:none;
            // border-top:1px solid $color-border;
            border-width: 1px 0 0 0;
            width: auto;
        }
        &__info{
            margin-bottom: 30px;
            white-space: nowrap;
            margin-left: $space-base*2;
        }
        &__card{
            margin-left: $space-base*2;
        }
    }
}