@import url("./design-system/tokens.css");
@import url("./design-system/base.css");
@import url("./design-system/layout.css");
@import url("./design-system/forms.css");
@import url("./design-system/buttons.css");
@import url("./design-system/components.css");
@import url("./design-system/navigation.css");
@import url("./design-system/utilities.css");

.timeline {

    position: relative;

    margin: 0;

    padding-left: 40px;

}


.timeline-item {

    position: relative;

    padding-bottom: 32px;

}


.timeline-item::before {

    content: "";

    position: absolute;

    left: -25px;

    top: 24px;

    bottom: -8px;

    width: 1px;

    background: var(--color-border);

}


.timeline-item:last-child::before {

    display: none;

}


.timeline-marker {

    position: absolute;

    left: -40px;

    top: 0;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: 600;

    background: var(--color-primary);

    color: white;

}


.timeline-content {

    border: 1px solid var(--color-border);

    border-radius: 12px;

    padding: 16px;

    background: white;

}


.timeline-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}