.traffic-lights {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}

.traffic-lights[data-active="red"] { background: var(--traffic-red-dark); }
.traffic-lights[data-active="yellow"] { background: var(--traffic-yellow-dark); }
.traffic-lights[data-active="green"] { background: var(--traffic-green-dark); }

.traffic-housing {
  background: #1c1c22;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.light {
  width: min(28vw, 160px);
  height: min(28vw, 160px);
  border-radius: 50%;
  background: #333;
  opacity: 0.35;
  transition: opacity 150ms ease, box-shadow 150ms ease;
}

.light--red { background: var(--traffic-red); }
.light--yellow { background: var(--traffic-yellow); }
.light--green { background: var(--traffic-green); }

.light.lit { opacity: 1; }
.light--red.lit { box-shadow: 0 0 60px 12px rgba(192, 57, 43, 0.8); }
.light--yellow.lit { box-shadow: 0 0 60px 12px rgba(212, 167, 44, 0.8); }
.light--green.lit { box-shadow: 0 0 60px 12px rgba(74, 158, 92, 0.8); }