const carouselTheme = {
    root: 'relative w-full flex flex-col',
    viewport: 'overflow-hidden',
    container: 'flex',
    item: 'min-w-0 shrink-0 grow-0 basis-full',
    controls: 'flex items-center justify-center gap-2',
    button: `
    inline-flex items-center justify-center -mt-5 z-10 cursor-pointer
    size-10 rounded-full
    bg-white/50 backdrop-blur-md border-t border-[var(--color-border)]
    text-[var(--color-text-primary)]
    transition-all duration-200
    hover:bg-white/80 hover:shadow-lg
    focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:border-[var(--color-border)]
  `,
    buttonIcon: 'size-5',
};

export { carouselTheme };
