Sliding Drawer Checkbox

<!--
  Author: @yara_h
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="drawer-check">
  <input type="checkbox" class="drawer-check__input" />
  <span class="drawer-check__frame">
    <span class="drawer-check__front"></span>
    <svg class="drawer-check__mark" viewBox="0 0 24 24" fill="none" stroke="#facc15" stroke-width="3">
      <path d="M4 12.5L9.5 18L20 6.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  <span class="drawer-check__label">Remember this device</span>
</label>

/*
 * Author: @yara_h
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.drawer-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-family: system-ui, sans-serif;
  color: #9a9aa5;
  font-size: 15px;
}
.drawer-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.drawer-check__frame {
  position: relative;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: #16130a;
  border: 2px solid #3d3419;
  overflow: hidden;
}
.drawer-check__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}
.drawer-check__front {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #3d3419, #221d0d);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5);
}
.drawer-check__input:checked ~ .drawer-check__frame .drawer-check__front {
  transform: translateX(100%);
}
.drawer-check__input:checked ~ .drawer-check__frame .drawer-check__mark {
  opacity: 1;
}
.drawer-check__input:checked ~ .drawer-check__label {
  color: #facc15;
}
.drawer-check__label {
  transition: color 0.3s ease;
}