.checkbox {
  --chkbg: theme(colors.base-content);
  --chkfg: theme(colors.base-100);
  @apply border-base-content rounded-btn h-6 w-6 cursor-pointer appearance-none border border-opacity-20;
  &:focus {
    box-shadow: none;
  }
  &:focus-visible {
    @apply outline-base-content outline outline-2 outline-offset-2;
  }
  &:checked,
  &[checked="true"],
  &[aria-checked="true"] {
    @apply bg-no-repeat;
    animation: checkmark var(--animation-input, 0.2s) ease-out;
    background-color: var(--chkbg);
    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-base-content bg-no-repeat;
    animation: checkmark var(--animation-input, 0.2s) ease-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%);
  }
  &-primary {
    --chkbg: theme(colors.primary);
    --chkfg: theme(colors.primary-content);
    @apply border-primary [@media(hover:hover)]:hover:border-primary;
    &:focus-visible {
      @apply outline-primary;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-primary bg-primary text-primary-content;
    }
  }
  &-secondary {
    --chkbg: theme(colors.secondary);
    --chkfg: theme(colors.secondary-content);
    @apply border-secondary [@media(hover:hover)]:hover:border-secondary;
    &:focus-visible {
      @apply outline-secondary;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-secondary bg-secondary text-secondary-content;
    }
  }
  &-accent {
    --chkbg: theme(colors.accent);
    --chkfg: theme(colors.accent-content);
    @apply border-accent [@media(hover:hover)]:hover:border-accent;
    &:focus-visible {
      @apply outline-accent;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-accent bg-accent text-accent-content;
    }
  }
  &-success {
    --chkbg: theme(colors.success);
    --chkfg: theme(colors.success-content);
    @apply border-success [@media(hover:hover)]:hover:border-success;
    &:focus-visible {
      @apply outline-success;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-success bg-success text-success-content;
    }
  }
  &-warning {
    --chkbg: theme(colors.warning);
    --chkfg: theme(colors.warning-content);
    @apply border-warning [@media(hover:hover)]:hover:border-warning;
    &:focus-visible {
      @apply outline-warning;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-warning bg-warning text-warning-content;
    }
  }
  &-info {
    --chkbg: theme(colors.info);
    --chkfg: theme(colors.info-content);
    @apply border-info [@media(hover:hover)]:hover:border-info;
    &:focus-visible {
      @apply outline-info;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-info bg-info text-info-content;
    }
  }
  &-error {
    --chkbg: theme(colors.error);
    --chkfg: theme(colors.error-content);
    @apply border-error [@media(hover:hover)]:hover:border-error;
    &:focus-visible {
      @apply outline-error;
    }
    &:checked,
    &[checked="true"],
    &[aria-checked="true"] {
      @apply border-error bg-error text-error-content;
    }
  }
  &:disabled {
    @apply bg-base-content cursor-not-allowed border-transparent opacity-20;
  }
}

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

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