:root {
  --ty-checkbox-size: 16px;
  --ty-checkbox-radius: var(--ty-border-radius);
  --ty-checkbox-label-gap: 8px;
  --ty-checkbox-label-padding-inline-end: 5px;
  --ty-checkbox-label-color: var(--ty-color-text);
  --ty-checkbox-bg: var(--ty-color-bg-container);
  --ty-checkbox-border: var(--ty-color-border);
  --ty-checkbox-shadow: var(--ty-shadow-control);
  --ty-checkbox-border-hover: var(--ty-color-primary);
  --ty-checkbox-bg-checked: var(--ty-color-primary);
  --ty-checkbox-border-checked: var(--ty-color-primary);
  --ty-checkbox-indicator-color: #fff;
  --ty-checkbox-bg-disabled: var(--ty-color-fill-secondary);
  --ty-checkbox-border-disabled: var(--ty-color-border);
  --ty-checkbox-indicator-color-disabled: var(--ty-color-text-quaternary);
  --ty-checkbox-label-color-disabled: var(--ty-color-text-quaternary);
}

[data-tiny-theme='dark'] {
  --ty-checkbox-size: 16px;
  --ty-checkbox-radius: var(--ty-border-radius);
  --ty-checkbox-label-gap: 8px;
  --ty-checkbox-label-padding-inline-end: 5px;
  --ty-checkbox-label-color: var(--ty-color-text);
  --ty-checkbox-bg: #1f1f1f;
  --ty-checkbox-border: #424242;
  --ty-checkbox-shadow: var(--ty-shadow-control);
  --ty-checkbox-border-hover: var(--ty-color-primary);
  --ty-checkbox-bg-checked: var(--ty-color-primary);
  --ty-checkbox-border-checked: var(--ty-color-primary);
  --ty-checkbox-indicator-color: #fff;
  --ty-checkbox-bg-disabled: #2a2a2a;
  --ty-checkbox-border-disabled: var(--ty-color-border);
  --ty-checkbox-indicator-color-disabled: var(--ty-color-text-quaternary);
  --ty-checkbox-label-color-disabled: var(--ty-color-text-quaternary);
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-checkbox-size: 16px;
  --ty-checkbox-radius: var(--ty-border-radius);
  --ty-checkbox-label-gap: 8px;
  --ty-checkbox-label-padding-inline-end: 5px;
  --ty-checkbox-label-color: var(--ty-color-text);
  --ty-checkbox-bg: #1f1f1f;
  --ty-checkbox-border: #424242;
  --ty-checkbox-shadow: var(--ty-shadow-control);
  --ty-checkbox-border-hover: var(--ty-color-primary);
  --ty-checkbox-bg-checked: var(--ty-color-primary);
  --ty-checkbox-border-checked: var(--ty-color-primary);
  --ty-checkbox-indicator-color: #fff;
  --ty-checkbox-bg-disabled: #2a2a2a;
  --ty-checkbox-border-disabled: var(--ty-color-border);
  --ty-checkbox-indicator-color-disabled: var(--ty-color-text-quaternary);
  --ty-checkbox-label-color-disabled: var(--ty-color-text-quaternary);
}
}