/* =========================
   Timeline
   API kept compatible with gnexus-ui-kit.
========================= */

@use "../kit-deps" as *;

.timeline {
  display: grid;
  gap: $space-4;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: $space-4;
  padding-left: $space-2;

  &::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: -$space-4;
    left: 23px;
    width: 2px;
    background: $border-color-muted;
  }

  &:last-child::before {
    display: none;
  }
}

.timeline-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: $radius-full;
  background: $neutral-100;
  color: $neutral-700;
  font-size: $icon-size-sm;
}

.timeline-item-primary .timeline-marker {
  background: $neutral-900;
  color: $neutral-0;
}

.timeline-item-secondary .timeline-marker {
  background: $mint-300;
  color: $neutral-900;
}

.timeline-item-accent .timeline-marker {
  background: $yellow-300;
  color: $neutral-900;
}

.timeline-item-success .timeline-marker {
  background: $success-bg;
  color: $success-text;
}

.timeline-item-warning .timeline-marker {
  background: $warning-bg;
  color: $warning-text;
}

.timeline-item-danger .timeline-marker,
.timeline-item-error .timeline-marker {
  background: $danger-bg;
  color: $danger-text;
}

.timeline-item-info .timeline-marker {
  background: $info-bg;
  color: $info-text;
}

.timeline-content {
  flex: 1;
  min-width: 0;
}

.timeline-card {
  padding: $space-4;
  border: $border-width-base $border-style-base $border-color-muted;
  border-radius: $radius-lg;
  background: $surface-panel-muted;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-3;
  margin-bottom: $space-2;
}

.timeline-title {
  margin: 0;
  color: $neutral-900;
  font-family: $font-family-base;
  font-size: 16px;
  font-weight: $font-weight-semibold;
  line-height: 1.3;
}

.timeline-time {
  flex-shrink: 0;
  color: $neutral-500;
  font-family: $font-family-base;
  font-size: 12px;
  line-height: 1.3;
}

.timeline-text {
  margin: 0;
  color: $neutral-700;
  font-family: $font-family-base;
  font-size: 14px;
  line-height: 1.5;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: $space-2;
  margin-top: $space-3;
  color: $neutral-600;
  font-size: 13px;
}