@arrow-size         : 10px;
@time-item-width    : 45%;
@bullet-radius-size : 10px;

.time-line when (@time-line) {
    position : relative;
    .clearfix();

    &::before {
        content    : '';
        position   : absolute;
        left       : 0;
        right      : 0;
        margin     : auto;
        height     : 100%;
        width      : floor(@bullet-radius-size * 2 / 3);
        background : @gray-lighter;
    }

    .time-item {
        margin  : 0;
        padding : 0;
        height  : @bullet-radius-size * 5;

        // ODD POSTS
        &:nth-child(odd) {
            & + .time-item .time-content {
            }

            .time-content {
                clear : left;
                float : left;

                &::before {
                    margin-right : -@bullet-radius-size;
                    right        : -(unit((50 - @time-item-width) / @time-item-width * 100, %));
                }
                &::after {
                    left         : 100%;
                    border-right : none;
                }
            }
        }
        // EVEN POSTS
        &:nth-child(even) {
            & + .time-item .time-content {
                top : 5em;
            }

            .time-content {
                clear : right;
                float : right;

                &::before {
                    margin-left : -@bullet-radius-size;
                    left        : -(unit((50 - @time-item-width) / @time-item-width * 100, %));
                }
                &::after {
                    right       : 100%;
                    border-left : none;
                }
            }
        }
    }

    .time-content {
        position      : relative;
        width         : @time-item-width;
        padding       : @padding-base-vertical @padding-base-horizontal;
        margin-bottom : 2em;
        z-index       : 1;
        background    : @gray-lighter;

        // ARROW & DOT
        &::before, &::after {
            content  : '';
            position : absolute;
        }

        // BULLET
        &::before {
            top           : 10px;
            width         : 0;
            height        : 0;
            border-radius : 99em;
            border        : @bullet-radius-size solid @gray-lighter;
        }

        // ARROW
        &::after {
            top          : 10px + @bullet-radius-size - @arrow-size;
            width        : 0;
            height       : 0;
            border-width : @arrow-size;
            border-style : solid;
            border-color : transparent @gray-lighter;
        }
    }
}