.checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  width: max-content;
}

.checkbox input {
  display: none;
}

.checkmark-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.check-path {
  fill: none;
  stroke: var(--primary-text);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.05s ease-in;
}

.checkbox:hover .checkmark-box {
  border-color: var(--default-color);
}

input:checked + .checkmark-box {
  border-color: var(--default-color);
  background-color: var(--background-color);
  transform: scale(1.05);
}

input:checked + .checkmark-box .check-path {
  stroke-dashoffset: 0;
}

.checkbox:active .checkmark-box {
  transform: scale(0.95);
}