*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;}
  
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;}
  
.toggle{
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 120px;
  height: 60px;
  border-radius: 50px;} 
  
.toggle .ball{
  position: absolute;
  width: 45px;
  height: 45px;
  margin: 7.5px;
  border-radius: 50%;
  transition: .2s;}  
  
.toggle i{
  width: 50%;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  z-index: 1;}  
  
input{
  display: none;}  
  
.light{
  background: #fafafa;}  
  
.light .toggle{
  background: linear-gradient(145deg, #e1e1e1, #fff);
  box-shadow: 3px 3px 4px #e6e6e6, 
              3px -3px 4px #ffffff;}  
              
.light .toggle .bxs-sun{
  color: #fafafa;}
  
.light .toggle .bx-moon{
  color: #151d2a;}
  
.light .toggle .ball{
  background: #151d2a;}  
  
.dark{
  background: #151d2a;}  
  
.dark .toggle{
  background: #151d2a;
  box-shadow: 3px 3px 4px #0e131b, 
              3px -3px 4px #1c2739;}  
              
.dark .toggle .bxs-sun{
  color: #fafafa;}
  
.dark .toggle .bx-moon{
  color: #151d2a;}
  
.dark .toggle .ball{
  background: #fafafa;
  transform: translateX(60px);}