<script lang="ts">
  let {
    density = "regular",
    orientation = "horizontal",
    tone = "accent",
  }: {
    density?: "regular" | "tight";
    orientation?: "horizontal" | "vertical";
    tone?: "neutral" | "accent" | "warning";
  } = $props();
</script>

<div
  class="signal-trace"
  data-density={density}
  data-orientation={orientation}
  data-tone={tone}
  aria-hidden="true"
>
  <span class="signal-trace__rail"></span>
  <span class="signal-trace__node" data-node="start"></span>
  <span class="signal-trace__node" data-node="middle"></span>
  <span class="signal-trace__node" data-node="end"></span>
</div>

<style>
  .signal-trace {
    --trace-color: var(--ui-color-accent);
    --trace-track: min(100%, 20rem);
    position: relative;
    display: block;
    width: 100%;
    min-height: 1.5rem;
  }

  .signal-trace__rail {
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background:
      linear-gradient(90deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
      linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
  }

  .signal-trace__node {
    position: absolute;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid var(--trace-color);
    background: var(--ui-color-canvas);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .signal-trace__node[data-node="start"] {
    left: 18%;
  }

  .signal-trace__node[data-node="middle"] {
    left: 50%;
  }

  .signal-trace__node[data-node="end"] {
    left: 82%;
  }

  .signal-trace[data-density="tight"] {
    min-height: 0.95rem;
  }

  .signal-trace[data-density="tight"] .signal-trace__node {
    width: 0.38rem;
    height: 0.38rem;
  }

  .signal-trace[data-orientation="vertical"] {
    width: 1.5rem;
    min-height: 12rem;
  }

  .signal-trace[data-orientation="vertical"] .signal-trace__rail {
    inset: 0 auto 0 50%;
    width: 1px;
    height: auto;
    background:
      linear-gradient(180deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
      linear-gradient(180deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
  }

  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="start"] {
    top: 18%;
    left: 50%;
  }

  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="middle"] {
    top: 50%;
    left: 50%;
  }

  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="end"] {
    top: 82%;
    left: 50%;
  }

  .signal-trace[data-tone="neutral"] {
    --trace-color: var(--ui-color-line-strong);
  }

  .signal-trace[data-tone="warning"] {
    --trace-color: var(--ui-color-warning);
  }
</style>
