import { createStyles } from 'antd-style';

const useSearchMenuStyle = createStyles(({ token }) => {
	return {
		searchMenuContainer: {
			display: 'flex',
			alignItems: 'center',
			marginRight: token.marginLG,
		},
		searchInput: {
			width: '200px',
			borderRadius: token.borderRadiusLG,
			backgroundColor: token.colorBgLayout,
			border: 'none',
			transition: `width ${token.motionDurationSlow}, background-color ${token.motionDurationSlow}`,

			'&:hover, &:focus': {
				backgroundColor: token.colorBgElevated,
				width: '280px',
			},

			'.anticon': {
				color: token.colorTextPlaceholder,
			},
		},
		searchIcon: {
			color: token.colorTextPlaceholder,
		},
		dropdown: {
			padding: `${token.paddingXS}px ${token.paddingXXS}px`,
		},
		sectionHeader: {
			display: 'flex',
			alignItems: 'center',
			gap: token.paddingXS,
			padding: `${token.paddingXXS}px ${token.paddingXS}px`,
			fontSize: token.fontSizeSM,
			fontWeight: token.fontWeightMedium,
			color: token.colorTextSecondary,
			borderBottom: `1px solid ${token.colorBorderSecondary}`,
			marginBottom: token.marginXXS,
		},
		sectionIcon: {
			fontSize: token.fontSize,
		},
		searchItem: {
			display: 'flex',
			flexDirection: 'column',
			padding: `${token.paddingXXS}px ${token.paddingXS}px`,
			borderRadius: token.borderRadiusSM,
			cursor: 'pointer',
			transition: `background-color ${token.motionDurationFast}`,

			'&:hover': {
				backgroundColor: token.colorBgTextHover,
			},
		},
		menuRow: {
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'space-between',
			gap: token.paddingSM,
		},
		menuName: {
			fontSize: token.fontSize,
			color: token.colorText,
			fontWeight: token.fontWeightMedium,
			lineHeight: token.lineHeight,
			overflow: 'hidden',
			textOverflow: 'ellipsis',
			whiteSpace: 'nowrap',
			flex: 1,
		},
		menuPath: {
			fontSize: token.fontSizeSM,
			color: token.colorTextSecondary,
			marginTop: token.marginXXS,
			overflow: 'hidden',
			textOverflow: 'ellipsis',
			whiteSpace: 'nowrap',
			maxWidth: '260px',
		},
		frequency: {
			fontSize: token.fontSizeSM,
			color: token.colorTextTertiary,
			backgroundColor: token.colorBgLayout,
			padding: `2px ${token.paddingXXS}px`,
			borderRadius: token.borderRadiusSM,
			flexShrink: 0,
		},
		emptyTip: {
			padding: `${token.paddingSM}px ${token.paddingLG}px`,
			fontSize: token.fontSizeSM,
			color: token.colorTextTertiary,
			textAlign: 'center',
		},
	};
});

export default useSearchMenuStyle;
