:host[fill] {
	background: none;
}
:host {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
}
:host[rotate] {
	--rotate: rotate(var(--rotation, 0deg));
	transform: var(--rotate);
}
:host[flip=x] {
	--flip: scaleX(-1);
	transform: var(--flip);
}
:host[flip=y] {
	--flip: scaleY(-1);
	transform: var(--flip);
}
:host[rotate][flip] {
	transform:var(--rotate)var(--flip);
}
:host[hidden] {
	display: none;
}
:host[size=tiny] {
	--smoothly-icon-size: 1.2rem;
}
:host[size=small] {
	--smoothly-icon-size: 1.4rem;
}
:host[size=medium] {
	--smoothly-icon-size: 1.8rem;
}
:host[size=large] {
	--smoothly-icon-size: 2.8rem;
}
:host[size=xlarge] {
	--smoothly-icon-size: 4rem;
}
:host {
	width: var(--smoothly-icon-size, 1.8rem);
	height: var(--smoothly-icon-size, 1.8rem);
}
:host::slotted(svg) {
	/* this is needed for svg to work on safari */
	width: 100%;
}