.timeline {
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(50% - 2px);
        height: 100%;
        width: 4px;
        background: var(--bg-body);
        border-radius: .25rem;
    }
    
    .timeline-element {
        position: relative;
        margin: 0 0 1rem;
        
        &:nth-child(odd) .timeline-element-content {
            margin-left: calc(50% + 30px);
            text-align: left;
            
            .timeline-element-date {
                left: 0;
                margin-left: -130px;
                text-align: right;
                padding-right: 10px;
            }
        }
        
        &:nth-child(even) .timeline-element-content {
            margin-right: calc(50% + 30px);
            text-align: right;
            
            .timeline-element-date {
                right: 0;
                margin-right: -130px;
                text-align: left;
                padding-left: 10px;
            }
        }
    }
}

.timeline-element-icon {
    position: absolute;
    left: calc(50% - 12px);
    
    .badge-dot {
        width: 24px;
        height: 24px;
        position: relative;
        box-shadow: 0 0 0 5px var(--bg-base);
        
        &::before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: .25rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -5px 0 0 -5px;
        }
    }
}

.timeline-element-content {
    position: relative;
    font-size: .8rem;
    
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .timeline-title {
        font-size: .8rem;
        text-transform: uppercase;
        margin-bottom: .5rem;
        font-weight: bold;
        color: var(--color-base);
    }
    
    .timeline-element-date {
        display: block;
        position: absolute;
        top: 0;
        color: var(--secondary-color);
        font-size: .7619rem;
        white-space: nowrap;
    }
} 