/*
|--------------------------------------------------------------------------
| Linha do tempo (histórico)
|--------------------------------------------------------------------------
|
| Histórico de um registro agrupado por dia: data fixa à esquerda,
| acontecimentos numa trilha à direita. Usado em: histórico do processo
| seletivo, conexões de Wi-Fi, auditoria de alterações.
|
|   <ol class="ds-timeline">
|     <li class="ds-timeline__day">
|       <div class="ds-timeline__date"><time> 24 · set · quinta </time></div>
|       <ol class="ds-timeline__events">
|         <li class="ds-timeline__event"> hora | texto | detalhe </li>
|
*/

.ds-timeline,
.ds-timeline__events {
    margin: 0;
    padding: 0;

    list-style: none;
}

.ds-timeline__day {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: var(--ds-space-4);

    padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-1);

    border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-timeline__day:first-child {
    border-top: 0;
}

.ds-timeline__date {
    position: sticky;
    top: var(--ds-space-4);

    align-self: start;
}

.ds-timeline__date time {
    display: flex;
    flex-direction: column;
}

.ds-timeline__day-num {
    color: var(--ds-color-text);

    font: 600 24px/1 var(--ds-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ds-timeline__month {
    margin-top: var(--ds-space-1);

    font: var(--ds-text-label);
}

.ds-timeline__weekday {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-caption);
}

.ds-timeline__event {
    position: relative;

    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    column-gap: var(--ds-space-3);

    padding: 0 0 var(--ds-space-3) var(--ds-space-5);
}

.ds-timeline__event::before {
    content: "";

    position: absolute;
    top: 13px;
    bottom: -3px;
    left: 3px;

    width: 1px;

    background: var(--ds-color-border);
}

.ds-timeline__event:last-child::before {
    display: none;
}

.ds-timeline__event::after {
    content: "";

    position: absolute;
    top: 6px;
    left: 0;

    width: 7px;
    height: 7px;

    border: 2px solid var(--ds-timeline-dot, var(--ds-color-border-control));
    border-radius: 50%;

    background: var(--ds-color-surface);
}

.ds-timeline__event--primary { --ds-timeline-dot: var(--ds-color-primary); }
.ds-timeline__event--success { --ds-timeline-dot: var(--ds-color-success-icon); }
.ds-timeline__event--warning { --ds-timeline-dot: var(--ds-color-warning-icon); }
.ds-timeline__event--danger { --ds-timeline-dot: var(--ds-color-danger-solid); }

.ds-timeline__time {
    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);
    font-variant-numeric: tabular-nums;
}

.ds-timeline__title {
    font: var(--ds-text-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.ds-timeline__detail {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-caption);
}

.ds-timeline__aside {
    color: var(--ds-color-text-secondary);

    font: var(--ds-text-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ds-timeline__day {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ds-space-2);

        padding-right: var(--ds-space-4);
        padding-left: var(--ds-space-4);
    }

    .ds-timeline__date {
        position: static;
    }

    .ds-timeline__date time {
        flex-direction: row;
        align-items: baseline;
        gap: var(--ds-space-1-5);
    }

    .ds-timeline__day-num {
        font-size: 20px;
    }

    .ds-timeline__month {
        margin-top: 0;
    }

    .ds-timeline__event {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ds-timeline__time {
        grid-column: 1 / -1;
    }
}