<div class="toggles-grid">  
  <div class="toggles-container">  
    <div class="toggle-container a">
      <input class="toggle-input" type="checkbox">
      <div class="toggle-handle"></div>
      <svg class="toggle-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.7072 5.70718L7.00008 11.4143L3.29297 7.70718L4.70718 6.29297L7.00008 8.58586L11.293 4.29297L12.7072 5.70718Z" />
      </svg>
      <svg class="toggle-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.58594 8.00015L4.29297 5.70718L5.70718 4.29297L8.00015 6.58594L10.2931 4.29297L11.7073 5.70718L9.41436 8.00015L11.7072 10.293L10.293 11.7072L8.00015 9.41436L5.70733 11.7072L4.29312 10.293L6.58594 8.00015Z"/>
      </svg>
    </div>

    <div class="toggle-container a">
      <input class="toggle-input" type="checkbox" checked>
      <div class="toggle-handle"></div>
      <svg class="toggle-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.7072 5.70718L7.00008 11.4143L3.29297 7.70718L4.70718 6.29297L7.00008 8.58586L11.293 4.29297L12.7072 5.70718Z" />
      </svg>
      <svg class="toggle-icon cross" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.58594 8.00015L4.29297 5.70718L5.70718 4.29297L8.00015 6.58594L10.2931 4.29297L11.7073 5.70718L9.41436 8.00015L11.7072 10.293L10.293 11.7072L8.00015 9.41436L5.70733 11.7072L4.29312 10.293L6.58594 8.00015Z"/>
      </svg>
    </div>
  </div>

  <div class="toggles-container">
    <div class="toggle-container b">
      <input class="toggle-input" type="checkbox">
      <div class="toggle-handle">
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
      </div>
      <p class="toggle-text off" aria-hidden="true">OFF</p>
      <p class="toggle-text on" aria-hidden="true">ON</p>
    </div>

    <div class="toggle-container b">
      <input class="toggle-input" type="checkbox" checked>
      <div class="toggle-handle">
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
        <div class="toggle-handle-dot"></div>
      </div>
      <p class="toggle-text on" aria-hidden="true">ON</p>
      <p class="toggle-text off" aria-hidden="true">OFF</p>
    </div>
  </div>

  <div class="toggle-container c">
      <input class="toggle-input" type="checkbox">
      <p class="toggle-text" aria-hidden="true">OFF</p>
      <div class="toggle-track-wrapper-wrapper">    
        <div class="toggle-handle"></div>
        <div class="toggle-track-wrapper">
          <div class="toggle-track"></div>
        </div>
      </div>
      <p class="toggle-text" aria-hidden="true">ON</p>
  </div>
  
  <div class="toggles-container">    
    <div class="toggle-container d">
      <input class="toggle-input" type="checkbox">
      <div class="toggle-handle">      
        <p class="toggle-text off">OFF</p>
        <p class="toggle-text on">ON</p>
      </div>
    </div>

    <div class="toggle-container d">
      <input class="toggle-input" type="checkbox" checked>
      <div class="toggle-handle">      
        <p class="toggle-text off">OFF</p>
        <p class="toggle-text on">ON</p>
      </div>
    </div>
  </div>
</div>

{/tabs-pane}
{tabs-pane label="css"}

@import url('https://fonts.googleapis.com/css2?family=Signika:wght@700&display=swap');

body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 24px;
 min-height: 100vh;
 font-family: 'Signika', sans-serif;
 font-weight: 700;
 background-color: #bbb;
}

