:root > * {
  --md-timeline-accent: var(--md-default-fg-color--lighter);
  --md-timeline-line-color: var(--md-default-fg-color--lighter);
  --md-timeline-card-bg: var(--md-default-bg-color);
  --md-timeline-card-border: var(--md-default-fg-color--lightest);
  --md-timeline-bullet-bg: var(--md-steps-bg-color);
  --md-timeline-bullet-fg: var(--md-steps-fg-color);
  --md-timeline-bullet-border: var(--md-steps-border-color);
  --md-timeline-ring: var(--md-default-bg-color);
}

:root > *[data-md-color-scheme="slate"] {
  --md-timeline-card-bg: hsla(232, 15%, 18%, 0.5);
}

:nth-child(1 of .timeline) {
  counter-reset: timeline-item;
}

/* Card */
.timeline {
  position: relative;
  margin: 1rem 0 1rem 3.25rem;
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  background-color: var(--md-timeline-card-bg);
  border: 1px solid var(--md-timeline-card-border);
  box-shadow:
    inset 0 0 0 0 transparent,
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;

  --md-timeline__bullet-top: 0.95em;
  --md-timeline__bullet-size: 2rem;
}

.timeline:hover {
  transform: translateY(-2px);
  border-color: var(--md-timeline-accent);
  box-shadow:
    inset 3px 0 0 0 var(--md-timeline-accent),
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Numbered bullet */
.timeline::before {
  counter-increment: timeline-item;
  content: counter(timeline-item);
  position: absolute;
  left: -3.25rem;
  top: var(--md-timeline__bullet-top);
  width: var(--md-timeline__bullet-size);
  height: var(--md-timeline__bullet-size);
  background-color: var(--md-timeline-bullet-bg);
  color: var(--md-timeline-bullet-fg);
  border: 2px solid var(--md-timeline-bullet-border);
  font-weight: 700;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline:hover::before {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Connecting line */
.timeline::after {
  content: '';
  position: absolute;
  left: calc(-3.25rem + var(--md-timeline__bullet-size) / 2 - 1px);
  --md-timeline__bullet-line-space: 0.5rem;
  top: calc(var(--md-timeline__bullet-top) + var(--md-timeline__bullet-size) + var(--md-timeline__bullet-line-space));
  bottom: calc(-1rem - var(--md-timeline__bullet-top) + var(--md-timeline__bullet-line-space));
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--md-timeline-accent) 0,
    var(--md-timeline-line-color) 60%
  );
  z-index: 1;
}

.timeline.dashed::after {
  background: none;
  border-left: 2px dashed var(--md-timeline-line-color);
  width: 0;
}

.timeline.dotted::after {
  background: none;
  border-left: 2px dotted var(--md-timeline-line-color);
  width: 0;
}

/* Last item: no line */
:nth-last-child(1 of .timeline)::after {
  display: none;
}

/* Marker variants */
.timeline.check::before {
  counter-increment: none;
  content: '✓';
}

.timeline.cross::before {
  counter-increment: none;
  content: '✕';
}

/* Color variants */
.timeline.primary {
  --md-timeline-accent: var(--md-primary-fg-color);
  --md-timeline-bullet-bg: var(--md-primary-fg-color);
  --md-timeline-bullet-fg: var(--md-primary-bg-color);
  --md-timeline-bullet-border: transparent;
}

.timeline.light {
  --md-timeline-accent: var(--md-primary-fg-color--light);
  --md-timeline-bullet-bg: var(--md-primary-fg-color--light);
  --md-timeline-bullet-fg: var(--md-primary-bg-color);
  --md-timeline-bullet-border: transparent;
}

.timeline.dark {
  --md-timeline-accent: var(--md-primary-fg-color--dark);
  --md-timeline-bullet-bg: var(--md-primary-fg-color--dark);
  --md-timeline-bullet-fg: var(--md-primary-bg-color);
  --md-timeline-bullet-border: transparent;
}

.timeline.success {
  --md-timeline-accent: #4cae4f;
  --md-timeline-bullet-bg: #4cae4f;
  --md-timeline-bullet-fg: #fff;
  --md-timeline-bullet-border: transparent;
}

.timeline.error {
  --md-timeline-accent: #ef5552;
  --md-timeline-bullet-bg: #ef5552;
  --md-timeline-bullet-fg: #fff;
  --md-timeline-bullet-border: transparent;
}

.timeline.info {
  --md-timeline-accent: #02a6f2;
  --md-timeline-bullet-bg: #02a6f2;
  --md-timeline-bullet-fg: #fff;
  --md-timeline-bullet-border: transparent;
}

.timeline > :first-child {
  margin-top: 0;
}

.timeline > :last-child {
  margin-bottom: 0;
}