%vpf-icons-selector-item {
	position: relative;
	height: auto;
	padding: 15px;
	margin: 0;
	color: #000;
	border-radius: 2px;
	transition: 0.1s color ease-in-out;

	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		content: "";
		background: var(--wp-admin-theme-color);
		border-radius: 2px;
		opacity: 0;
		transition: 0.1s opacity ease-in-out;
	}

	&:hover,
	&:focus {
		color: var(--wp-admin-theme-color);

		&::after {
			opacity: 0.04;
		}
	}

	// Remove default Gutenberg box shadow.
	&:focus:not(:focus-visible) {
		box-shadow: none;
	}
}
%vpf-icons-selector-item-active {
	color: var(--wp-admin-theme-color);
	outline: 1px solid var(--wp-admin-theme-color);

	&::after {
		opacity: 0.04;
	}
}