@keyframes ska-plugin-icon-loading {
	to {
		transform: rotate(360deg);
	}
}


.ska-blocks__plugin-icon {

	:has(>&) {
		position: relative;
	}

	&--loading {

		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: 10;
			background-color: color-mix(in oklab, white 95%, transparent);
			pointer-events: none;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			width: 1rem;
			aspect-ratio: 1;
			z-index: 20;
			animation: ska-plugin-icon-loading 1s linear infinite;
			border-style: solid;
			border-width: 2px;
			border-top-color: var(--ska-primary);
			border-right-color: #ddd;
			border-bottom-color: #ddd;
			border-left-color: #ddd;
			border-radius: 999rem;
			pointer-events: none;
		}
	}

	.ska-refresh-check-icon {
		--size: 14px;
		position: absolute;
		top: -6px;
		right: -4px;
		width: var(--size);
		height: var(--size);
		color: var(--ska-primary);
		background: oklch(1 0 0 / 0.9);
		border-radius: 999rem;
	}
}