/*
  Nexus Checkbox Component
  - Sizes: sm, md
  - States: default, hover, active, focus-visible, checked, indeterminate, disabled
  - RTL-aware via logical properties
  - Uses Nexus tokens from globals.css and typographySystem.css
*/

/* Root clickable label */
label.nexus-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--nexus-ref-spacing-12);
  cursor: pointer;
  color: var(--nexus-ref-neutral-10);
  -webkit-tap-highlight-color: transparent;
  /* default sizing tokens (md) */
  --nexus-checkbox-size: 20px;
  --nexus-checkbox-radius: 6px;
  --nexus-checkbox-border-w: 1px;
  --nexus-checkbox-transition: 160ms ease;

  --nexus-checkbox-bg: var(--nexus-ref-neutral-100);
  --nexus-checkbox-border: var(--nexus-ref-neutral-90);
  --nexus-checkbox-bg-hover: var(--nexus-ref-primary-90);
  --nexus-checkbox-border-hover: var(--nexus-ref-primary-20);
  --nexus-checkbox-bg-checked: var(--nexus-ref-primary-90);
  --nexus-checkbox-border-checked:var(--nexus-ref-primary-20);
  --nexus-checkbox-bg-checked-hover: var(--nexus-ref-primary-90);
  --nexus-checkbox-icon: var(--nexus-ref-primary-100);
  --nexus-checkbox-disabled: var(--nexus-ref-neutral-80);
}

/* Small size */
label.nexus-checkbox[data-size="sm"] {
  --nexus-checkbox-size: 16px;
  --nexus-checkbox-radius: 4px;
  --nexus-checkbox-label-font-size: var(--nexus-sys-typescale-text-sm-font-size);
  --nexus-checkbox-label-line-height: var(--nexus-sys-typescale-text-sm-line-height);
  --nexus-checkbox-label-weight: var(--nexus-sys-typescale-font-weight-medium);
  --nexus-checkbox-support-font-size: var(--nexus-sys-typescale-text-sm-font-size);
  --nexus-checkbox-support-line-height: var(--nexus-sys-typescale-text-xs-line-height);
  --nexus-checkbox-support-color: var(--nexus-ref-neutral-80);
}

/* Medium size (default) */
label.nexus-checkbox[data-size="md"] {
  --nexus-checkbox-size: 20px;
  --nexus-checkbox-radius: 6px;
  --nexus-checkbox-label-font-size: var(--nexus-sys-typescale-text-md-font-size);
  --nexus-checkbox-label-line-height: var(--nexus-sys-typescale-text-md-line-height);
  --nexus-checkbox-label-weight: var(--nexus-sys-typescale-font-weight-medium);
  --nexus-checkbox-support-font-size: var(--nexus-sys-typescale-text-md-font-size);
  --nexus-checkbox-support-line-height: var(--nexus-sys-typescale-text-md-line-height);
  --nexus-checkbox-support-color: var(--nexus-ref-neutral-80);
  --nexus-checkbox-border-foucs:var(--nexus-ref-primary-80);
}

/* Input is visually hidden but accessible */
.nexus-checkbox-input {
  appearance: none;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Box */
.nexus-checkbox-control {
  position: relative;
  inline-size: var(--nexus-checkbox-size);
  block-size: var(--nexus-checkbox-size);
  border-radius: var(--nexus-checkbox-radius);
  background: var(--nexus-checkbox-bg);
  border: var(--nexus-checkbox-border-w) solid var(--nexus-checkbox-border);
  box-sizing: border-box;
  flex-shrink: 0;
  color: var(--nexus-checkbox-icon); /* used by SVG via currentColor */
  transition: background-color var(--nexus-checkbox-transition), border-color var(--nexus-checkbox-transition), box-shadow var(--nexus-checkbox-transition);
}

/* Hover and active on label */
label.nexus-checkbox:hover:not(:has(.nexus-checkbox-input:disabled, .nexus-checkbox-input:checked, .nexus-checkbox-input:indeterminate)) .nexus-checkbox-control {
  background: var(--nexus-checkbox-bg-hover);
  border-color: var(--nexus-checkbox-border-hover);
}
label.nexus-checkbox:active:not(:has(.nexus-checkbox-input:disabled, .nexus-checkbox-input:checked, .nexus-checkbox-input:indeterminate)) .nexus-checkbox-control {
  box-shadow: 0 0 0 3px var(--nexus-ref-primary-90);
  border-color: var(--nexus-checkbox-border-foucs) !important;
  background: var(--nexus-ref-neutral-100);
}

/* Checkmark/indeterminate using pseudo */
.nexus-checkbox-control::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transform-origin: center;
}

