/* docara-shell-source: smart/smart/checkbox/css/checkbox.css */
@layer sf.components {
  .sf-checkbox.sf-checkbox--size-1 > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-2 > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
}
@layer sf.states {
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error)[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox:not(.error):has(input:checked):not(:has(input:disabled)) > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox[\:has\(input\:disabled\)] > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon, .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:checked\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox:has(input:disabled) > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon, .sf-checkbox:has(input:disabled):has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:has(input:disabled):has(input:checked) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
}