// _timeline.scss // style for timeline component

@import “_base”; @import “_mixins”;

$timeline-color: $border-color-split;

.#{$lifenode-prefix}-timeline {

@include reset-component();

&-item {
    position: relative;
    padding: 0 0 20px;
    list-style: none;
    margin: 0;
    font-size: $font-size-base;

    &-tail {
        position: absolute;
        left: 4px;
        top: 0.75em;
        height: 100%;
        border-left: 2px solid $timeline-color;
    }

    &-pending &-head {
        font-size: $font-size-sm;
    }

    &-pending &-tail {
        display: none;
    }

    &-head {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: $component-background;
        border-radius: 100px;
        border: 2px solid transparent;

        &-blue {
            border-color: $primary-color;
            color: $primary-color;
        }
        &-red {
            border-color: $error-color;
            color: $error-color;
        }
        &-green {
            border-color: $success-color;
            color: $success-color;
        }
    }

    &-content {
        padding: 0 0 0 18px;
        position: relative;
        top: -($font-size-base * $line-height-base - $font-size-base) + 1px;
        &-date {
            font-size: $font-size-sm;
            color: $text-disabled-color;
        }
    }

    &:last-child {
        .#{$lifenode-prefix}-timeline-item-tail {
            border-left: 2px dotted $timeline-color;
            display: none;
        }
        .#{$lifenode-prefix}-timeline-item-content {
            min-height: 48px;
        }
    }
}

&-item:last-child &-item-tail {
    display: block;
}

}