@charset "UTF-8";

#icon-set-list {
	padding-inline: 1rem;
	display: flex;
	justify-content: stretch;
	--gap: 1.5rem;
	gap: var(--gap);
	padding-block-end: 1rem;
}

#icon-set-list > li {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	position: relative;
}

#icon-set-list > li:not(:first-of-type)::before {
	content: "";
	position: absolute;
	inline-size: 1px;
	background-color: var(--gray-3);
	inset-block: 0;
	inset-inline-start: calc(var(--gap) / -2);
}

#icon-set-list > li > .name {
	background-image: linear-gradient(90deg, var(--text-gradient-from), var(--text-gradient-to));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	inline-size: fit-content;
	padding-block-end: .2em;
}

#icon-set-list > li > .loading-message {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-block-start: .5rem;
}

#icon-set-list > li > .loading-message::before {
	content: "";
	display: inline-block;
	inline-size: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	box-sizing: border-box;
	border: 3px solid var(--primary);
	border-inline-color: transparent;
	animation: spin 1s ease infinite;
}

@keyframes spin {
	from {
		transform: rotate(0turn);
	}
	to {
		transform: rotate(1turn);
	}
}

#icon-set-list ul.icons {
	margin-block-start: .5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	box-sizing: border-box;
	gap: .7rem;
}

#icon-set-list ul.icons > li  {
	display: block;
}

#icon-set-list ul.icons > li > label {
	min-block-size: 100%;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
}

#icon-set-list ul.icons > li > label > div {
	flex-grow: 1;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	align-items: center;
	box-shadow: inset 0 0 0 1px var(--gray-3);
	padding-inline: .4rem;
	padding-block: .5rem .2rem;
	transition: box-shadow .15s, background-color .15s;
}

#icon-set-list ul.icons > li > label > input[type=checkbox]:checked + div {
	box-shadow: inset 0 0 0 2px var(--primary);
	background-color: var(--primary-transparent);
}

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

#icon-set-list ul.icons > li > label > div > .icon {
	block-size: 2rem;
	--icon-size: 2rem;
	box-sizing: border-box;
}

#icon-set-list ul.icons > li > label > div > .icon-name {
	font-size: .8rem;
	text-align: center;
}