/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* Pipeline stepper/map -- shared visual language for the persistent
   Sample#show pipeline map and the per-Workflow#show step stepper. Status
   drives the icon circle's color; see NgsOrchestrator::ApplicationHelper
   for how each stage's status is computed. */
.pipeline-map-icon {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-color);
}

.pipeline-map-stage-done .pipeline-map-icon {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}

.pipeline-map-stage-in_progress .pipeline-map-icon {
  /* Bootstrap's --bs-info-bg-subtle is a fixed value baked into its
     compiled CSS (not derived from --bs-info at runtime), so it stays
     Bootstrap's default light cyan regardless of the host's teal
     --bs-info override. color-mix() keeps this in sync with whatever
     --bs-info actually is. */
  background-color: color-mix(in srgb, var(--bs-info) 15%, white);
  color: var(--bs-info);
}

.pipeline-map-stage-failed .pipeline-map-icon {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.pipeline-map-arrow {
  margin-top: 1.1rem;
}