/**
 * Calendar component theme following flat structure pattern
 * Uses design tokens and data-[state=*] selectors
 */
const calendarTheme = {
    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
    headerStyle: "flex items-center justify-between mb-4",
    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] " + "",
    headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
    navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
        "transition-colors disabled:opacity-50 disabled:cursor-not-allowed " +
        // Dark mode
        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
    weekdaysStyle: "grid grid-cols-7 mb-2",
    weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
        "dark:text-[var(--color-neutral-500)]",
    daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
    rangeCellStyle: "bg-[var(--color-primary-50)]/70 " +
        "data-[range-pos=start]:rounded-l-full " +
        "data-[range-pos=end]:rounded-r-full " +
        "data-[range-pos=single]:rounded-full " +
        "dark:bg-[var(--color-primary-900)]/50",
    dayButtonStyle: "relative z-10 flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
        "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
        // Base text color
        "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)] " +
        // Hover state
        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
        // Selected state
        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
        // Today indicator
        "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
        // Disabled state
        "data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 " +
        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
        "dark:data-[disabled=true]:text-[var(--color-neutral-600)] " +
        // Other month state
        "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
        "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
        // Range mode states (strip background handled by wrapper cell)
        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
        "data-[in-range=true]:text-[var(--color-text-primary)] " +
        "dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
        // Focus offset for dark mode
        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
    dayButtonSizes: {
        sm: "size-8 text-base",
        md: "size-10 text-base",
        lg: "size-12 text-lg",
    },
};

export { calendarTheme };
