/* Knob component styles */

/* Reserve space for knob containers before they're initialized */
[data-knob] {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
}

.knob-container {
  position: relative;
  width: var(--knob-md);
  min-width: var(--knob-md);
  height: var(--knob-md);
  min-height: var(--knob-md);
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Prevent glow from affecting container background */
  filter: none !important;
  isolation: isolate;
  overflow: visible;
}

.knob-svg {
  width: 100%;
  height: 100%;
  /* Isolate SVG filters from container */
  isolation: isolate;
  overflow: visible;
  /* Ensure filters don't bleed to parent */
  will-change: filter;
}

.knob-arc-background {
  stroke: rgba(255, 255, 255, 0.1);
  transition: stroke 0.3s ease;
}

.knob-arc-foreground {
  transition: filter 0.3s ease;
}

.knob-element {
  position: relative;
  width: var(--knob-md);
  height: var(--knob-md);
  flex-shrink: 0;
}

.knob-label {
  font-family: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Monaco, "Courier New", monospace;
  display: block;
  text-align: center;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
  min-width: 0;
}

/* Particle styling */
.knob-particle {
  transition: opacity 0.3s ease;
}