/*
 * Copyright © 2026 Em Zakharov
 */

#controls .switch.base {
  position: absolute;
  top: 22.760%;
  left: 36.806%;
  width: 26.350%;
  height: 52.337%;

  background-color: hsl(0deg 0% 58%);
  border-radius: 50%;
}
#controls .switch.hex {
  position: absolute;
  top: 27.243%;
  left: 37.327%;
  width: 25.416%;
  height: 43.7%;

  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  background: linear-gradient(-15deg,
                              hsl(0deg 0% 33%),
                              hsl(0deg 0% 40%) 20%,
                              hsl(0deg 0% 85%) 65%,
                              hsl(0deg 0% 82%));
}
#controls .switch.hex.shadow {
  top: 28.967%;
  left: 38.368%;
  background: unset;
  background-color: hsl(0deg 0% 0% / 20%);
}
#controls .switch.hextop {
  position: absolute;
  top: 27.243%;
  left: 38.917%;
  width: 22.013%;
  height: 43.724%;

  background-color: hsl(0deg 0% 58%);
  border-radius: 50%;
}
#controls .switch.sleeve {
  position: absolute;
  top: 31.381%;
  left: 41.181%;
  width: 17.570%;
  height: 34.898%;

  background: linear-gradient(135deg, hsl(0deg 0% 63%), hsl(0deg 0% 45%));
  border-radius: 50%;
  box-shadow: calc(0.005 * var(--device-width)) calc(0.005 * var(--device-width)) 2px hsl(0deg 0% 0% / 50%);
}
#controls .switch.inside {
  position: absolute;
  top: 35.864%;
  left: 43.403%;
  width: 13.438%;
  height: 26.690%;

  background-color: hsl(0deg 0% 29%);
  border-radius: 50%;
  box-shadow: inset calc(0.007 * var(--device-width)) calc(0.007 * var(--device-width)) 2px hsl(0deg 0% 0% / 50%);
}
#controls .switch.shaft-up {
  position: absolute;
  top: 15.863%;
  left: 44.271%;
  width: 21.527%;
}
#controls .switch.sleeveshadow-up {
  position: absolute;
  top: 35.864%;
  left: 43.403%;
  width: 13.438%;
  height: 26.690%;
  transform: rotate(-125deg);

  background-color: transparent;
  border-radius: 50%;
  box-shadow: inset calc(0.005 * var(--device-width)) calc(0.006 * var(--device-width)) 2px hsl(0deg 0% 18% / 95%);
}
#controls .switch.shaft-down {
  position: absolute;
  top: 41.381%;
  left: 44.410%;
  width: 18.056%;
}
#controls .switch.sleeveshadow-down {
  position: absolute;
  top: 35.864%;
  left: 43.403%;
  width: 13.438%;
  height: 26.690%;
  transform: rotate(31deg);

  background-color: transparent;
  border-radius: 50%;
  box-shadow: inset calc(0.009 * var(--device-width)) calc(0.009 * var(--device-width)) 2px hsl(0deg 0% 24%);
}