%vpf-icons-selector-item {
	position: relative;
	height: auto;
	padding: 15px;
	margin: 0;
	color: #000;
	border-radius: 2px;
	background-color: transparent;
	outline: 1px solid transparent;
	transition: 0.15s color ease-in-out, 0.15s background-color ease-in-out, 0.15s border ease-in-out, 0.15s box-shadow ease-in-out, 0.15s outline ease-in-out;

	&:hover,
	&:focus {
		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		background-color: color-mix(
			in srgb,
			var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 5%,
			transparent
		);
	}

	// Remove default Gutenberg box shadow.
	&:focus:not(:focus-visible) {
		box-shadow: none;
	}
}
%vpf-icons-selector-item-active {
	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	background-color: color-mix(
		in srgb,
		var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 5%,
		transparent
	);
	outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) !important;
}
