.prs-checkbox {
  --check-bg: var(--prs-c-primary);
  --check-fg: var(--prs-c-white);
  --check-size: 1rem;
  appearance: none;
  border: 1px solid currentColor;
  width: var(--check-size);
  height: var(--check-size);
  background-color: var(--prs-c-white);
  color: var(--prs-c-gray-600);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--prs-radius-btn);

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

  &:indeterminate,
  &.prs-checkbox_indeterminate {
    background-color: var(--check-fg);
    background-image:
      linear-gradient(90deg, transparent 80%, var(--check-bg) 80%),
      linear-gradient(-90deg, transparent 80%, var(--check-bg) 80%),
      linear-gradient(0deg, var(--check-bg) 43%, var(--check-fg) 43%, var(--check-fg) 57%, var(--check-bg) 57%);
    background-repeat: no-repeat;
    animation: checkmark 0.2s ease-out;
  }

  &:focus-visible,
  &.prs-checkbox_focus {
    outline: 2px solid var(--prs-c-primary);
    outline-offset: 1px;
  }

  &:disabled {
    --check-bg: var(--prs-c-gray-100);
    --check-fg: currentColor;
    background-color: var(--prs-c-gray-100);
    color: var(--prs-c-gray-300);
    cursor: not-allowed;
  }

  &.prs-checkbox-lg {
    --check-size: 1.5rem;
  }

  &.prs-checkbox-xl {
    --check-size: 2rem;
  }
}

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