const drawerTheme = {
    // Note: overlay styling is now handled by the shared Overlay component
    overlay: "",
    container: "fixed bg-white shadow-2xl shadow-black/30 " +
        "border border-[var(--color-border)] ring-4 ring-white/10 " +
        "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
        "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
    inner: "h-full flex flex-col",
    header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
    headerContent: "flex items-start gap-3 flex-1 min-w-0",
    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
    body: "flex-1 overflow-y-auto p-4",
    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
        "",
};
// Position variants with margin support
const drawerPositionVariantsWithMargin = {
    left: "left-0 top-0 h-full", // 100vh - 1.5rem top - 1.5rem bottom
    right: "right-0 top-0 h-full",
    top: "top-0 left-0 w-full",
    bottom: "bottom-0 left-0 w-full",
};
// Position variants for full-width/height drawers with consistent margins
const drawerPositionVariantsFullWidth = {
    left: "left-0 top-0 right-0 bottom-0", // Consistent margins on all sides
    right: "right-0 top-0 left-0 bottom-0",
    top: "top-0 left-0 right-0 bottom-0",
    bottom: "bottom-0 left-0 right-0 top-0",
};
// Size variants based on position
const drawerSizeVariants = {
    // Horizontal drawers (left/right)
    horizontal: {
        sm: "w-[min(320px,90vw)]", // 320px on large screens, max 90% on small
        md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
        lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
        full: "w-full", // Full width - positioning handles margins
    },
    // Vertical drawers (top/bottom)
    vertical: {
        sm: "h-[min(240px,90vh)]", // 240px on large screens, max 90% on small
        md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
        lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
        full: "h-full", // Full height - positioning handles margins
    },
};

export { drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin, drawerSizeVariants, drawerTheme };
