const SEGMENT_BUTTON =
	'h-10.5 gap-1.5 px-3 text-sm ring-0 md:h-7.5 md:px-2.5 rounded-none whitespace-nowrap'
const SEGMENT_SELECTED =
	'bg-secondary-200 font-medium text-primary-900 hover:bg-secondary-200 dark:bg-secondary-300 dark:hover:bg-secondary-300'
const SEGMENT_IDLE = 'bg-default font-normal text-toned'

export function segmentClass(selected: boolean, block = false) {
	return [
		SEGMENT_BUTTON,
		selected ? SEGMENT_SELECTED : SEGMENT_IDLE,
		block ? 'flex-1 justify-center' : '',
	]
}

export const SEGMENT_GROUP = 'flex shrink-0 border border-accented'

export const SEGMENT_TAB_ACTIVE =
	'data-[state=active]:bg-secondary-200 data-[state=active]:font-medium data-[state=active]:text-primary-900 dark:data-[state=active]:bg-secondary-300'