/* =========================
   TIMELINE BASE
========================= */
.fluent-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-lg);
}

/* GROUP */
.fluent-timeline__group {
    display: flex;
    flex-direction: column;
}

/* DATE LABEL */
.fluent-timeline__date {
    font-size: 12px;
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-secondary);
    margin-bottom: var(--ms-space-sm);
}

/* ITEM */
.fluent-timeline__item {
    display: flex;
    gap: var(--ms-space-md);
    position: relative;
    padding-left: 4px;
}

/* LINE */
.fluent-timeline__item::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: -12px;
    width: 1px;
    background: var(--ms-color-border-subtle);
}

.fluent-timeline__item:hover {
    background: var(--ms-color-neutral-50);
    border-radius: var(--ms-radius-sm);
}

/* LAST ITEM REMOVE LINE */
.fluent-timeline__item:last-child::before {
    display: none;
}

/* DOT */
.fluent-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--ms-color-border-subtle);
}

/* COLORS */
.fluent-timeline__dot.is-success {
    background: var(--ms-color-success);
}
.fluent-timeline__dot.is-primary {
    background: var(--ms-color-primary);
}
.fluent-timeline__dot.is-danger {
    background: var(--ms-color-danger);
}
.fluent-timeline__dot.is-default {
    background: var(--ms-color-neutral-400);
}

/* CONTENT */
.fluent-timeline__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* TITLE */
.fluent-timeline__title {
    font-size: 14px;
    color: var(--ms-color-text-primary);
}

/* META */
.fluent-timeline__meta {
    display: flex;
    gap: var(--ms-space-sm);
    align-items: center;
}

/* URL */
.fluent-timeline__url {
    max-width: 260px;
    font-size: 12px;
    color: var(--ms-color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TIME */
.fluent-timeline__time {
    font-size: 11px;
    color: var(--ms-color-text-muted);
    white-space: nowrap;
}