/* Checked state */
.nexus-checkbox-input:checked + .nexus-checkbox-control {
  background: var(--nexus-checkbox-bg-checked);
  border-color: var(--nexus-checkbox-border-checked);
  color: var(--nexus-checkbox-border-checked);
}
.nexus-checkbox-input:checked + .nexus-checkbox-control::after {
  /* Use provided 10x8 SVG with round caps/joins */
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2710%27%20height%3D%278%27%20viewBox%3D%270%200%2010%208%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M8.8335%200.832031L3.3335%206.33203L0.833496%203.83203%27%20stroke%3D%27%237C59EC%27%20stroke-width%3D%271.6666%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 14px;
  opacity: 1;
}

/* Smaller checkmark for small size (16px box) */
label.nexus-checkbox[data-size="sm"] .nexus-checkbox-input:checked + .nexus-checkbox-control::after {
  background-size: 10px 8px;
}

label.nexus-checkbox:hover:not(:has(.nexus-checkbox-input:disabled)) .nexus-checkbox-input:checked + .nexus-checkbox-control {
  background: var(--nexus-checkbox-bg-checked);
  border-color: var(--nexus-checkbox-border-checked);
  
}
/* Show active ring when pressing a checked checkbox */
label.nexus-checkbox:active .nexus-checkbox-input:checked + .nexus-checkbox-control {
  box-shadow: 0 0 0 3px var(--nexus-ref-primary-90);
}

/* Indeterminate state */
.nexus-checkbox-input:indeterminate + .nexus-checkbox-control {
  background: var(--nexus-checkbox-bg-checked);
  border-color: var(--nexus-checkbox-bg-checked);
  color: var(--nexus-ref-primary-20);
}
label.nexus-checkbox:hover:not(:has(.nexus-checkbox-input:disabled)) .nexus-checkbox-input:indeterminate + .nexus-checkbox-control {
  background: var(--nexus-checkbox-bg-checked);
  border-color: var(--nexus-checkbox-bg-checked);
}
.nexus-checkbox-input:indeterminate + .nexus-checkbox-control::after {
  inline-size: 60%;
  block-size: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 1;
}

/* Focus visible on control when input is focused */
.nexus-checkbox-input:focus-visible + .nexus-checkbox-control {
  outline: 2px solid var(--nexus-ref-primary-80);
  outline-offset: 2px;
}

/* Disabled styles */
.nexus-checkbox-input:disabled + .nexus-checkbox-control {
  cursor: not-allowed;
  opacity: 0.3;
  background: var(--nexus-ref-neutral-95);
  border-color: var(--nexus-ref-neutral-90);
  color: var(--nexus-checkbox-disabled);
}
/* Disabled checked state - use gray checkmark */
.nexus-checkbox-input:disabled:checked + .nexus-checkbox-control::after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2710%27%20height%3D%278%27%20viewBox%3D%270%200%2010%208%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M8.8335%200.832031L3.3335%206.33203L0.833496%203.83203%27%20stroke%3D%27%23666666%27%20stroke-width%3D%271.6666%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-size: 10px 8px;
  background-position: center center;
}
/* Smaller disabled checkmark for small size (16px box) */
label.nexus-checkbox[data-size="sm"] .nexus-checkbox-input:disabled:checked + .nexus-checkbox-control::after {
  background-size: 8px 6.4px;
}
label.nexus-checkbox:has(.nexus-checkbox-input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}
label.nexus-checkbox:has(.nexus-checkbox-input:disabled):active .nexus-checkbox-control {
  box-shadow: none !important;
}

/* Content layout mirrors toggle */
.nexus-checkbox-content {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.nexus-checkbox-label {
  font-size: var(--nexus-checkbox-label-font-size);
  line-height: var(--nexus-checkbox-label-line-height);
  font-weight: var(--nexus-checkbox-label-weight);
  color: var(--nexus-ref-neutral-50);
}
.nexus-checkbox-support-text {
  font-size: var(--nexus-checkbox-support-font-size);
  line-height: var(--nexus-checkbox-support-line-height);
  color: var(--nexus-checkbox-support-color);
  font-weight: var(--nexus-sys-typescale-font-weight-regular);
}

/* Align to start when support text exists */
label.nexus-checkbox:has(.nexus-checkbox-support-text) {
  align-items: flex-start;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .nexus-checkbox-control { transition: none; }
}