:host {
  display: contents;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: hsl(var(--secondary));
  outline: none;
  cursor: pointer;
}

.volume-slider:disabled {
  cursor: not-allowed;
}

/* Track */
.volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: hsl(var(--secondary));
}

/* Thumb */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: hsl(var(--primary));
  border: 2px solid hsl(var(--card));
  margin-top: -4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.volume-slider:disabled::-webkit-slider-thumb {
  background: hsl(var(--muted-foreground));
  cursor: not-allowed;
}
