:root {
  --ty-cascader-bg: var(--ty-color-bg-container);
  --ty-cascader-min-width: 200px;
  --ty-cascader-border: var(--ty-color-border);
  --ty-cascader-radius: var(--ty-border-radius);
  --ty-cascader-border-hover: var(--ty-color-primary);
  --ty-cascader-border-focus: var(--ty-color-primary);
  --ty-cascader-shadow-focus: var(--ty-shadow-focus);
  --ty-cascader-opacity-disabled: 0.5;
  --ty-cascader-font-size-sm: var(--ty-font-size-sm);
  --ty-cascader-font-size-md: var(--ty-font-size-base);
  --ty-cascader-font-size-lg: var(--ty-font-size-lg);
  --ty-cascader-height-sm: var(--ty-height-sm);
  --ty-cascader-height-md: var(--ty-height-md);
  --ty-cascader-height-lg: var(--ty-height-lg);
  --ty-cascader-padding-sm: 0 28px 0 8px;
  --ty-cascader-padding-md: 0 32px 0 10px;
  --ty-cascader-padding-lg: 0 36px 0 12px;
  --ty-cascader-color: var(--ty-color-text);
  --ty-cascader-placeholder: var(--ty-color-text-placeholder);
  --ty-cascader-clear-color: var(--ty-color-text-tertiary);
  --ty-cascader-clear-color-hover: var(--ty-color-text-secondary);
  --ty-cascader-clear-offset-inline-end: 24px;
  --ty-cascader-clear-font-size: 12px;
  --ty-cascader-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-arrow-offset-inline-end: 8px;
  --ty-cascader-arrow-font-size: 12px;
  --ty-cascader-dropdown-bg: var(--ty-color-bg-container);
  --ty-cascader-dropdown-shadow: var(--ty-shadow-popup);
  --ty-cascader-dropdown-max-height: 300px;
  --ty-cascader-menu-padding: 4px 0;
  --ty-cascader-menu-min-width: 120px;
  --ty-cascader-hover: var(--ty-color-fill-secondary);
  --ty-cascader-menu-empty-padding: 8px 12px;
  --ty-cascader-menu-empty-color: var(--ty-color-text-secondary);
  --ty-cascader-menu-item-padding: 5px 12px;
  --ty-cascader-menu-item-disabled-opacity: 0.5;
  --ty-cascader-option-color-active: var(--ty-color-primary);
  --ty-cascader-option-font-weight-active: 500;
  --ty-cascader-menu-item-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-menu-item-arrow-gap: 8px;
  --ty-cascader-menu-item-arrow-font-size: 12px;
  --ty-cascader-selected-bg: rgba(110, 65, 191, 0.06);
}

