@use '../../styles/variables';

.thy-timeline-item {
    position: relative;
    margin: 0;
    padding-bottom: 20px;
    display: block;
    .thy-timeline-item-tail {
        position: absolute;
        top: 7px;
        left: 3px;
        height: calc(100% - 7px);
        border-left: 1px solid variables.$gray-200;
    }
    .thy-timeline-item-dot {
        position: absolute;
        width: 7px;
        height: 7px;
        background-color: variables.$bg-default;
        border: 1px solid transparent;
        border-radius: 50%;
    }
    .thy-timeline-item-dot-custom {
        position: absolute;
        top: 6px;
        left: 5px;
        width: auto;
        height: auto;
        margin-top: 0;
        padding: 3px 1px;
        line-height: 1;
        text-align: center;
        border: 0;
        border-radius: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .thy-timeline-item-content {
        position: relative;
        top: -7px;
        margin: 0 0 0 26px;
        word-break: break-word;
    }
    .thy-timeline-item-dot-primary {
        border-color: variables.$primary;
        color: variables.$primary;
    }
    .thy-timeline-item-dot-success {
        border-color: variables.$success;
        color: variables.$success;
    }
    .thy-timeline-item-dot-warning {
        border-color: variables.$warning;
        color: variables.$warning;
    }
    .thy-timeline-item-dot-danger {
        border-color: variables.$danger;
        color: variables.$danger;
    }
    .thy-timeline-item-dot-info {
        border-color: variables.$gray-200;
        color: variables.$gray-200;
    }
}
.thy-timeline.thy-timeline-right {
    .thy-timeline-item-right .thy-timeline-item-dot,
    .thy-timeline-item-right .thy-timeline-item-dot-custom,
    .thy-timeline-item-right .thy-timeline-item-tail {
        left: calc(100% - 6px);
    }
    .thy-timeline-item-right .thy-timeline-item-dot {
        margin-left: -3px;
    }
    .thy-timeline-item-right .thy-timeline-item-dot-custom {
        margin-left: 1px;
    }
    .thy-timeline-item-right .thy-timeline-item-content {
        text-align: right;
        margin: 0;
        width: calc(100% - 18px);
    }
}
.thy-timeline.thy-timeline-center,
.thy-timeline.thy-timeline-template {
    .thy-timeline-item-dot,
    .thy-timeline-item-dot-custom,
    .thy-timeline-item-tail {
        left: 50%;
    }
    .thy-timeline-item-dot {
        margin-left: -3px;
    }
    .thy-timeline-item-dot-custom {
        margin-left: 1px;
    }
    .thy-timeline-item-right .thy-timeline-item-content {
        width: calc(50% - 12px);
        margin: 0;
        text-align: right;
    }
    .thy-timeline-item-right .thy-timeline-item-content-other-side {
        left: calc(50% + 14px);
        width: calc(50% - 14px);
        text-align: left;
    }
    .thy-timeline-item-left .thy-timeline-item-content {
        left: calc(50% - 4px);
        width: calc(50% - 14px);
        text-align: left;
    }
}
.thy-timeline.thy-timeline-template {
    .thy-timeline-item-content-other-side {
        position: absolute;
        top: -7px;
        width: calc(50% - 14px);
        text-align: right;
    }
    .thy-timeline-item-reverse-first .thy-timeline-item-content-other-side {
        top: 23px;
    }
}
.thy-timeline-item-reverse-last {
    .thy-timeline-item-tail {
        height: 0;
    }
}
.thy-timeline-item-reverse-first {
    padding-top: 30px;
    .thy-timeline-item-tail {
        top: 0;
        height: 100%;
    }
    .thy-timeline-item-dot-custom {
        top: 34px;
    }
    .thy-timeline-item-content-other-side {
        top: 23px;
    }
}

.thy-timeline {
    &-horizontal {
        display: flex;
        overflow-x: auto;
        .thy-timeline-item {
            min-width: 160px;
            &-last {
                display: block;
                .thy-timeline-item-tail {
                    border-bottom: none;
                }
            }
            &-tail {
                position: absolute;
                top: 3px;
                width: 100%;
                border-bottom: 1px solid variables.$gray-200;
                height: 0;
                top: 40px;
            }

            &-content {
                left: 0;
                margin: 56px 0 0 0;
                text-align: center;
                top: 0;
            }
            &-dot {
                left: 50%;
                top: 40px;
                margin-top: -3px;
            }

            .thy-timeline-item-content-other-side {
                top: 0;
                text-align: center;
                width: 100%;
            }
        }
    }
}
