<div class={'flex min-w-max items-center justify-center gap-4 rounded-full'}>
	<div class="flex items-center gap-x-1 text-sm">
		<div
			class={[
				'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
				'hover:text-accent-600 dark:hover:text-accent-400 outline-accent-300',
				'dark:outline-accent-500/30 text-accent-600 dark:text-accent-400',
				'dark:bg-accent-700/10 bg-accent-500/10 outline'
			]}
		>
			Apple
		</div>

		<div
			class={[
				'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
				'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
				'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
				'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
			]}
		>
			Orange
		</div>

		<div
			class={[
				'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
				'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
				'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
				'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
			]}
		>
			Banana
		</div>
	</div>
</div>
