:host {
	display: block;
	width: clamp(200px, 100%, 1200px);
	margin: auto;
}
:host([hidden]) {
	display: none;
}
:host > div {
	display: flex;
	flex-flow: row wrap;
}

:host > div > smoothly-icon {
	padding: 1rem;
	position: relative;
}

:host > div > smoothly-icon:hover {
	scale: 1.5;
}

:host > div > smoothly-icon:hover::after {
	content: attr(data-name);
	position: absolute;
	white-space: nowrap;
	bottom: 100%;
	background: rgb(var(--smoothly-default-contrast));
	color: rgb(var(--smoothly-default-color));
	padding: 0.25rem 1rem;
	z-index: 1;
	pointer-events: none;
}