.dsa-checkbox {
  --dsa-checkbox--background: transparent;
  --dsa-checkbox--background_checked: var(--ks-color-primary);
  --dsa-checkbox--background_active: transparent;
  --dsa-checkbox--border: var(--ks-border-width-default) solid;
  --dsa-checkbox--border-color: var(--ks-border-color-interface-interactive);
  --dsa-checkbox--border-color_hover: var(--ks-border-color-interface-interactive-hover);
  --dsa-checkbox--border-color_focus: var(--ks-border-color-interface-interactive-active);
  --dsa-checkbox--border-color_checked: var(--ks-border-color-interface-interactive-selected);
  --dsa-checkbox--size: 1.5em;
  --dsa-checkbox--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
  --dsa-checkbox--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-checkbox--size) / 4));
  --dsa-checkbox__checkmark--color: var(--ks-text-color-on-primary);
  --dsa-checkbox__label--font: var(--ks-font-interface-s);
  --dsa-checkbox__label--font-weight: var(--ks-font-weight-regular);
  --dsa-checkbox__label--color: var(--ks-text-color-interface);
  --dsa-checkbox__label--margin-left: 0.5em;
}

.dsa-checkbox {
  display: flex;
}
.dsa-checkbox .c-form-check--checkbox {
  --c-form-check_box--size: var(--dsa-checkbox--size, 1.125em);
  --c-form-check_box--border: var(--dsa-checkbox--border, var(--ks-border-width-default) solid);
  --c-form-check_box--border-color: var(--dsa-checkbox--border-color, var(--ks-border-color-interface-interactive));
  --c-form-check_box-hover--border-color: var(
    --dsa-checkbox--border-color_hover,
    var(--ks-border-color-interface-interactive-hover)
  );
  --c-form-check_box-focus--border-color: var(
    --dsa-checkbox--border-color_focus,
    var(--ks-border-color-interface-interactive-active)
  );
  --c-form-check_box-checked--border-color: var(
    --dsa-checkbox--border-color_checked,
    var(--ks-border-color-interface-interactive-selected)
  );
  --c-form-check_box--background: var(--dsa-checkbox--background, var(--ks-background-color-interface-interactive));
  --c-form-check_box-checked--background: var(
    --dsa-checkbox--background_checked,
    var(--ks-background-color-interface-interactive-selected)
  );
  --c-form-check_checkmark--color: var(--dsa-checkbox__checkmark--color, var(--ks-text-color-on-primary));
  --c-form-check_box-focus--shadow: var(--dsa-checkbox--shadow_focus, 0 0 4px 0);
  --c-form-check_checkmark--size: var(--dsa-checkbox_radio__checkmark--size, calc(var(--dsa-checkbox--size) * 0.5));
  --c-form-check_box--border-radius: var(
    --dsa-checkbox--border-radius,
    min(4px, calc(var(--dsa-checkbox--size) / 4))
  );
  font: var(--dsa-checkbox__label--font, var(--ks-font-interface-s));
  font-weight: var(--dsa-checkbox__label--font-weight, var(--ks-font-weight-regular));
  color: var(--dsa-checkbox__label--color, var(--ks-text-color-interface-interactive));
}
.dsa-checkbox .c-form-check--checkbox .c-form-check__label {
  margin-left: var(--dsa-checkbox__label--margin-left, 0.5em);
}
.dsa-checkbox .c-form-check--checkbox .c-form-check__box {
  transition: var(--ks-transition-toggle);
}