:root {
	--wpsi-accent-color: orange;
}

.wpsi-icons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 3rem;
	padding: 3rem;
}
.wpsi-icons .icon {
	text-align: center;
	border: solid 3px #aaa;
	border-radius: 12px;
	padding: 2rem;
	color: #888;
	transition: all 0.2s ease-in-out;
	background: rgba(255,255,255,0.8);
}
.wpsi-icons .wpsi {
	font-size: 3rem;
	display: block;
}
.wpsi-icons .name {
	margin: 1rem 0;
	font-size: 1.2rem;
	display: block;
}
.wpsi-icons input {
	display: block;
	width: 100%;
	border: solid 1px #ddd !important;
	box-shadow: none !important;
	border-radius: 0;
	outline: 0 !important;
}
.wpsi-icons input:focus {
	border: solid 1px var(--wpsi-accent-color) !important;
}
.wpsi-icons .icon:has(input:not(:placeholder-shown)) {
	border-color: var(--wpsi-accent-color);
}
.wpsi-icons .icon:has(input:not(:placeholder-shown)) .wpsi {
	color: var(--wpsi-accent-color);
}