.checkbox {
  --chkbg: var(--text-color-primary);
  --chkfg: var(--text-color-inverse);
  @apply h-5 w-5 cursor-pointer appearance-none border border-fill-primary;
  border-radius: 4px;

  &:focus-visible {
    outline: 2px solid hsl(220 13.376% 69.216%);
    outline-offset: 2px;
  }

  &:checked,
  &[checked='true'],
  &[aria-checked='true'] {
    @apply bg-no-repeat;
    animation: checkmark 0.2s ease-in-out;
    background-image:
      linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
      linear-gradient(45deg, var(--chkbg) 30%, var(--chkfg) 30.99%, var(--chkfg) 40%, transparent 40.99%),
      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
  }

  &:indeterminate {
    @apply bg-no-repeat;
    animation: checkmark 0.2s ease-in-out;
    background-image:
      linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
  }

  &-xs {
    @apply h-4 w-4;
  }

  &-sm {
    @apply h-5 w-5;
  }

  &-md {
    @apply h-6 w-6;
  }

  &-lg {
    @apply h-8 w-8;
  }

  &-label {
    @apply flex items-center gap-2 cursor-pointer select-none;
  }

  &:disabled {
    @apply cursor-not-allowed opacity-30;
  }

}

@keyframes checkmark {
  0% {
    background-position-y: 5px;
  }

  50% {
    background-position-y: -2px;
  }

  100% {
    background-position-y: 0;
  }
}

/* backward compatibility */
.checkbox-mark {
  @apply hidden;
}