/*
Timeline

The timeline component is make up of multiple elements
* timeline - vertical line that "cards" will align to
* timeline icon
* timeline card
* "tail-cover" that hides the "tail" after the last update

Markup:
<div>
    <div class="timeline" style="width: 620px; display: inline-block;">
        <div style="position:relative;">
            <div class="timeline__icon-container" style="position: relative; box-sizing: border-box;">
                <div class="timeline__icon-circle">
                    <div class="timeline__icon svgicon--comment" aria-hidden="true"></div>
                    <div class="screen-reader-only" id="event1">comment</div>
                </div>
            </div>
            <div class="timeline__card card card--with-arrow" aria-labelledby="event1" style="width: 500px; height: 120px; display: inline-block;">
                <p>Timeline content</p>
            </div>
        </div>
        <div class="form__vertical-spacer form__vertical-spacer--medium"></div>
        <div style="position:relative;">
            <div class="timeline__tail-cover" style="top: 60px"></div>
            <div class="timeline__icon-container" style="position: relative; box-sizing: border-box;">
                <div class="timeline__icon-circle">
                    <div class="timeline__icon svgicon--email"></div>
                    <div class="screen-reader-only" id="event2">email</div>
                </div>
            </div>
            <div class="timeline__card card card--with-arrow" aria-labelledby="event2" style="width: 500px; height: 120px; display: inline-block;">
                <p>Timeline content</p>
            </div>
        </div>
    </div>
</div>

Name: timeline

Styleguide 2.36
*/

//Note that the spacing here assume there is a vertical-spacer-medium between cards, which could be adjusted by overriding top and left of .timeline:before (see task summary for example)
@timeline-icon-size: 40px;
@timeline-card-spacing: 10px;
@timeline-icon-offset-top: 20px;
@timeline-tail-offset: @timeline-icon-size + @timeline-card-spacing + @timeline-icon-offset-top;

.timeline {
    position: relative;
}

.timeline__icon-container {
    float: left;
    padding-left: 15px;
    width: 90px;
}

.timeline__icon-circle {
    margin-top: @timeline-icon-offset-top;
    height: @timeline-icon-size;
    width: @timeline-icon-size;
    min-width: @timeline-icon-size;
    border-radius: 100%;
    border: 1px solid @theme-grey5;
    background: #FFFFFF no-repeat 12px center;
    background-size: 15px;
}

.timeline__icon-circle--no-top-margin {
    margin-top: 0;
}

.timeline__icon {
    height: @timeline-icon-size;
    width: @timeline-icon-size;
    background-size: 15px;
    background-position: center;
}

.timeline__card {
    &:before,
    &:after {
        top: 40px; //Note: this adjust the "triangle" next to the card
    }
}

.timeline:before {
    top: 20px;
    bottom: 20px;
    position: absolute;
    content: " ";
    width: 2px;
    background-color: @theme-grey10;
    left: 35px;
}

.timeline__tail-cover {
    position: absolute;
    left: 0;
    top: @timeline-tail-offset;
    height: ~'calc(100% - @{timeline-tail-offset})';
    width: 50px;
    background-color: #FFFFFF;
}