@charset "UTF-8";

.selected-icons {
	padding-inline: 1rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	align-items: start;
}

#selected-icons {
	display: flex;
	align-items: center;
	gap: .6rem;
	box-sizing: border-box;
	flex-wrap: wrap;
	background-color: var(--gray-1);
	border-radius: .8rem;
	padding: .3rem;
	inline-size: 100%;
	min-block-size: 2.8rem;
	border: 1px solid var(--gray-2);
}

#selected-icons:not(:has(> :not(template)))::before {
	content: "No icons selected";
	margin-inline-start: .5rem;
	opacity: .7;
}

#selected-icons > li {
	display: block;
}

#selected-icons > li > button {
	display: flex;
	gap: .4rem;
	align-items: center;
	padding-block: .3rem;
	padding-inline: .6rem;
	border: 2px solid var(--primary);
	border-radius: .6rem;
	background-color: var(--primary-transparent);
}

.selected-icons button#copy-css {
	background-color: var(--secondary);
	padding-block: .4em;
	padding-inline: .6rem;
	border-radius: .5rem;
	color: white;
	--transform-duration: .15s;
	transition: opacity .15s, transform var(--transform-duration);
}

.selected-icons button#copy-css:hover {
	opacity: .9;
}

.selected-icons button#copy-css:active {
	transform: translateY(.2rem);
	--transform-duration: 0s;
}