@fboes/horizontal-situation-indicator/src/horizontal-situation-indicator.css

A Vanilla JavaScript web component which displays a self-contained Horizontal Situation Indicator

:host {
  display: inline-block;
  max-width: 100%;
  --background-outer-color: black;
  --background-color: black;
  --foreground-color: white;
  --lubber-color: darkorange;
  --heading-select-color: cyan;
  --nav1-color: magenta;
  --nav1-bearing-color: var(--nav1-color);
  --nav2-color: cyan;
  --nav2-bearing-color: var(--nav2-color);
  --stroke-width: 0.5;
}
:host[hidden] {
  display: none;
}
svg {
  width: 100%; height: auto;
}

* {
  fill: var(--foreground-color);
}

circle, #chevron-line {
  fill: none;
}

*[stroke] {
  stroke-width: var(--stroke-width);
}

#background-outer,
#chevron {
  fill: var(--background-outer-color);
}

#background {
  fill: var(--background-color);
}

#lubber {
  stroke: var(--lubber-color);
}

#heading-select {
  fill: var(--heading-select-color);
}

#nav1-label tspan {
  fill: var(--nav1-color);
}
#nav1-course-pointer,
#nav1-deviation * {
  fill: var(--nav1-color);
  stroke: var(--background-color);
}
#nav1-bearing {
  fill: var(--nav1-bearing-color);
  stroke: var(--background-color);
}

#nav2-label tspan {
  fill: var(--nav2-color);
}
#nav2-course-pointer,
#nav2-deviation * {
  fill: var(--nav2-color);
  stroke: var(--background-color);
}
#nav2-bearing {
  fill: var(--nav2-bearing-color);
  stroke: var(--background-color);
}