:root {
  --ty-menu-dark-bg: #1f1f1f;
  --ty-menu-dark-border: #303030;
  --ty-menu-dark-color: rgba(255, 255, 255, 0.72);
  --ty-menu-dark-color-hover: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-color-selected: var(--ty-color-primary-hover);
  --ty-menu-dark-color-disabled: rgba(255, 255, 255, 0.25);
  --ty-menu-divider-color: rgba(0, 0, 0, 0.1);
  --ty-menu-border: var(--ty-color-border);
  --ty-menu-color: var(--ty-color-text-secondary);
  --ty-menu-item-color-danger: var(--ty-color-danger);
  --ty-menu-popup-bg: var(--ty-color-bg-container);
  --ty-menu-popup-border: transparent;
  --ty-menu-popup-shadow: var(--ty-shadow-popup);
  --ty-menu-dark-popup-bg: #1f1f1f;
  --ty-menu-dark-popup-border: #303030;
  --ty-menu-group-title-color: var(--ty-color-text-tertiary);
  --ty-menu-item-radius: var(--ty-border-radius);
  --ty-menu-item-gap: 10px;
  --ty-menu-item-padding-inline: 12px;
  --ty-menu-item-padding-block: 8px;
  --ty-menu-item-min-height: 40px;
  --ty-menu-icon-size: 16px;
  --ty-menu-indicator-width: 3px;
  --ty-menu-indicator-radius: 999px;
  --ty-menu-indicator-color: var(--ty-color-primary);
  --ty-menu-item-bg-hover: color-mix(in srgb, var(--ty-color-primary) 6%, transparent);
  --ty-menu-item-bg-active: color-mix(in srgb, var(--ty-color-primary) 10%, transparent);
  --ty-menu-item-bg-selected: color-mix(in srgb, var(--ty-color-primary) 8%, transparent);
  --ty-menu-item-border-hover: color-mix(in srgb, var(--ty-color-primary) 20%, transparent);
  --ty-menu-item-border-selected: color-mix(in srgb, var(--ty-color-primary) 48%, transparent);
  --ty-menu-item-font-weight: 500;
  --ty-menu-sub-list-popup-min-width: 160px;
  --ty-menu-sub-arrow-margin-start: 20px;
  --ty-menu-group-title-padding: 8px 10px;
  --ty-menu-overlay-item-color: var(--ty-color-text);
  --ty-menu-overlay-item-hover-bg: var(--ty-color-bg-spotlight);
  --ty-menu-dark-overlay-item-color: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-overlay-item-hover-bg: #2a2a2a;
  --ty-menu-group-title-font-size: 14px;
  --ty-menu-group-title-font-weight: 600;
  --ty-menu-group-title-letter-spacing: 0.01em;
  --ty-menu-group-title-first-margin-top: 4px;
  --ty-menu-group-list-item-padding: 12px 35px 12px 25px;
  --ty-menu-divider-margin: 5px 0;
  --ty-menu-popup-padding-block: var(--ty-dropdown-menu-padding);
  --ty-menu-popup-item-padding: var(--ty-dropdown-item-padding);
  --ty-menu-popup-item-gap: 0;
  --ty-menu-item-height-sm: 32px;
  --ty-menu-item-height-md: 40px;
  --ty-menu-item-height-lg: 48px;
  --ty-menu-item-padding-inline-sm: 10px;
  --ty-menu-item-padding-inline-md: 12px;
  --ty-menu-item-padding-inline-lg: 14px;
  --ty-menu-item-gap-sm: 8px;
  --ty-menu-item-gap-md: 10px;
  --ty-menu-item-gap-lg: 12px;
  --ty-menu-item-padding-block-compact: 6px;
  --ty-menu-item-padding-block-comfortable: 8px;
  --ty-menu-disabled-opacity: 0.55;
  --ty-menu-light-bg: #ffffff;
  --ty-menu-light-border: #f0f0f0;
  --ty-menu-light-color: #32325d;
  --ty-menu-light-popup-bg: #ffffff;
  --ty-menu-light-popup-border: transparent;
  --ty-menu-light-overlay-item-color: #32325d;
  --ty-menu-light-overlay-item-hover-bg: #f5f5ff;
}