[data-tiny-theme='dark'] {
  --ty-cascader-bg: #1f1f1f;
  --ty-cascader-min-width: 200px;
  --ty-cascader-border: #424242;
  --ty-cascader-radius: var(--ty-border-radius);
  --ty-cascader-border-hover: var(--ty-color-primary);
  --ty-cascader-border-focus: var(--ty-color-primary);
  --ty-cascader-shadow-focus: var(--ty-shadow-focus);
  --ty-cascader-opacity-disabled: 0.5;
  --ty-cascader-font-size-sm: var(--ty-font-size-sm);
  --ty-cascader-font-size-md: var(--ty-font-size-base);
  --ty-cascader-font-size-lg: var(--ty-font-size-lg);
  --ty-cascader-height-sm: var(--ty-height-sm);
  --ty-cascader-height-md: var(--ty-height-md);
  --ty-cascader-height-lg: var(--ty-height-lg);
  --ty-cascader-padding-sm: 0 28px 0 8px;
  --ty-cascader-padding-md: 0 32px 0 10px;
  --ty-cascader-padding-lg: 0 36px 0 12px;
  --ty-cascader-color: var(--ty-color-text);
  --ty-cascader-placeholder: var(--ty-color-text-placeholder);
  --ty-cascader-clear-color: var(--ty-color-text-tertiary);
  --ty-cascader-clear-color-hover: var(--ty-color-text-secondary);
  --ty-cascader-clear-offset-inline-end: 24px;
  --ty-cascader-clear-font-size: 12px;
  --ty-cascader-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-arrow-offset-inline-end: 8px;
  --ty-cascader-arrow-font-size: 12px;
  --ty-cascader-dropdown-bg: #1f1f1f;
  --ty-cascader-dropdown-shadow: var(--ty-shadow-popup);
  --ty-cascader-dropdown-max-height: 300px;
  --ty-cascader-menu-padding: 4px 0;
  --ty-cascader-menu-min-width: 120px;
  --ty-cascader-hover: #2a2a2a;
  --ty-cascader-menu-empty-padding: 8px 12px;
  --ty-cascader-menu-empty-color: var(--ty-color-text-secondary);
  --ty-cascader-menu-item-padding: 5px 12px;
  --ty-cascader-menu-item-disabled-opacity: 0.5;
  --ty-cascader-option-color-active: var(--ty-color-primary);
  --ty-cascader-option-font-weight-active: 500;
  --ty-cascader-menu-item-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-menu-item-arrow-gap: 8px;
  --ty-cascader-menu-item-arrow-font-size: 12px;
  --ty-cascader-selected-bg: rgba(144, 101, 208, 0.1);
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-cascader-bg: #1f1f1f;
  --ty-cascader-min-width: 200px;
  --ty-cascader-border: #424242;
  --ty-cascader-radius: var(--ty-border-radius);
  --ty-cascader-border-hover: var(--ty-color-primary);
  --ty-cascader-border-focus: var(--ty-color-primary);
  --ty-cascader-shadow-focus: var(--ty-shadow-focus);
  --ty-cascader-opacity-disabled: 0.5;
  --ty-cascader-font-size-sm: var(--ty-font-size-sm);
  --ty-cascader-font-size-md: var(--ty-font-size-base);
  --ty-cascader-font-size-lg: var(--ty-font-size-lg);
  --ty-cascader-height-sm: var(--ty-height-sm);
  --ty-cascader-height-md: var(--ty-height-md);
  --ty-cascader-height-lg: var(--ty-height-lg);
  --ty-cascader-padding-sm: 0 28px 0 8px;
  --ty-cascader-padding-md: 0 32px 0 10px;
  --ty-cascader-padding-lg: 0 36px 0 12px;
  --ty-cascader-color: var(--ty-color-text);
  --ty-cascader-placeholder: var(--ty-color-text-placeholder);
  --ty-cascader-clear-color: var(--ty-color-text-tertiary);
  --ty-cascader-clear-color-hover: var(--ty-color-text-secondary);
  --ty-cascader-clear-offset-inline-end: 24px;
  --ty-cascader-clear-font-size: 12px;
  --ty-cascader-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-arrow-offset-inline-end: 8px;
  --ty-cascader-arrow-font-size: 12px;
  --ty-cascader-dropdown-bg: #1f1f1f;
  --ty-cascader-dropdown-shadow: var(--ty-shadow-popup);
  --ty-cascader-dropdown-max-height: 300px;
  --ty-cascader-menu-padding: 4px 0;
  --ty-cascader-menu-min-width: 120px;
  --ty-cascader-hover: #2a2a2a;
  --ty-cascader-menu-empty-padding: 8px 12px;
  --ty-cascader-menu-empty-color: var(--ty-color-text-secondary);
  --ty-cascader-menu-item-padding: 5px 12px;
  --ty-cascader-menu-item-disabled-opacity: 0.5;
  --ty-cascader-option-color-active: var(--ty-color-primary);
  --ty-cascader-option-font-weight-active: 500;
  --ty-cascader-menu-item-arrow-color: var(--ty-color-text-tertiary);
  --ty-cascader-menu-item-arrow-gap: 8px;
  --ty-cascader-menu-item-arrow-font-size: 12px;
  --ty-cascader-selected-bg: rgba(144, 101, 208, 0.1);
}
}