@use '../../scss/config.scss' as *;

// (circle width + border * 2) / 2 - line width
$leftOffset: calc(((25px + 4px) / 2) - 1px);
$rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);

.timeline {
    --color: var(--w-timeline-color, var(--w-color-primary-50));
    --text-color: var(--w-timeline-text-color, var(--w-color-primary));
    --counter: var(--w-timeline-counter, decimal);

    @include layout(flex, default, column);
    @include spacing(pl-3xl, m0);
    @include position(relative);
    @include typography(normal);

    list-style-type: none;
    counter-reset: item;

    &::before {
        @include position(absolute);
        @include size(w2px, 'h100%');
        @include background(var(--color));

        content: '';
        left: $leftOffset
    }

    &.fill > li::before {
        content: '';
    }

    &.stroke > li::before {
        @include background(primary-70);
        border: 2px solid var(--color);
    }
}

@include media('xs') {
    .timeline {
        &.alternate {
            @include spacing(p0);
    
            &::before {
                left: calc(50% - 1px);
            }
    
            > li {
                @include size('w50%');
    
                &:nth-child(odd) {
                    @include spacing(pr-3xl);
                }
    
                &:nth-child(even) {
                    @include spacing(pl-3xl);
                    align-self: flex-end;
    
                    &::before {
                        @include position(l25px);
                    }
                }
    
                &::before {
                    right: $rightOffset;
                }
            }
            
            &.icons > li {
                &:nth-child(even) > span:first-child {
                    left: 25px;
                }

                &:nth-child(odd) > span:first-child {
                    right: -15px;
                }
            }

        }
    
        &.centered > li:nth-child(odd) {
            @include typography(right);
        }
    }
}