assets/active_light.css

/* Stream row: stretch columns to match audio height */
.stream-row {
  align-items: stretch !important;
}

/* Active light column: flex container, fill height */
.stream-row > div:last-child {
  display: flex !important;
  align-items: stretch !important;
  min-height: 100%;
}

/* Gradio block wrapper: fill and flex so child can stretch */
.stream-row > div:last-child > div {
  display: flex !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}

/* All divs in light column: fill so panel stretches */
.stream-row > div:last-child div {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}

/* Active light panel: fill container, base styles */
.active-light {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--border-color-primary);
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0.5rem;
}

/* Warming up state */
.active-light--off {
  background: #555;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Ready state */
.active-light--on {
  background: #c00;
  box-shadow:
    0 0 16px rgba(220, 0, 0, 0.5),
    inset 0 0 12px rgba(255, 80, 80, 0.3);
}

/* Label text */
.active-light__label {
  font-size: 12px;
  font-weight: 500;
}

.active-light--off .active-light__label {
  color: rgba(255, 255, 255, 0.85);
}

.active-light--on .active-light__label {
  color: #fff;
}