:root {
  --ty-switch-bg: var(--ty-color-text-quaternary);
  --ty-switch-bg-checked: var(--ty-color-primary);
  --ty-switch-thumb-bg: #fff;
  --ty-switch-thumb-border: var(--ty-color-text-quaternary);
  --ty-switch-thumb-border-checked: var(--ty-color-primary);
  --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
  --ty-switch-label-color: #fff;
  --ty-switch-font-size-sm: 9px;
  --ty-switch-font-size-md: 12px;
  --ty-switch-font-size-lg: 14px;
  --ty-switch-margin-inline-sm: 10px;
  --ty-switch-margin-inline-md: 12px;
  --ty-switch-margin-inline-lg: 14px;
  --ty-switch-width-sm: 29px;
  --ty-switch-width-md: 36px;
  --ty-switch-width-lg: 42px;
  --ty-switch-height-sm: 14px;
  --ty-switch-height-md: 16px;
  --ty-switch-height-lg: 20px;
  --ty-switch-radius-sm: 18px;
  --ty-switch-radius-md: 22px;
  --ty-switch-radius-lg: 26px;
  --ty-switch-label-padding-inline-start-default: 11px;
  --ty-switch-label-padding-inline-end-default: 5px;
  --ty-switch-label-padding-inline-start-checked: 5px;
  --ty-switch-label-padding-inline-end-checked: 11px;
  --ty-switch-transition-duration: 300ms;
  --ty-switch-disabled-opacity: 0.4;
}

[data-tiny-theme='dark'] {
  --ty-switch-bg: rgba(255, 255, 255, 0.25);
  --ty-switch-bg-checked: var(--ty-color-primary);
  --ty-switch-thumb-bg: #e8e8e8;
  --ty-switch-thumb-border: rgba(255, 255, 255, 0.25);
  --ty-switch-thumb-border-checked: var(--ty-color-primary);
  --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  --ty-switch-label-color: #fff;
  --ty-switch-font-size-sm: 9px;
  --ty-switch-font-size-md: 12px;
  --ty-switch-font-size-lg: 14px;
  --ty-switch-margin-inline-sm: 10px;
  --ty-switch-margin-inline-md: 12px;
  --ty-switch-margin-inline-lg: 14px;
  --ty-switch-width-sm: 29px;
  --ty-switch-width-md: 36px;
  --ty-switch-width-lg: 42px;
  --ty-switch-height-sm: 14px;
  --ty-switch-height-md: 16px;
  --ty-switch-height-lg: 20px;
  --ty-switch-radius-sm: 18px;
  --ty-switch-radius-md: 22px;
  --ty-switch-radius-lg: 26px;
  --ty-switch-label-padding-inline-start-default: 11px;
  --ty-switch-label-padding-inline-end-default: 5px;
  --ty-switch-label-padding-inline-start-checked: 5px;
  --ty-switch-label-padding-inline-end-checked: 11px;
  --ty-switch-transition-duration: 300ms;
  --ty-switch-disabled-opacity: 0.4;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-switch-bg: rgba(255, 255, 255, 0.25);
  --ty-switch-bg-checked: var(--ty-color-primary);
  --ty-switch-thumb-bg: #e8e8e8;
  --ty-switch-thumb-border: rgba(255, 255, 255, 0.25);
  --ty-switch-thumb-border-checked: var(--ty-color-primary);
  --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  --ty-switch-label-color: #fff;
  --ty-switch-font-size-sm: 9px;
  --ty-switch-font-size-md: 12px;
  --ty-switch-font-size-lg: 14px;
  --ty-switch-margin-inline-sm: 10px;
  --ty-switch-margin-inline-md: 12px;
  --ty-switch-margin-inline-lg: 14px;
  --ty-switch-width-sm: 29px;
  --ty-switch-width-md: 36px;
  --ty-switch-width-lg: 42px;
  --ty-switch-height-sm: 14px;
  --ty-switch-height-md: 16px;
  --ty-switch-height-lg: 20px;
  --ty-switch-radius-sm: 18px;
  --ty-switch-radius-md: 22px;
  --ty-switch-radius-lg: 26px;
  --ty-switch-label-padding-inline-start-default: 11px;
  --ty-switch-label-padding-inline-end-default: 5px;
  --ty-switch-label-padding-inline-start-checked: 5px;
  --ty-switch-label-padding-inline-end-checked: 11px;
  --ty-switch-transition-duration: 300ms;
  --ty-switch-disabled-opacity: 0.4;
}
}