.container {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 58px;
  cursor: pointer;
}

.container input {
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 58px;
  width: 58px;
  background: #e0e5ec;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  box-shadow:
    4px 4px 8px rgba(163, 177, 198, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.9);
}

.checkmark:before,
.checkmark:after {
  content: "";
  position: absolute;
  background: #3fa6c5;
  height: 5px;
  border-radius: 2px;
  transform-origin: 0 0;
  opacity: 0;
}

/* Short arm */
.checkmark:before {
  left: 13px;
  top: 25px;
  width: 20px;
  transform: rotate(45deg) scale(0);
  transition: all 0.3s cubic-bezier(0.5, -1, 0.5, 2);
}

/* Long arm */
.checkmark:after {
  left: 21px;
  top: 40px;
  width: 34px;
  transform: rotate(-45deg) scale(0);
  transition: all 0.4s cubic-bezier(0.5, -1, 0.5, 2);
}

.container input:checked + .checkmark {
  background: linear-gradient(145deg, #caced6, #f0f5ff);
  box-shadow:
    inset 2px 2px 4px rgba(163, 177, 198, 0.6),
    inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}

/* Checked state - Short arm appears first */
.container input:checked + .checkmark:before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
  transition: all 0.3s cubic-bezier(0.5, -1, 0.5, 2);
}

/* Checked state - Long arm appears with delay */
.container input:checked + .checkmark:after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
  transition: all 0.4s cubic-bezier(0.5, -1, 0.5, 2);
  transition-delay: 0.15s;
}

/* Unchecked state - Long arm disappears first */
.container input:not(:checked) + .checkmark:after {
  opacity: 0;
  transform: rotate(-45deg) scale(0);
  transition: all 0.3s cubic-bezier(0.5, -1, 0.5, 2);
  transition-delay: 0s;
}

/* Unchecked state - Short arm disappears with delay */
.container input:not(:checked) + .checkmark:before {
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition: all 0.3s cubic-bezier(0.5, -1, 0.5, 2);
  transition-delay: 0.15s;
}

.container .checkmark:hover {
  box-shadow:
    5px 5px 10px rgba(163, 177, 198, 0.7),
    -5px -5px 10px rgba(255, 255, 255, 0.95);
  transform: scale(1.05);
}

.container input:active + .checkmark {
  box-shadow:
    inset 2px 2px 4px rgba(163, 177, 198, 0.6),
    inset -2px -2px 4px rgba(255, 255, 255, 0.9);
  transform: scale(0.95);
}