[data-tiny-theme='dark'] {
  --ty-menu-dark-bg: #1f1f1f;
  --ty-menu-dark-border: #303030;
  --ty-menu-dark-color: rgba(255, 255, 255, 0.72);
  --ty-menu-dark-color-hover: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-color-selected: var(--ty-color-primary-hover);
  --ty-menu-dark-color-disabled: rgba(255, 255, 255, 0.25);
  --ty-menu-divider-color: rgba(255, 255, 255, 0.1);
  --ty-menu-border: #303030;
  --ty-menu-color: rgba(255, 255, 255, 0.72);
  --ty-menu-item-color-danger: var(--ty-color-danger);
  --ty-menu-popup-bg: #1f1f1f;
  --ty-menu-popup-border: #303030;
  --ty-menu-popup-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --ty-menu-dark-popup-bg: #1f1f1f;
  --ty-menu-dark-popup-border: #303030;
  --ty-menu-group-title-color: rgba(255, 255, 255, 0.45);
  --ty-menu-item-radius: var(--ty-border-radius);
  --ty-menu-item-gap: 10px;
  --ty-menu-item-padding-inline: 12px;
  --ty-menu-item-padding-block: 8px;
  --ty-menu-item-min-height: 40px;
  --ty-menu-icon-size: 16px;
  --ty-menu-indicator-width: 3px;
  --ty-menu-indicator-radius: 999px;
  --ty-menu-indicator-color: var(--ty-color-primary);
  --ty-menu-item-bg-hover: color-mix(in srgb, var(--ty-color-primary) 10%, transparent);
  --ty-menu-item-bg-active: color-mix(in srgb, var(--ty-color-primary) 14%, transparent);
  --ty-menu-item-bg-selected: color-mix(in srgb, var(--ty-color-primary) 14%, transparent);
  --ty-menu-item-border-hover: color-mix(in srgb, var(--ty-color-primary) 28%, transparent);
  --ty-menu-item-border-selected: color-mix(in srgb, var(--ty-color-primary) 56%, transparent);
  --ty-menu-item-font-weight: 500;
  --ty-menu-sub-list-popup-min-width: 160px;
  --ty-menu-sub-arrow-margin-start: 20px;
  --ty-menu-group-title-padding: 8px 10px;
  --ty-menu-overlay-item-color: var(--ty-color-text);
  --ty-menu-overlay-item-hover-bg: var(--ty-color-bg-spotlight);
  --ty-menu-dark-overlay-item-color: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-overlay-item-hover-bg: #2a2a2a;
  --ty-menu-group-title-font-size: 14px;
  --ty-menu-group-title-font-weight: 600;
  --ty-menu-group-title-letter-spacing: 0.01em;
  --ty-menu-group-title-first-margin-top: 4px;
  --ty-menu-group-list-item-padding: 12px 35px 12px 25px;
  --ty-menu-divider-margin: 5px 0;
  --ty-menu-popup-padding-block: var(--ty-dropdown-menu-padding);
  --ty-menu-popup-item-padding: var(--ty-dropdown-item-padding);
  --ty-menu-popup-item-gap: 0;
  --ty-menu-item-height-sm: 32px;
  --ty-menu-item-height-md: 40px;
  --ty-menu-item-height-lg: 48px;
  --ty-menu-item-padding-inline-sm: 10px;
  --ty-menu-item-padding-inline-md: 12px;
  --ty-menu-item-padding-inline-lg: 14px;
  --ty-menu-item-gap-sm: 8px;
  --ty-menu-item-gap-md: 10px;
  --ty-menu-item-gap-lg: 12px;
  --ty-menu-item-padding-block-compact: 6px;
  --ty-menu-item-padding-block-comfortable: 8px;
  --ty-menu-disabled-opacity: 0.55;
  --ty-menu-light-bg: #ffffff;
  --ty-menu-light-border: #f0f0f0;
  --ty-menu-light-color: #32325d;
  --ty-menu-light-popup-bg: #ffffff;
  --ty-menu-light-popup-border: transparent;
  --ty-menu-light-overlay-item-color: #32325d;
  --ty-menu-light-overlay-item-hover-bg: #f5f5ff;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-menu-dark-bg: #1f1f1f;
  --ty-menu-dark-border: #303030;
  --ty-menu-dark-color: rgba(255, 255, 255, 0.72);
  --ty-menu-dark-color-hover: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-color-selected: var(--ty-color-primary-hover);
  --ty-menu-dark-color-disabled: rgba(255, 255, 255, 0.25);
  --ty-menu-divider-color: rgba(255, 255, 255, 0.1);
  --ty-menu-border: #303030;
  --ty-menu-color: rgba(255, 255, 255, 0.72);
  --ty-menu-item-color-danger: var(--ty-color-danger);
  --ty-menu-popup-bg: #1f1f1f;
  --ty-menu-popup-border: #303030;
  --ty-menu-popup-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --ty-menu-dark-popup-bg: #1f1f1f;
  --ty-menu-dark-popup-border: #303030;
  --ty-menu-group-title-color: rgba(255, 255, 255, 0.45);
  --ty-menu-item-radius: var(--ty-border-radius);
  --ty-menu-item-gap: 10px;
  --ty-menu-item-padding-inline: 12px;
  --ty-menu-item-padding-block: 8px;
  --ty-menu-item-min-height: 40px;
  --ty-menu-icon-size: 16px;
  --ty-menu-indicator-width: 3px;
  --ty-menu-indicator-radius: 999px;
  --ty-menu-indicator-color: var(--ty-color-primary);
  --ty-menu-item-bg-hover: color-mix(in srgb, var(--ty-color-primary) 10%, transparent);
  --ty-menu-item-bg-active: color-mix(in srgb, var(--ty-color-primary) 14%, transparent);
  --ty-menu-item-bg-selected: color-mix(in srgb, var(--ty-color-primary) 14%, transparent);
  --ty-menu-item-border-hover: color-mix(in srgb, var(--ty-color-primary) 28%, transparent);
  --ty-menu-item-border-selected: color-mix(in srgb, var(--ty-color-primary) 56%, transparent);
  --ty-menu-item-font-weight: 500;
  --ty-menu-sub-list-popup-min-width: 160px;
  --ty-menu-sub-arrow-margin-start: 20px;
  --ty-menu-group-title-padding: 8px 10px;
  --ty-menu-overlay-item-color: var(--ty-color-text);
  --ty-menu-overlay-item-hover-bg: var(--ty-color-bg-spotlight);
  --ty-menu-dark-overlay-item-color: rgba(255, 255, 255, 0.85);
  --ty-menu-dark-overlay-item-hover-bg: #2a2a2a;
  --ty-menu-group-title-font-size: 14px;
  --ty-menu-group-title-font-weight: 600;
  --ty-menu-group-title-letter-spacing: 0.01em;
  --ty-menu-group-title-first-margin-top: 4px;
  --ty-menu-group-list-item-padding: 12px 35px 12px 25px;
  --ty-menu-divider-margin: 5px 0;
  --ty-menu-popup-padding-block: var(--ty-dropdown-menu-padding);
  --ty-menu-popup-item-padding: var(--ty-dropdown-item-padding);
  --ty-menu-popup-item-gap: 0;
  --ty-menu-item-height-sm: 32px;
  --ty-menu-item-height-md: 40px;
  --ty-menu-item-height-lg: 48px;
  --ty-menu-item-padding-inline-sm: 10px;
  --ty-menu-item-padding-inline-md: 12px;
  --ty-menu-item-padding-inline-lg: 14px;
  --ty-menu-item-gap-sm: 8px;
  --ty-menu-item-gap-md: 10px;
  --ty-menu-item-gap-lg: 12px;
  --ty-menu-item-padding-block-compact: 6px;
  --ty-menu-item-padding-block-comfortable: 8px;
  --ty-menu-disabled-opacity: 0.55;
  --ty-menu-light-bg: #ffffff;
  --ty-menu-light-border: #f0f0f0;
  --ty-menu-light-color: #32325d;
  --ty-menu-light-popup-bg: #ffffff;
  --ty-menu-light-popup-border: transparent;
  --ty-menu-light-overlay-item-color: #32325d;
  --ty-menu-light-overlay-item-hover-bg: #f5f5ff;
}
}