.toggles-grid {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.toggles-container {
 display: flex;
 gap: 24px;
}

.toggle-container.a {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 border-radius: 50px;
 padding: 0 6px;
 width: 62px;
 height: 28px;
 background-color: #bb5555;
 box-shadow:
   inset 0 1px 1px rgb(0 0 0 / .5),
   0 1px rgb(255 255 255 / .5);
 transition-property: background-color;
 transition-duration: .4s;
 transition-timing-function: linear;
 
 &:has(:checked) {
   background-color: #5698bb;
 }
 
 .toggle-input {
   position: absolute;
   z-index: 2;
   inset: 0;
   cursor: pointer;
 }
 
 .toggle-handle {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   background-image: url('https://assets.codepen.io/4175254/wood-pattern.png');
   background-size: 328px 110px;
   background-position: center;
   box-shadow:
     inset 0 1px 1px rgb(255 255 255 / .75),
     inset 0 -1px 4px #b75301,
     0 1px 4px rgb(0 0 0 / .75);
   transition-property: transform;
   transition-duration: .4s;
   
   @at-root .a .toggle-input:checked + .toggle-handle {
     transform: translateX(34px);
   }
   
   &::before {
     content: '';
     position: absolute;
     inset: 6.5px;
     border-radius: 50%;
     background-image: linear-gradient(rgb(174 34 1 / .125), transparent);
     box-shadow:
       inset 0 1px 2px #ad2201,
       0 1px 1px rgb(255 255 255 / .75);
   }
   
 }
 
 .toggle-icon {
   width: 24px;
   height: 24px;
   fill: #fff;
   filter: drop-shadow(0 -1px 1px rgb(0 0 0 / .25));
 }
}

.toggle-container.b {
 display: flex;
 align-items: center;
 position: relative;
 border-radius: 5px;
 width: 72px;
 height: 28px;
 background-color: #775b40;
 box-shadow:
   inset 0 1px 1px rgb(0 0 0 / .5),
   0 1px rgb(255 255 255 / .5);
 transition-property: background-color;
 transition-duration: .4s;
 transition-timing-function: linear;
 
 &:has(:checked) {
   background-color: #5698bb;
 }
 
 .toggle-input {
   position: absolute;
   z-index: 2;
   inset: 0;
   cursor: pointer;
 }

 .toggle-handle {
   display: grid;
   grid-template-columns: repeat(3, auto);
   justify-content: space-between;
   align-content: space-between;
   position: absolute;
   z-index: 1;
   left: 0;
   border-radius: inherit;
   padding: 9px;
   width: 36px;
   height: 100%;
   transform: translateX(-4px);
   background-image: url('https://assets.codepen.io/4175254/wood-pattern.png');
   background-size: 328px 110px;
   background-position: center;
   box-shadow:
     inset 0 1px 1px rgb(255 255 255 / .75),
     inset 0 -1px 4px #b75301,
     0 1px 4px rgb(0 0 0 / .75);
   transition-property: transform;
   transition-duration: .4s;

   @at-root .b .toggle-input:checked + .toggle-handle {
     transform: translateX(40px);
   }
 }

 .toggle-handle-dot {
   border-radius: 50%;
   width: 4px;
   height: 4px;
   box-shadow:
     inset 0 1px 1px #ad2201,
     0 1px 1px rgb(255 255 255 / .75);
 }

 .toggle-text {
   position: absolute;
   margin-top: 1px;
   font-size: 14px;
   color: #fff;
   text-shadow: 0 1px 1px rgb(0 0 0 / .5);

   &.off {
     right: 8px;
   }

   &.on {
     left: 12px;
   }
 }
}

.toggle-container.c {
 display: flex;
 align-items: center;
 column-gap: 16px;
 position: relative;
 
 .toggle-input {
   position: absolute;
   z-index: 2;
   inset: 0;
   cursor: pointer;
 }
 
 .toggle-text {
   font-size: 14px;
   color: #766f6a;
   text-shadow: 
     0 1px 1px rgb(255 255 255 / .75);
 }
 
 .toggle-track-wrapper-wrapper {
   display: flex;
   align-items: center;
   position: relative;
 }
 
 .toggle-track-wrapper {
   filter: drop-shadow(0 1px 1px rgb(255 255 255 / .75));
 }
 
 .toggle-track {
   border-radius: 50px;
   width: 52px;
   height: 14px;
   background-color: #775b40;
   background-image:
     radial-gradient(14px 14px at 50% calc(50% + 2px), #775b40 50%, #4b3928 calc(50% + 1px)),
     radial-gradient(14px 14px at 50% calc(50% + 2px), #775b40 50%, #4b3928 calc(50% + 1px)),
     linear-gradient(rgb(0 0 0 / .5) calc(50% - 2px), transparent 50%);
   background-size: 14px 14px, 14px 14px, 100% 100%;
   background-position: 0 0, 100% 0, 0 0;
   background-repeat: no-repeat;
   mask-image:
     radial-gradient(14px circle, #fff 50%, transparent 0),
     linear-gradient(transparent 5px, #fff 5px 9px, transparent 0),
     radial-gradient(14px circle, #fff 50%, transparent 0);
   mask-size: 14px 14px, 100% 100%, 14px 14px;
   mask-position: 0 0, 0 0, 100% 0;
   mask-repeat: no-repeat;
   
   &::before {
     content: '';
     position: absolute;
     width: inherit;
     height: inherit;
     background-color: #5698bb;
     background-image:
       radial-gradient(14px 14px at 50% calc(50% + 2px), #5698bb 50%, #33596e calc(50% + 1px)),
       radial-gradient(14px 14px at 50% calc(50% + 2px), #5698bb 50%, #33596e calc(50% + 1px)),
       linear-gradient(rgb(0 0 0 / .5) calc(50% - 2px), transparent 50%);
     background-size: inherit;
     background-position: inherit;
     background-repeat: inherit;
     mask: inherit;
     opacity: 0;
     transition-property: opacity;
     transition-duration: .4s;
     transition-timing-function: linear;
   }
   
   @at-root .toggle-container.c:has(:checked) .toggle-track::before {
     opacity: 1;
   }
 }
 
 .toggle-handle {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: -5px;
   z-index: 1;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   background-image: url('https://assets.codepen.io/4175254/wood-pattern.png');
   background-size: 328px 110px;
   background-position: center;
   box-shadow:
     inset 0 1px 1px rgb(255 255 255 / .75),
     inset 0 -1px 4px #b75301,
     0 1px 4px rgb(0 0 0 / .75);
   transition-property: transform;
   transition-duration: .4s;
   
   @at-root .toggle-container.c:has(:checked) .toggle-handle {
     transform: translateX(35px);
     
     &::before {
       background-color: #5698bb;
     }
   }
   
   &::before {
     content: '';
     position: absolute;
     border-radius: 50%;
     width: 6px;
     height: 6px;
     background-color: #775b40;
     box-shadow:
       inset 0 1px 1px rgb(0 0 0 / .5),
       0 1px 1px rgb(255 255 255 / .75);
     transition-property: background-color;
     transition-duration: .4s;
     transition-timing-function: linear;
   }
 }
}

.toggle-container.d {
 position: relative;
 border-radius: 4px;
 width: 76px;
 height: 32px;
 background-image: 
   linear-gradient(rgb(255 255 255 / .125), rgb(255 255 255 / .125)),
   url('https://assets.codepen.io/4175254/wood-pattern.png');
 background-size: 100% 100%, 328px 110px;
 background-position: center;
 box-shadow: 
   inset 1px 0 1px rgb(73 31 1 / .25),
   inset -1px 0 1px rgb(73 31 1 / .25),
   0 0 1px rgb(0 0 0 / .5),
   0 1px 2px rgb(0 0 0 / .5);;
 
 .toggle-input {
   position: absolute;
   z-index: 2;
   inset: 0;
   cursor: pointer;
 }
 
 .toggle-handle {
   display: flex;
   align-items: center;
   position: relative;
   border-radius: inherit;
   padding: 8px;
   width: 70px;
   height: inherit;
   background-image:
     linear-gradient(90deg, rgb(73 31 1 / .125), rgb(255 255 255 / .25), rgb(73 31 1 / .25)),
     url('https://assets.codepen.io/4175254/wood-pattern.png');
   background-size: 200% 100%, 328px 110px;
   background-position: 100% 0, center;
   box-shadow: 
     inset 0 .5px 1px #e9d38d,
     inset 1px 0 1px #e9d38d;
   transition-property: transform, background-position, box-shadow;
   transition-duration: .4s;
   
   @at-root .toggle-container.d:has(:checked) .toggle-handle {
     transform: translateX(6px);
     background-position: 0 0, center;
     box-shadow: 
       inset 0 .5px 1px #e9d38d,
       inset -1px 0 1px #e9d38d;
   }
 }
 
 .toggle-text {
   position: absolute;
   font-size: 14px;
   color: #775b40;
   text-shadow: 0 1px 1px rgb(255 255 255 / .75);
   transition-property: transform, color;
   transition-duration: .4s;
   
   &.off {
     color: #ac4443;
     
     @at-root .toggle-container.d:has(:checked) .off {
       transform: translateX(-10%) scaleX(.8);
       color: #775b40;
     }
   }
   
   &.on {
     right: 8px;
     transform: translateX(10%) scaleX(.8);
     
     @at-root .toggle-container.d:has(:checked) .on {
       transform: translateX(0) scaleX(1);
       color: #5297ba;
     }
   }
 }
}

{/tabs-pane}