@layer components{.timeline{--timeline-distance-from-line:var(--spacing-m);--timeline-bullet-size:var(--spacing-normal);--timeline-accent-color:var(--color-font-light);--timeline-accent-color-hover:var(--color-primary);--timeline-line-width:var(--spacing-2px);--timeline-position:relative;--timeline-width:var(--content-width-with-padding);--timeline-display:block;--timeline-gap:var(--spacing-normal);--timeline-max-width:fit-content;--timeline-margin:var(--spacing-between-elements-normal) auto var(--spacing-xl) auto;--timeline-padding:0 0 0 var(--spacing-l);--timeline-before-position:absolute;--timeline-before-top:0;--timeline-container-display:flex;--timeline-container-gap:var(--spacing-normal);--timeline-container-position:relative;display:var(--timeline-display);margin:var(--timeline-margin);max-width:var(--timeline-max-width);padding:var(--timeline-padding);position:var(--timeline-position);width:var(--timeline-width)}.timeline[timeline-direction=vertical]{--timeline-container-flex-direction:column;--timeline-before-width:1px;--timeline-before-height:100%;--timeline-before-left:calc(var(--timeline-bullet-size)/2);--timeline-before-border-left:var(--timeline-line-width) solid var(--timeline-accent-color)}.timeline[timeline-direction=horizontal]{--timeline-width:100%;--timeline-container-flex-direction:row;--timeline-container-padding:var(--spacing-l) 0 0;--timeline-container-max-width:calc(100vw - 5rem);--timeline-before-width:100%;--timeline-before-height:1px;--timeline-before-top:var(--spacing-s);--timeline-before-left:0;--timeline-before-border-top:var(--timeline-line-width) solid var(--timeline-accent-color)}.timeline[element-design=primary]{--timeline-accent-color:var(--color-primary);--timeline-accent-color-hover:var(--color-primary-dark)}.timeline[element-design=secondary]{--timeline-accent-color:var(--color-secondary);--timeline-accent-color-hover:var(--color-secondary-dark)}.timeline[element-design=inverted]{--timeline-accent-color:var(--color-font);--timeline-accent-color-hover:var(--color-font-dark)}.timeline:before{content:"";height:var(--timeline-before-height);left:var(--timeline-before-left);position:var(--timeline-before-position);top:var(--timeline-before-top);width:var(--timeline-before-width)}.timeline[timeline-direction=vertical]:before{border-left:var(--timeline-before-border-left)}.timeline[timeline-direction=horizontal]:before{border-top:var(--timeline-before-border-top)}.timeline__container{display:var(--timeline-container-display);flex-direction:var(--timeline-container-flex-direction);gap:var(--timeline-container-gap);position:var(--timeline-container-position)}.timeline__container::-webkit-scrollbar{display:none}.timeline[timeline-direction=horizontal] .timeline__container{max-width:var(--timeline-container-max-width);overflow-x:auto;padding:var(--timeline-container-padding)}@container (width >= 520px){.timeline{--timeline-margin:var(--spacing-between-elements-normal) auto var(--spacing-xl)}}@container (width >= 840px){.timeline{--timeline-max-width:min(var(--content-width-with-padding),var(--content-wide-max-width));--timeline-width:fit-content;--timeline-padding:0}.timeline[timeline-show-legend]{--timeline-legend-display:flex}.timeline[timeline-direction=vertical]{--timeline-display:flex;--timeline-before-top:0;--timeline-before-left:50%;gap:var(--timeline-gap)}.timeline[timeline-direction=vertical][timeline-show-legend]{--timeline-legend-width:4.75rem;--timeline-width:calc(var(--content-max-width) + var(--timeline-legend-width) + var(--timeline-gap))}.timeline[timeline-direction=vertical][timeline-show-legend]:before{transform:translateX(calc(var(--timeline-legend-width)/2 + var(--timeline-gap)/2))}.timeline[timeline-direction=horizontal]{--timeline-display:flex;--timeline-flex-direction:column;--timeline-container-max-width:calc(100vw - 2rem);--timeline-width:fit-content;flex-direction:var(--timeline-flex-direction);gap:var(--timeline-gap)}.timeline[timeline-direction=horizontal][timeline-show-legend]{--timeline-before-top:84px;--timeline-legend-width:fit-content}}@container (width >= 1170px){.timeline[timeline-direction=vertical][timeline-show-legend]{transform:translateX(calc(var(--timeline-legend-width)/2*-1 + var(--timeline-gap)/2*-1))}}@container (width >= 1240px){.timeline[timeline-direction=vertical]{--timeline-gap:var(--spacing-l)}}}