// This stylesheet defines styles for use in the comments and request history merged timeline
.timeline {
    --timeline-bg: var(--bs-card-bg);
    $timeline-border-width: 0.125rem;
    $timeline-item-avatar-width: 1.5rem;
    $timeline-item-avatar-height: 1.5rem;
    $timeline-offset: -(($timeline-item-avatar-width / 2) + ($timeline-border-width / 2));
    border-left: $timeline-border-width solid var(--bs-border-color);

    .timeline-item {
        position: relative;
        left: $timeline-offset; // The avatars of users involved in timeline items will be displayed on the timeline border

        .d-flex {
            i:first-child {
                padding-top: $timeline-item-avatar-height / 2;
                height: $timeline-item-avatar-height;
                width: $timeline-item-avatar-width;
                text-align: center;
                background-color: var(--timeline-bg);
            }

            a > i:first-child{
                background: none;
            }
        }

        $timeline-item-avatar-margin: 0.5rem;
        img.avatars-counter {
            margin-left: $timeline-item-avatar-margin;
            margin-right: $timeline-item-avatar-margin;
        }

        .timeline-item-comment {
            margin-left: $timeline-item-avatar-width + ($avatars-counter-size / 2);
        }

        i.timeline-break, i.timeline-offset {
            @extend .py-1;
            @extend .me-2;
            @extend .fas;
            @extend .fa-ellipsis-vertical;
        }
        i.timeline-break {
            background-color: var(--timeline-bg);
            color: var(--bs-body-color)
        }
        a:hover i.timeline-break {
            filter: none;
        }
        i.timeline-offset {
            color: transparent;
            @extend .ms-3;
        }
    }

    .collapse:not(.comment-edit), .collapsing:not(.comment-edit) {
        position: relative;
        left: $timeline-offset;
        .timeline-item {
            left: 0;
        }
    }
}
