/* ==========================================================================
   Synth Controls Library
   Knobs, switches, and sliders for patch editors
   ========================================================================== */

/* --- Knob (rotary potentiometer) --- */

.knob {
  position: relative;
  display: inline-block;
  cursor: grab;
}

.knob:active {
  cursor: grabbing;
}

.knob__inner {
  border-radius: 50%;
}

.knob__inner svg {
  width: 100%;
  height: 100%;
}

.knob--a .knob__inner {
  width: 75px;
  height: 75px;
}

.knob--b .knob__inner {
  width: 80px;
  height: 80px;
}

.knob--c .knob__inner {
  width: 98px;
  height: 98px;
}

/* --- Switch (multi-position toggle) --- */

.switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.switch__inner {
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Round switch: SVG inline rendering */
.switch--round .switch__inner {
  width: 120px;
  height: 120px;
}

.switch--round .switch__inner svg {
  width: 100%;
  height: 100%;
}

/* Toggle switch: 64x64, SVG inline rendering */
.switch--toggle .switch__inner {
  width: 64px;
  height: 64px;
}

.switch--toggle .switch__inner svg {
  width: 100%;
  height: 100%;
}

/* Toggle frames: show/hide based on data-value */
.switch__toggle-frame { display: none; }
.switch__inner[data-value="0"] .switch__toggle-frame--0 { display: block; }
.switch__inner[data-value="1"] .switch__toggle-frame--1 { display: block; }

/* Round switch frames: show/hide based on data-value */
.switch__round-frame { display: none; }
.switch__inner[data-value="0"] .switch__round-frame--0 { display: block; }
.switch__inner[data-value="1"] .switch__round-frame--1 { display: block; }
.switch__inner[data-value="2"] .switch__round-frame--2 { display: block; }

/* --- LED button (small clickable indicator with glow when ON) --- */

.led-button {
  position: relative;
  display: block;
  cursor: pointer;
}

.led-button__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.led-button__inner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.led-button__frame { display: none; }
.led-button__inner[data-value="0"] .led-button__frame--0 { display: block; }
.led-button__inner[data-value="1"] .led-button__frame--1 { display: block; }

/* --- Jack socket --- */

.jack {
  display: inline-block;
  width: 34px;
  height: 34px;
}

.jack svg {
  width: 100%;
  height: 100%;
}

/* --- Jack point anchor (SVG circle for CableManager) --- */

@keyframes jack-blink {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.3; }
}

.jack-point {
  cursor: pointer;
}

.jack-point--active {
  animation: jack-blink 0.8s ease-in-out infinite;
}

/* --- Interactive controls override panel scroll grab cursor --- */

.switch,
.switch__inner,
.jack,
.led-button,
.led-button__inner {
  cursor: pointer;
}

.switch--toggle,
.switch--toggle .switch__inner {
  cursor: pointer;
}

/* --- Slider (vertical fader) --- */

.slider {
  position: relative;
  width: 70px;
  height: 243px;
  display: inline-block;
  cursor: grab;
  /* Track groove */
  background: linear-gradient(
    to right,
    transparent 30px,
    #555 30px,
    #555 32px,
    #333 32px,
    #333 38px,
    #555 38px,
    #555 40px,
    transparent 40px
  );
}

.slider:active {
  cursor: grabbing;
}

/* Handle-only variant — no track background, handle scales to its container at ~90% width with native ratio */
.slider-handle-only .slider {
  background: none;
  width: 100%;
  height: 100%;
  cursor: default;
}
.slider-handle-only .slider__inner {
  width: 90%;
  left: 5%;
  aspect-ratio: 70 / 28;
  height: auto;
  cursor: grab;
}
.slider-handle-only .slider__inner:active {
  cursor: grabbing;
}

.slider__inner {
  display: block;
  width: 70px;
  height: 28px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.slider__inner svg {
  width: 100%;
  height: 100%;
}