
@timeline-icon-size:      @font-size-large*3;
@timeline-icon-font-size: @font-size-large;
@timeline-lines-width:    4px;
@timeline-lines-color:    #999;
@timeline-endpoint-size:  @font-size-large;

.user-timeline {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin-bottom: @component-margin-bottom;

    &:before {
        z-index: 1;
        content: " ";
        position: absolute;
        border-left: @timeline-lines-width dashed @timeline-lines-color;
        top: @timeline-endpoint-size;
        bottom: @timeline-endpoint-size;
        left: @timeline-icon-size/2 - @timeline-lines-width/2;
    }

    .timeline-endpoint:first-child {
        margin-bottom: @component-margin-bottom;

        &:before {
            content: " ";
            position: absolute;
            top: 0;
            left: @timeline-icon-size/2 - @timeline-endpoint-size/2;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 @timeline-endpoint-size/2 @timeline-endpoint-size @timeline-endpoint-size/2;
            border-color: transparent transparent @timeline-lines-color transparent;
        }
    }

    .timeline-endpoint:last-child {
        &:before {
            content: " ";
            position: absolute;
            left: @timeline-icon-size/2 - @timeline-endpoint-size/2;
            bottom: 0;
            border-radius: 50%;
            width: @timeline-endpoint-size;
            height: @timeline-endpoint-size;
            background: @timeline-lines-color;
        }
    }
}

.timeline-event-date {
    line-height: @timeline-endpoint-size;
    font-size: @font-size-small;
    font-style: italic;
}

.timeline-endpoint {
    position: relative;
    font-weight: bold;
    color: #777;
    padding-left: @timeline-icon-size + @grid-gutter-width;
}

.timeline-event-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    margin-bottom: @component-margin-bottom;

    &:before {
        position: absolute;
        z-index: 1;
        content: " ";
        left: @timeline-icon-size;
        top: @timeline-icon-size/2 - @timeline-lines-width/2;
        width: @grid-gutter-width;
        height: @timeline-lines-width;
    }

    .timeline-event-icon {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 50%;
        font-size: @timeline-icon-font-size;
        width: @timeline-icon-size;
        height: @timeline-icon-size;
    }

    // event states
    .timeline-event-variant(@text-color, #ededed, #ededed);

    &.timeline-event-success {
        .timeline-event-variant(@state-success-text, @state-success-bg, @state-success-border);
    }
    &.timeline-event-partial {
        .timeline-event-variant(@state-warning-text, @state-warning-bg, @state-warning-border);
    }
    &.timeline-event-failure {
        .timeline-event-variant(@state-danger-text, @state-danger-bg, @state-danger-border);
    }
}

.timeline-event {
    position: relative;
    flex: 1;
    margin-left: @grid-gutter-width;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: @border-radius-base;

    .timeline-event-status {
        position: absolute;
        right: -1px;
        top: -1px;
        padding: 5px;
        border-radius: 0 @border-radius-base 0 @border-radius-base;
        box-sizing: content-box !important;
    }

    // todo make event vertical on sm screens
    /*.timeline-event-block {
        color: @text-color;
        display: flex;
        flex-direction: row;
        background: white;
        border-radius: @panel-border-radius;
        border: 1px solid @panel-default-border;

        .box-shadow(@panel-box-shadow);
    }

    .timeline-event-header {
        min-width: 100% / 3;
        text-align: center;
        background: @gray-lightest; // same as grid items
        border-right: 1px solid #ddd; // same as grid items
        border-radius: @panel-border-radius 0 0 @panel-border-radius;

        .resource-icon {
            max-height: fit-content;
        }
    }

    .timeline-event-content {
        flex: 100%;
        padding: @panel-body-padding;
    }

    .timeline-event-title {
        margin-top: 0;
        font-size: @font-size-large;
        font-weight: bold;

        > small {
            margin-top: 5px;
            display: block;
        }
    }*/
}

.timeline-event-progression {
    display: flex;
    padding: @panel-body-padding;

    .score-gauge.c100:after {
        background: @panel-bg;
    }
}

.timeline-event-variant(@color, @bg-color, @border-color) {
    &:before {
        background: @bg-color;
        border-color: @border-color;
    }

    .timeline-event-status {
        color: @bg-color;
        border-color: @color;
        background: @color;
    }

    .timeline-event-icon {
        color: @color;
        border-color: @border-color;
        background: @bg-color;
    }

    .timeline-event {
        color: @color;
        border-color: @border-color;
        background: @bg-color;
    }
}