/**
 * ColorPicker theme configuration
 * Following Dropdown/Select popup styling patterns
 */
const colorPickerTheme = {
    baseStyle: 'relative inline-block w-full',
    triggerStyle: 'cursor-pointer',
    swatchStyle: 'relative size-5 flex-shrink-0 rounded border border-[var(--color-border)] overflow-hidden',
    // Content matches Dropdown menu style
    contentStyle: 'min-w-[min(280px,calc(100vw-2rem))] max-w-[320px] rounded-xl border border-[var(--color-border)] bg-white shadow-real-xl p-3 focus:outline-none',
    sliderContainerStyle: 'space-y-2',
    sliderLabelStyle: 'flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]',
    inputContainerStyle: 'flex items-center gap-2',
    formatSelectorStyle: 'flex-shrink-0',
    presetGridStyle: 'mt-3 grid grid-cols-6 sm:grid-cols-8 gap-1.5',
    presetSwatchStyle: 'relative size-7 cursor-pointer rounded border-2 border-transparent transition-all hover:border-[var(--color-primary)] hover:scale-110 focus:border-[var(--color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-opacity-20 data-[selected]:border-[var(--color-primary)] data-[selected]:ring-2 data-[selected]:ring-[var(--color-primary)] data-[selected]:ring-opacity-20',
    eyedropperButtonStyle: 'flex-shrink-0',
};

export { colorPickerTheme };
