.ds-timeline,
.ds-timeline-item {
  --timeline-bg-brand: var(--bh-bg-brand-default);
  --timeline-bg-default: var(--bh-bg-default);
  --timeline-bg-muted: var(--bh-bg-muted);
  --timeline-border-brand: var(--bh-border-brand-strong);
  --timeline-border-default: var(--bh-border-default);
  --timeline-border-muted: var(--bh-border-subtle);
  --timeline-content-default: var(--bh-content-default);
  --timeline-content-on-brand: var(--bh-content-on-brand);
  --timeline-content-subtle: var(--bh-content-subtle);
  --timeline-radius-full: var(--bh-radius-full);
  --timeline-space-xxs: var(--bh-space-xxs-2);
  --timeline-space-xs: var(--bh-space-xs-4);
  --timeline-space-sm: var(--bh-space-sm-6);
  --timeline-space-lg: var(--bh-space-lg-10);
  --timeline-space-xl: var(--bh-space-xl-12);

  box-sizing: border-box;
  color: var(--timeline-content-default);
  font-family: inherit;
  letter-spacing: 0;
}

.ds-timeline {
  font-family: var(--bh-font-family);
}

.ds-timeline *,
.ds-timeline *::before,
.ds-timeline *::after,
.ds-timeline-item *,
.ds-timeline-item *::before,
.ds-timeline-item *::after {
  box-sizing: border-box;
}

.ds-timeline--vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(var(--bh-timeline-narrow-width), 100%);
  min-width: 0;
}

.ds-timeline--horizontal {
  display: flex;
  align-items: flex-start;
  width: min(var(--bh-timeline-grid-width), 100%);
  min-width: 0;
}

.ds-timeline--rtl,
.ds-timeline-item--rtl {
  font-family: var(--bh-font-family);
}

.ds-timeline-item {
  font-family: var(--bh-font-family);
}

.ds-timeline-item--vertical {
  display: flex;
  align-items: flex-start;
  gap: var(--timeline-space-xl);
  width: 100%;
  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
}

.ds-timeline-item--vertical.ds-timeline-item--rtl {
  justify-content: flex-end;
}

.ds-timeline-item--horizontal {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--timeline-space-lg);
  align-items: flex-start;
  min-width: 0;
  width: var(--bh-timeline-sidebar-width);
}

.ds-timeline-item--horizontal.ds-timeline-item--rtl {
  align-items: flex-end;
}

.ds-timeline__indicator {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  direction: ltr;
}

.ds-timeline__indicator--vertical {
  align-self: stretch;
  flex-direction: column;
  padding-top: var(--timeline-space-xxs);
}

.ds-timeline__indicator--horizontal {
  width: 100%;
  min-width: 0;
  flex-direction: row;
}

.ds-timeline-item--icon .ds-timeline__indicator {
  gap: var(--timeline-space-xxs);
}

.ds-timeline__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--timeline-bg-brand);
}

.ds-timeline__marker--default {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
}

.ds-timeline__marker--default::before {
  content: "";
  width: var(--bh-space-lg-10);
  height: var(--bh-space-lg-10);
  border: var(--bh-space-xxs-2) solid currentColor;
  border-radius: var(--timeline-radius-full);
  background: var(--timeline-bg-default);
}

.ds-timeline__marker--default.ds-timeline__marker--inactive {
  color: var(--timeline-border-muted);
}

.ds-timeline__marker--icon {
  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  border-radius: var(--timeline-radius-full);
  color: var(--timeline-content-on-brand);
  background: var(--timeline-bg-brand);
}

.ds-timeline__marker--icon.ds-timeline__marker--inactive {
  border: var(--bh-space-xxxs-1) solid var(--timeline-border-default);
  color: var(--timeline-content-default);
  background: var(--timeline-bg-muted);
}

.ds-timeline__check {
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  display: block;
}

.ds-timeline__line {
  display: block;
  flex: 1 0 0;
  min-width: var(--bh-space-xxxs-1);
  min-height: var(--bh-space-xxxs-1);
  border-radius: var(--timeline-radius-full);
  background: var(--timeline-border-default);
}

.ds-timeline__line--finished {
  background: var(--timeline-border-brand);
}

.ds-timeline__indicator--vertical .ds-timeline__line {
  width: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1) / 2);
}

.ds-timeline__indicator--horizontal .ds-timeline__line {
  height: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
}

.ds-timeline__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--timeline-space-xs);
  align-items: flex-start;
  min-width: 0;
  color: var(--timeline-content-default);
}

.ds-timeline-item--rtl .ds-timeline__body {
  align-items: flex-end;
  text-align: right;
}

.ds-timeline-item--horizontal .ds-timeline__body {
  flex: 0 0 auto;
  width: 100%;
  padding-right: var(--timeline-space-xl);
}

.ds-timeline-item--horizontal.ds-timeline-item--rtl .ds-timeline__body {
  padding-right: 0;
  padding-left: var(--timeline-space-xl);
}

.ds-timeline__copy {
  display: flex;
  flex-direction: column;
  gap: var(--timeline-space-xs);
  width: 100%;
  min-width: 0;
}

.ds-timeline__label,
.ds-timeline__caption,
.ds-timeline__date {
  display: block;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.ds-timeline__label {
  color: var(--timeline-content-default);
  font-size: var(--bh-text-body-md-font-size);
  font-weight: var(--bh-font-weight-semibold);
  line-height: var(--bh-text-body-md-line-height);
}

.ds-timeline__caption {
  color: var(--timeline-content-subtle);
  font-size: var(--bh-text-body-sm-regular-font-size);
  font-weight: var(--bh-font-weight-regular);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-timeline__date {
  color: var(--timeline-content-subtle);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-font-weight-regular);
  line-height: var(--bh-text-body-2xs-regular-line-height);
  white-space: nowrap;
}

.ds-timeline__date--leading {
  flex: 0 0 auto;
  padding-top: var(--timeline-space-xs);
}

.ds-timeline-item--vertical.ds-timeline-item--ltr .ds-timeline__date--leading {
  text-align: right;
}

.ds-timeline-item--horizontal .ds-timeline__date--leading {
  width: 100%;
  padding-top: 0;
  text-align: start;
}

.ds-timeline-item--rtl .ds-timeline__date--leading,
.ds-timeline-item--rtl .ds-timeline__date--top,
.ds-timeline-item--rtl .ds-timeline__date--bottom {
  text-align: right;
}

.ds-timeline__date--top {
  width: 100%;
  padding-top: var(--timeline-space-xs);
}

.ds-timeline__date--bottom {
  width: 100%;
  padding-top: var(--timeline-space-sm);
}

.ds-timeline__bottom-space {
  display: block;
  width: 100%;
  height: var(--bh-space-5xl-24);
  flex: 0 0 auto;
}
