:host {
	display: block;
}
:host > button {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding-inline: 0;
	cursor: pointer;
	border: none;
	border-radius: 3em;
	background-color: rgb(var(--smoothly-color));
}
:host > button:hover {
	background-color: rgb(var(--smoothly-color-tint));
}
:host > button > smoothly-icon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	fill: rgb(var(--smoothly-color-contrast));
	stroke: rgb(var(--smoothly-color-contrast));
	transition: 100ms ease-in-out;
}
:host([selected][checkmark]) > button > smoothly-icon{
	fill: rgb(var(--smoothly-success-contrast));
	stroke: rgb(var(--smoothly-success-contrast));
}
:host([selected][checkmark]) > button {
	background-color: rgb(var(--smoothly-success-color));
}
:host([selected][checkmark]) > button:hover{
	background-color: rgb(var(--smoothly-success-tint));
}
:host([selected]) > button > smoothly-icon {
	transform: translateX(100%);
}
:host([size=tiny]) {
	--height: 1.25rem;
}
:host([size=small]) {
	--height: 1.5rem;
}
:host([size=default]) {
	--height: 2rem;
}
:host([size=large]) {
	--height: 2.5rem;
}
:host {
	height: var(--height);
	width: calc(var(--height) * 2);
}
:host > button > smoothly-icon {
	--smoothly-icon-size: var(--height);
}