flyonui/components/timeline.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}@media (width>=640px){.sm\:timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.sm\:timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.sm\:timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.sm\:timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.sm\:timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.sm\:timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.sm\:timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.sm\:timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.sm\:timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.sm\:timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}}@media (width>=768px){.md\:timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.md\:timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.md\:timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.md\:timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.md\:timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.md\:timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.md\:timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.md\:timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.md\:timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.md\:timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}}@media (width>=1024px){.lg\:timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.lg\:timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.lg\:timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.lg\:timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.lg\:timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.lg\:timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.lg\:timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.lg\:timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.lg\:timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.lg\:timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}}@media (width>=1280px){.xl\:timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.xl\:timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.xl\:timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.xl\:timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.xl\:timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.xl\:timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.xl\:timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.xl\:timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.xl\:timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.xl\:timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}}@media (width>=1536px){.\32 xl\:timeline{display:flex;position:relative;&>li{grid-template-rows:var(--timeline-row-start,minmax(0,1fr))auto var(--timeline-row-end,minmax(0,1fr));grid-template-columns:var(--timeline-col-start,minmax(0,1fr))auto var(--timeline-col-end,minmax(0,1fr));flex-shrink:0;align-items:center;display:grid;position:relative;&>hr{border:none;width:100%;@media print{border:.1px solid var(--color-base-300)}&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& :where(hr){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);border-color:#0000;height:1.5px}&:has(.timeline-middle hr){&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}&:not(:has(.timeline-middle)){& :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}& :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}.\32 xl\:timeline-box{border:var(--border)solid;border-radius:var(--radius-box);border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);padding-block:.25rem;padding-inline:1rem}.\32 xl\:timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.5rem}.\32 xl\:timeline-middle{grid-row-start:2;grid-column-start:2;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.\32 xl\:timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}.\32 xl\:timeline-compact{&,&.timeline-horizontal{--timeline-row-start:0;& .timeline-start{grid-area:3/1/4/4;place-self:flex-start center;margin:.5rem}& li:has(.timeline-start){& .timeline-end{grid-row-start:auto;grid-column-start:none}}}&.timeline-vertical{&>li{--timeline-col-start:0}& .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}& li:has(.timeline-start){& .timeline-end{grid-row-start:none;grid-column-start:auto}}& .timeline-shift{& .timeline-start{grid-column:3/4;grid-row-start:3}& .timeline-end{grid-area:1/3/2/4}}}}.\32 xl\:timeline-snap-icon{&>:where(li){--timeline-col-start:.5rem;--timeline-row-start:minmax(0,1fr)}}.\32 xl\:timeline-vertical{flex-direction:column;&>li{--timeline-row-start:minmax(0,1fr);--timeline-row-end:minmax(0,1fr);justify-items:center;&>hr{width:1.5px;height:100%;&:first-child{grid-row-start:1;grid-column-start:2}&:last-child{grid-area:3/2/none}}}& .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}& .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}&:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}}& :last-child{&>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}}}&:where(.timeline-snap-icon){&>li{--timeline-col-start:minmax(0,1fr);--timeline-row-start:.5rem}}}.\32 xl\:timeline-horizontal{flex-direction:row;&>li{align-items:center;&>hr{width:100%;height:1.5px;min-height:0;&:first-child{grid-row-start:2;grid-column-start:1}&:last-child{grid-area:2/3/auto/none}}}& .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}& .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}&:has(.timeline-middle){&>li{&>hr{&:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}&:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}}}&:not(:has(.timeline-middle)){& :first-child{&>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}}& :last-child{&>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}}}}.\32 xl\:timeline-centered{& .timeline-start,& .timeline-end{align-self:flex-start}}}}