.stock-scale {
  --stock-percent: 0;
  --stock-neutral: 0;
  --stock-hue: calc(var(--stock-percent) * 1.2);
  --stock-color: hsl(var(--stock-hue) 78% 48%);
  --stock-bg: hsl(var(--stock-hue) 78% 48% / .14);
  background: var(--stock-bg);
  color: var(--text);
}

.stock-scale.stock-neutral {
  --stock-neutral: 1;
  --stock-color: var(--muted);
  --stock-bg: color-mix(in srgb, var(--muted) 12%, transparent);
}

.stock-scale-fill {
  background: var(--stock-color);
  display: block;
  height: 100%;
  width: calc(var(--stock-percent) * 1%);
}

.stock-scale-table-cell {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 130px;
}

.stock-scale-track {
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  border-radius: 999px;
  flex: 1;
  height: 6px;
  min-width: 42px;
  overflow: hidden;
}

.stock-scale-value {
  font-size: 12px;
  min-width: 86px;
  text-align: end;
}

.stock-scale.stock-neutral .stock-scale-table-cell {
  opacity: .82;
}

@media (prefers-contrast: more) {
  .stock-scale {
    background: color-mix(in srgb, var(--stock-color) 22%, var(--bg-2));
  }
}

.stock-scale.stock-neutral .stock-scale-fill {
  width: 0;
}