:where(.sd-timeline) {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sd-timeline-card-gap, 0px);
}
@media screen and (max-width: 778px) {
  :where(.sd-timeline) {
    align-items: flex-end;
  }
}

:where(.sd-timeline__line) {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  translate: -50% 0;
  background-color: var(--sd-primary, #333);
  width: var(--sd-timeline-line-width, 4px);
}
@media screen and (max-width: 778px) {
  :where(.sd-timeline__line) {
    left: 0;
  }
}

:where(.sd-timeline__card) {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 778px) {
  :where(.sd-timeline__card) {
    padding-inline-start: var(--sd-timeline-space-to-line, 20px);
  }
}
@media screen and (min-width: 779px) {
  :where(.sd-timeline__card) {
    width: 50%;
  }
  :where(.sd-timeline__card):nth-child(even) {
    align-self: flex-start;
    padding-inline-end: var(--sd-timeline-space-to-line, 20px);
  }
  :where(.sd-timeline__card):nth-child(even) .sd-timeline__dot {
    --dot-translateX: 50%;
    right: 0;
  }
  :where(.sd-timeline__card):nth-child(odd) {
    align-self: flex-end;
    padding-inline-start: var(--sd-timeline-space-to-line, 20px);
  }
  :where(.sd-timeline__card):nth-child(odd) .sd-timeline__dot {
    --dot-translateX: -50%;
    left: 0;
  }
}

:where(.sd-timeline__dot) {
  --dot-translateX: 0;
  --dot-translateY: 0;
  position: absolute;
  top: var(--sd-timline-dot-top, 0);
  aspect-ratio: 1;
  display: inline-block;
  translate: var(--dot-translateX, 0) var(--dot-translateY, 0);
  background-color: var(--sd-primary, #333);
}
@media screen and (max-width: 778px) {
  :where(.sd-timeline__dot) {
    --dot-translateX: -50%;
    left: 0;
  }
}

:where(.sd-timeline__dot.sd-timeline__dot--top) {
  --dot-translateY: 0;
  top: 0;
}
:where(.sd-timeline__dot.sd-timeline__dot--top)[--sd-timeline-dot-position=top] {
  --dot-translateY: 0;
  top: 0;
}

:where(.sd-timeline__dot.sd-timeline__dot--center) {
  --dot-translateY: -50%;
  top: 50%;
}
:where(.sd-timeline__dot.sd-timeline__dot--center)[--sd-timeline-dot-position=center] {
  --dot-translateY: -50%;
  top: 50%;
}

:where(.sd-timeline__dot.sd-timeline__dot--bottom) {
  --dot-translateY: -100%;
  top: 100%;
}
:where(.sd-timeline__dot.sd-timeline__dot--bottom)[--sd-timeline-dot-position=bottom] {
  --dot-translateY: -100%;
  top: 100%;
}

:where(.sd-timeline__line:has(+ .sd-timeline__card .sd-timeline__dot--top)) {
  mask: linear-gradient(to bottom, black 70%, transparent 100%);
}

:where(.sd-timeline__line:has(+ .sd-timeline__card .sd-timeline__dot--center)) {
  mask: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

:where(.sd-timeline__line:has(+ .sd-timeline__card .sd-timeline__dot--bottom)) {
  mask: linear-gradient(to bottom, transparent 0%, black 30%);
}

:where(.sd-timeline__content) {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--sd-content-gap, 16px);
}

:where(.sd-timeline__lightbox) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
:where(.sd-timeline__lightbox).is-open {
  display: flex;
}

:where(.sd-timeline__lightbox-content) {
  max-height: 80vh;
  overflow-y: auto;
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-content-gap, 16px);
  padding: var(--sd-space-m, 16px);
  background-color: var(--sd-secondary, #fff);
}