import { menuItemTheme } from '../MenuItem/MenuItem.theme.js';

const dropdownTheme = {
    // Menu container - similar to Popover but with menu-specific styling
    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-white shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
        "dark:bg-[var(--color-background-secondary)]",
    // Delegate item styles to shared MenuItem theme
    itemBaseStyle: menuItemTheme.baseStyle,
    itemDangerStyle: menuItemTheme.dangerStyle,
    itemFocusStyle: menuItemTheme.focusStyle,
    // Section title styling
    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
    // Section container styling
    sectionStyle: "py-1",
    // Separator between sections
    separatorStyle: "my-1 h-px bg-[var(--color-border)] " +
        "dark:bg-[var(--color-neutral-700)]",
};

export { dropdownTheme };
