@charset "UTF-8";

.choose-icon-sets {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding-inline: 1rem;
	padding-block: 1rem;
}

#icon-set-chooser {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

#icon-set-chooser label {
	border-radius: .8rem;
}

#icon-set-chooser label > input[type=checkbox]:focus-visible + div {
	outline: 1px solid CanvasText;
	outline-offset: 3px;
}

#icon-set-chooser label > input[type=checkbox]:checked + div {
	color: white;
	--gradient-from: blueViolet;
	--gradient-to: royalBlue;
}

#icon-set-chooser label > div {
	border-radius: inherit;
	position: relative;
	background-color: var(--gray-2);
	--gradient-from: transparent;
	--gradient-to: transparent;
	background-image: linear-gradient(-45deg, var(--gradient-from), var(--gradient-to));
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem;
	transition: --gradient-from .15s, --gradient-to .15s;
}

#icon-set-chooser label > div .checked-sign {
	font-size: 1.2rem;
	margin-inline-start: .2rem;
}

#icon-set-chooser label > div .checked-sign::before {
	--icon: var(--icon-x-lg);
}

#icon-set-chooser label > input[type=checkbox]:checked + div .checked-sign::before {
	--icon: var(--icon-check-lg);
}

#icon-set-chooser label > div .name {
	display: inline-block;
	padding-inline: .3rem .2rem;
}

#icon-set-chooser label > div a {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 1.8rem;
	aspect-ratio: 1;
	font-size: 1.2rem;
	flex-grow: 1;
	color: currentColor;
	border-radius: .4rem;
}

#icon-set-chooser label > div a:hover {
	background-color: #fff2;
}