:root {
  --ty-input-radius: var(--ty-control-radius);
  --ty-input-color: var(--ty-color-text);
  --ty-input-bg: var(--ty-color-bg-container);
  --ty-input-bg-disabled: var(--ty-color-bg-disabled);
  --ty-input-border: var(--ty-color-border);
  --ty-input-shadow: var(--ty-shadow-control);
  --ty-input-border-hover: var(--ty-color-primary);
  --ty-input-border-focus: var(--ty-color-primary);
  --ty-input-shadow-focus: var(--ty-shadow-focus);
  --ty-input-placeholder: var(--ty-color-text-placeholder);
  --ty-input-addon-bg: var(--ty-color-fill);
  --ty-input-addon-padding: var(--ty-spacing-3);
  --ty-input-affix-margin: 0 8px;
  --ty-input-clear-size: 1em;
  --ty-input-clear-color: var(--ty-color-text-quaternary);
  --ty-input-font-size-sm: var(--ty-control-font-size-sm);
  --ty-input-font-size-md: var(--ty-control-font-size-md);
  --ty-input-font-size-lg: var(--ty-control-font-size-lg);
  --ty-input-height-sm: var(--ty-control-height-sm);
  --ty-input-height-md: var(--ty-control-height-md);
  --ty-input-height-lg: var(--ty-control-height-lg);
  --ty-input-padding-inline-sm: var(--ty-control-padding-inline-sm);
  --ty-input-padding-inline-md: var(--ty-control-padding-inline-md);
  --ty-input-padding-inline-lg: var(--ty-control-padding-inline-lg);
  --ty-input-affix-gap: var(--ty-spacing-3);
  --ty-input-clear-size-sm: 14px;
  --ty-input-clear-size-md: 16px;
  --ty-input-clear-size-lg: 18px;
  --ty-input-text-disabled: var(--ty-color-text-quaternary);
}

[data-tiny-theme='dark'] {
  --ty-input-radius: var(--ty-control-radius);
  --ty-input-color: var(--ty-color-text);
  --ty-input-bg: var(--ty-color-bg-container);
  --ty-input-bg-disabled: var(--ty-color-bg-disabled);
  --ty-input-border: var(--ty-color-border);
  --ty-input-shadow: var(--ty-shadow-control);
  --ty-input-border-hover: var(--ty-color-primary);
  --ty-input-border-focus: var(--ty-color-primary);
  --ty-input-shadow-focus: var(--ty-shadow-focus);
  --ty-input-placeholder: var(--ty-color-text-placeholder);
  --ty-input-addon-bg: var(--ty-color-fill);
  --ty-input-addon-padding: var(--ty-spacing-3);
  --ty-input-affix-margin: 0 8px;
  --ty-input-clear-size: 1em;
  --ty-input-clear-color: var(--ty-color-text-quaternary);
  --ty-input-font-size-sm: var(--ty-control-font-size-sm);
  --ty-input-font-size-md: var(--ty-control-font-size-md);
  --ty-input-font-size-lg: var(--ty-control-font-size-lg);
  --ty-input-height-sm: var(--ty-control-height-sm);
  --ty-input-height-md: var(--ty-control-height-md);
  --ty-input-height-lg: var(--ty-control-height-lg);
  --ty-input-padding-inline-sm: var(--ty-control-padding-inline-sm);
  --ty-input-padding-inline-md: var(--ty-control-padding-inline-md);
  --ty-input-padding-inline-lg: var(--ty-control-padding-inline-lg);
  --ty-input-affix-gap: var(--ty-spacing-3);
  --ty-input-clear-size-sm: 14px;
  --ty-input-clear-size-md: 16px;
  --ty-input-clear-size-lg: 18px;
  --ty-input-text-disabled: var(--ty-color-text-quaternary);
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-input-radius: var(--ty-control-radius);
  --ty-input-color: var(--ty-color-text);
  --ty-input-bg: var(--ty-color-bg-container);
  --ty-input-bg-disabled: var(--ty-color-bg-disabled);
  --ty-input-border: var(--ty-color-border);
  --ty-input-shadow: var(--ty-shadow-control);
  --ty-input-border-hover: var(--ty-color-primary);
  --ty-input-border-focus: var(--ty-color-primary);
  --ty-input-shadow-focus: var(--ty-shadow-focus);
  --ty-input-placeholder: var(--ty-color-text-placeholder);
  --ty-input-addon-bg: var(--ty-color-fill);
  --ty-input-addon-padding: var(--ty-spacing-3);
  --ty-input-affix-margin: 0 8px;
  --ty-input-clear-size: 1em;
  --ty-input-clear-color: var(--ty-color-text-quaternary);
  --ty-input-font-size-sm: var(--ty-control-font-size-sm);
  --ty-input-font-size-md: var(--ty-control-font-size-md);
  --ty-input-font-size-lg: var(--ty-control-font-size-lg);
  --ty-input-height-sm: var(--ty-control-height-sm);
  --ty-input-height-md: var(--ty-control-height-md);
  --ty-input-height-lg: var(--ty-control-height-lg);
  --ty-input-padding-inline-sm: var(--ty-control-padding-inline-sm);
  --ty-input-padding-inline-md: var(--ty-control-padding-inline-md);
  --ty-input-padding-inline-lg: var(--ty-control-padding-inline-lg);
  --ty-input-affix-gap: var(--ty-spacing-3);
  --ty-input-clear-size-sm: 14px;
  --ty-input-clear-size-md: 16px;
  --ty-input-clear-size-lg: 18px;
  --ty-input-text-disabled: var(--ty-color-text-quaternary);
}
}
