Turbine Spin

.fx-toggle-turbine-spin{display:inline-block;cursor:pointer}
.fx-toggle-turbine-spin input{display:none}
.fx-toggle-turbine-spin-track{display:block;width:68px;height:34px;border-radius:34px;background:linear-gradient(180deg,#0c4a6e,#082f49);position:relative;overflow:hidden;transition:background .5s ease}
.fx-toggle-turbine-spin-knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7dd3fc,#0284c7 60%,#075985);box-shadow:0 0 8px rgba(2,132,199,.6);transition:transform .5s cubic-bezier(.65,0,.35,1),background .5s ease}
.fx-toggle-turbine-spin-blades{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.4) 0 30deg,transparent 30deg 60deg,rgba(255,255,255,.4) 60deg 90deg,transparent 90deg 120deg,rgba(255,255,255,.4) 120deg 150deg,transparent 150deg 180deg,rgba(255,255,255,.4) 180deg 210deg,transparent 210deg 240deg,rgba(255,255,255,.4) 240deg 270deg,transparent 270deg 300deg,rgba(255,255,255,.4) 300deg 330deg,transparent 330deg 360deg);transition:transform .3s ease}
.fx-toggle-turbine-spin input:not(:checked) + .fx-toggle-turbine-spin-track .fx-toggle-turbine-spin-blades{animation:fx-ts-spin 1s linear infinite}
@keyframes fx-ts-spin{to{transform:rotate(360deg)}}
.fx-toggle-turbine-spin input:checked + .fx-toggle-turbine-spin-track{background:linear-gradient(180deg,#dc2626,#7f1d1d)}
.fx-toggle-turbine-spin input:checked + .fx-toggle-turbine-spin-track .fx-toggle-turbine-spin-knob{transform:translateX(34px);background:radial-gradient(circle at 35% 35%,#fca5a5,#dc2626 60%,#7f1d1d)}
.fx-toggle-turbine-spin input:checked + .fx-toggle-turbine-spin-track .fx-toggle-turbine-spin-blades{animation:fx-ts-spin .2s linear infinite}