Как нарисовать фигуру вкл/выкл круглую с наружной и внутренней тенью применяя лишь css

body{
  background: gray;
}
.out{
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
}
.off .out{
  box-shadow: 2px 0 5px #000, inset -2px 0 2px #bbb, inset 2px 0 1px #aaa;  
}
.in{
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-left-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.line{
  width: 12px;
  border: 1px solid #000;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.on .out{
  box-shadow: inset 2px 0 5px #000, inset -2px 0 2px #bbb;
}
.on .in{
  border-color: gold;
  border-left-color: transparent;
  filter: drop-shadow( 0 0 2px gold);
}
.on .line{
  border: 1px solid gold;
    box-shadow: 0 0 2px gold;
 
}