/* Timeline component styles.
   Uses Omnis semantic tokens only — no hard-coded colors.
   State is communicated through shape, text labels, and token-based colors
   (never color alone).

   Host must include this file:
     <link rel="stylesheet" href="_content/Omnis.Shared.UI/components/timeline.css" /> */

/* ── Step marker focus visible ───────────────────────────── */

.omnis-timeline__marker:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Step label button (interactive mode) ────────────────── */

.omnis-timeline__step-label:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Hover state for interactive label buttons */
.omnis-timeline__step-label:not(.omnis-timeline__step-label--disabled):hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Active step emphasis ────────────────────────────────── */

.omnis-timeline__step--active > .omnis-timeline__body > .omnis-timeline__step-header > .omnis-timeline__step-label {
  font-weight: 600;
}

/* ── Disabled step ───────────────────────────────────────── */

.omnis-timeline__step--disabled .omnis-timeline__step-label {
  cursor: default;
  text-decoration: none;
}

/* ── Horizontal layout adjustments ──────────────────────────

   In horizontal orientation the body sits below the marker track.
   Step labels are centered and the connector spans between markers. */

.omnis-timeline--horizontal .omnis-timeline__body {
  text-align: center;
  align-items: center;
  padding-block-end: 0;
  padding-block-start: var(--space-2);
}

.omnis-timeline--horizontal .omnis-timeline__step-header {
  justify-content: center;
}

.omnis-timeline--horizontal .omnis-timeline__step-label {
  white-space: normal;
  text-align: center;
}

/* Connector sits between the marker and the next step's marker */
.omnis-timeline--horizontal .omnis-timeline__connector {
  align-self: center;
}

/* ── Forced colors (high-contrast) ───────────────────────── */

@media (forced-colors: active) {
  /* Use system colors for state badges in forced-colors mode */
  .omnis-timeline__state-badge {
    forced-color-adjust: none;
    background: Canvas;
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  .omnis-timeline__state-badge--active,
  .omnis-timeline__state-badge--complete {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 1px solid Highlight;
  }

  .omnis-timeline__state-badge--error {
    forced-color-adjust: none;
    background: LinkText;
    color: Canvas;
    border: 1px solid LinkText;
  }

  /* Markers remain visible via SVG shapes */
  .omnis-timeline__marker--complete {
    forced-color-adjust: none;
    color: Highlight;
  }

  .omnis-timeline__marker--error {
    forced-color-adjust: none;
    color: LinkText;
  }

  .omnis-timeline__marker--active {
    forced-color-adjust: none;
    color: Highlight;
  }

  /* Connector line */
  .omnis-timeline__connector {
    background: ButtonText !important;
  }

  /* Focus ring */
  .omnis-timeline__marker:focus-visible,
  .omnis-timeline__step-label:focus-visible {
    forced-color-adjust: none;
    outline: 2px solid Highlight;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */

/* No animations are used in Timeline by default.
   The connector fill and marker colors are instantaneous.
   This rule is included as a safety declaration. */
@media (prefers-reduced-motion: reduce) {
  .omnis-timeline__connector,
  .omnis-timeline__marker {
    transition: none;
  }
}