.wk-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--wk-sp-2);
  cursor: pointer;
  user-select: none;
}

.wk-checkbox:focus-visible {
  outline: none;
}

.wk-checkbox:focus-visible .wk-checkbox__box {
  outline: 2px solid var(--wk-border-glow);
  outline-offset: 2px;
}

/* ── Box ── */
.wk-checkbox__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--wk-r-xs);
  border: 1.5px solid var(--wk-border-strong);
  background: var(--wk-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--wk-dur-fast) var(--wk-ease),
              border-color var(--wk-dur-fast) var(--wk-ease);
}

.wk-checkbox:hover:not(.wk-checkbox--disabled) .wk-checkbox__box {
  border-color: var(--wk-brand-primary);
}

/* ── Checked ── */
.wk-checkbox--checked .wk-checkbox__box {
  background: var(--wk-brand-primary);
  border-color: var(--wk-brand-primary);
}

.wk-checkbox__check {
  width: 12px;
  height: 10px;
  color: var(--wk-text-inverse);
  flex-shrink: 0;
}

/* ── Disabled ── */
.wk-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ── Label ── */
.wk-checkbox__label {
  font-size: var(--wk-text-size-md);
  color: var(--wk-text-primary);
  line-height: var(--wk-leading-normal);
}
