.favouriteButton
{
	background: none;
	color: inherit;
	position: relative;
	padding: 4px 1em;

	display: inline-grid;
	grid-template-columns: 20px auto;
	align-items: center;
	gap: 4px;

	background: #eee;
	vertical-align: bottom;

	margin-top: 10px;
	outline: 1px solid #FFF;
}

.favouriteButton svg
{
	pointer-events: none;
	position: relative;
	z-index: 1;

	width: 20px;
	height: 20px;
}

.favouriteButton path
{
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
}

.favouriteButton.dismiss path
{
	fill: var(--wp--preset--color--blue);
	stroke: var(--wp--preset--color--blue);
}

@keyframes aaoSpin
{
	from {
		transform: rotate(0)
	}
	to {
		transform: rotate(360deg)
	}
}

.favouriteButton.spinner::before
{
	position: absolute;
	top: .4em;
	left: 1em;
	width: 20px;
	height: 20px;
	content: "";
	border-radius: 50%;
	background: conic-gradient(transparent 0, currentColor 0, currentColor 10%, transparent 10%);
	animation: aaoSpin 2s linear infinite;
	clip-path: path(evenodd,"M10 0c5.519 0 10 4.481 10 10s-4.481 10-10 10S0 15.519 0 10 4.481 0 10 0Zm0 1.01c-4.962 0-8.99 4.028-8.99 8.99 0 4.962 4.028 8.99 8.99 8.99 4.962 0 8.99-4.028 8.99-8.99 0-4.962-4.028-8.99-8.99-8.99Z")
}

@media(hover)
{
	.favouriteButton:hover
	{
		color: var(--wp--preset--color--mblue);
		background: #e5e5e5;
	}
}