.status-light {
  width: 52px;
  padding: 6px 5px;
  border: 1px solid rgba(155, 134, 255, 0.9);
  border-radius: 10px;
  background: #05070b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.status-light-lamp {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.12;
  filter: saturate(0.65);
  transition:
    opacity 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    transform 140ms ease;
}

.status-light-lamp.red {
  background: #ff4a4a;
}

.status-light-lamp.amber {
  background: #ffb84d;
}

.status-light-lamp.green {
  background: #47c97e;
}

.status-light[data-status="RED"] .status-light-lamp.red,
.status-light[data-status="AMBER"] .status-light-lamp.amber,
.status-light[data-status="GREEN"] .status-light-lamp.green {
  opacity: 1;
  filter: saturate(1.2);
  transform: scale(1.04);
}

.status-light[data-status="RED"] .status-light-lamp.red {
  color: #ff4a4a;
  box-shadow:
    0 0 10px currentColor,
    0 0 22px currentColor,
    inset 0 0 8px rgba(255, 255, 255, 0.28);
}

.status-light[data-status="AMBER"] .status-light-lamp.amber {
  color: #ffb84d;
  box-shadow:
    0 0 10px currentColor,
    0 0 22px currentColor,
    inset 0 0 8px rgba(255, 255, 255, 0.28);
}

.status-light[data-status="GREEN"] .status-light-lamp.green {
  color: #47c97e;
  box-shadow:
    0 0 10px currentColor,
    0 0 22px currentColor,
    inset 0 0 8px rgba(255, 255, 255, 0.28);
}