@import './var.scss';

:root {
    --timeline-header-font-size: #{$timeline-header-font-size};
    --timeline-footer-font-size: #{$timeline-footer-font-size};
    --timeline-padding: #{$timeline-padding};
    --timeline-bg: #{$timeline-bg};
    --timeline-white-bg: #{$timeline-white-bg};
    --timeline-content-bg: #{$timeline-content-bg};
    --timeline-content-dash-bg: #{$timeline-content-dash-bg};
}

.jing-timeline {
    position: relative;
    padding: var(--timeline-padding) 0;

    &__items {
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        margin: 0;
    }

    &--item {
        position: relative;
        height: 4rem;
        text-align: center;

        &:first-child {
            .jing-timeline--item__percent {
                display: block;
                width: 50%;
                left: 60%;
                z-index: 2;
            }

            .jing-timeline--item__step {
                display: block;
                width: 50%;
                left: 60%;
                z-index: 1;
            }
        }

        &:last-child {
            .jing-timeline-item__step-dashed {
                width: 100%;
            }
        }

        &__step {
            position: absolute;
            top: 50%;
            left: -50%;
            background: var(--timeline-bg);
            transform: translate(0, -50%);
            width: 100%;
            height: 3px;
            z-index: 2;
        }

        &__header {
            height: 1rem;
            line-height: 1rem;
            // font-size: $am-sm;
            font-size: var(--timeline-header-font-size);
        }

        &__contents {
            width: 20px;
            height: 20px;
            background: var(--timeline-white-bg);
            position: absolute;
            z-index: 4;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &__content {
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--timeline-content-bg);
            position: absolute;
            z-index: 4;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            &--dashed {
                background: transparent;
                border: 3px solid var(--timeline-content-dash-bg);
                width: 12px;
                height: 12px;
                border-radius: 50%;
            }
        }

        &__footer {
            margin-top: 2rem;
            font-size: var(--timeline-footer-font-size);
            height: 1rem;
            line-height: 1rem;
        }
    }

    &--percent {
        width: auto !important;
        height: 100%;
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        margin-bottom: 0 !important;
        em {
            z-index: 3;
            transform: translate(0, -50%);
            position: absolute;
            left: 0;
            top: 50%;
            height: 3px;
        }
    }
}