Sand Fill Checkbox

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="sand-check">
  <input type="checkbox" class="sand-check__input" />
  <span class="sand-check__box">
    <span class="sand-check__sand"></span>
    <svg class="sand-check__mark" viewBox="0 0 24 24" fill="none" stroke="#1a1206" stroke-width="3">
      <path d="M4 12.5L9.5 18L20 6.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  <span class="sand-check__label">Mark as read</span>
</label>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.sand-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;
}
.sand-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sand-check__box {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #17171d;
  border: 2px solid #3a3a44;
  overflow: hidden;
}
.sand-check__sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1), border-radius 0.5s ease;
  animation: sand-idle-shimmer 3s ease-in-out infinite;
}
@keyframes sand-idle-shimmer {
  0%, 100% { height: 16%; }
  50% { height: 24%; }
}
.sand-check__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 3px;
  opacity: 0;
  transition: opacity 0.2s ease 0.3s;
}
.sand-check__input:checked ~ .sand-check__box .sand-check__sand {
  height: 100%;
  border-radius: 0;
  animation: sand-checked-wave 2.4s ease-in-out infinite;
}
@keyframes sand-checked-wave {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
.sand-check__input:checked ~ .sand-check__box .sand-check__mark {
  opacity: 1;
}
.sand-check__input:checked ~ .sand-check__label {
  color: #f4f4f5;
}