goo{

	--size: 20px;
	--bg: var(--wp--preset--color--mid);
	display: block;
	height: calc(var(--size) + var(--h,0px));
	width: calc(var(--size) + var(--w,0px));
	position: fixed;
	background-color: var(--bg);
	z-index: 999;
	translate: -50% -50%;
	border-radius: calc(var(--size) / 2);
	pointer-events: none;
	text-align: center;
	/* mix-blend-mode: darken; */
	transition: background-color ease 0.3s, opacity ease 0.3s;
	/* white-space: nowrap; */
	font-size: calc(var(--size) * .8);
	place-content: center;

	&[title=""]{
		z-index: -1;
	}

	&::after{
		content: attr(title);
		margin: calc(var(--size) * .8) 0 0 calc(var(--size) * .8);
		border-radius: .25ch;
		width: 20ch;
		display: block;
		text-align: left;
	}
	svg{
		display: block;
		position: absolute;
		transform-origin: center top;
		&.horizontal{
			transform-origin: left center;
		}
		path{
			fill: var(--bg);
			transition: fill ease 0.3s;
		}
	}


	&.hide {
		opacity: 0;
	}
	&.show {
		opacity: 1;
	}
}