export const styles = {
	option: (provided: any, props: { isSelected: boolean; isFocused: boolean }) => ({
		...provided,
		cursor: "pointer",
		padding: "8px 24px",
		fontFamily: "var(--font-text-family)",
		fontStyle: "normal",
		fontWeight: "400",
		fontSize: "18px",
		lineHeight: "21.78px",
		color: "#939393",
		backgroundColor: props.isSelected ? "var(--color-primary-3)" : props.isFocused ? "var(--color-primary-3)" : undefined,

		":active": {
			...provided[":active"],
			backgroundColor: props.isSelected ? "var(--color-primary-3)" : undefined,
		},
	}),
	control: () => ({
		width: "100%",
		display: "flex",
		background: "transparent",
	}),
	valueContainer: (provided: any) => ({
		...provided,
		padding: 0,
		minWidth: "100px",
		fontFamily: "var(--font-text-family)",
		fontStyle: "normal",
		fontWeight: "600",
		fontSize: "16px",
		lineHeight: "22px",
		color: "#939393",
		letter: "0.5 px",
	}),
	multiValue: (provided: any) => ({
		...provided,
		margin: "4px",
		padding: "8px 16px",
		fontStyle: "normal",
		fontWeight: "400",
		fontSize: "16px",
		lineHeight: "22px",
		background: "transparent",
		border: "1px solid black",
		borderRadius: "100px",
	}),
	multiValueLabel: (provided: any) => ({
		...provided,
		fontSize: "16px",
		color: "#939393",
		fontWeight: "400",
	}),
	input: (provided: any) => ({
		...provided,
		margin: 0,
		padding: 0,
	}),
	placeholder: (provided: any) => ({
		...provided,
		fontSize: "16px",
		lineHeight: "22px",
		fontWeight: "400",
		color: "#939393",
	}),
	indicatorSeparator: () => ({
		display: "none",
	}),
	menu: (provided: any) => ({
		...provided,
		position: "static",
		border: "0",
		boxShadow: "none",
	}),
	menuList: (provided: any) => ({
		...provided,
	}),
	multiValueRemove: (provided: any) => ({
		...provided,
		backgroundColor: "transparent",
		color: "black",
		"&:hover": {
			color: "grey",
			backgroundColor: "transparent",
		},
		">svg": {
			width: "20px",
			height: "20px",
		},
	}),
	indicatorsContainer: (provided: any) => ({
		...provided,
		display: "none",
	}),
	listBox: (provided: any) => ({
		...provided,
		color: "red",
		fontSize: "16px",
	}),
};