.si-checkbox {
	&.loading {
		pointer-events: none;
		.si-checkbox__effect {
			background: transparent;
			&:before {
				opacity: 1;
				border: 2px solid hsl(var(--si-gray-4));
				border-top: 2px solid transparent;
				border-radius: 50%;
				animation: rotateCheckboxLoading 0.6s linear infinite;
			}
		}
		&.checked {
			.si-checkbox__effect {
				background: transparent;
				&:before {
					border: 2px solid hsl(var(--si-color));
					border-top: 2px solid transparent;
				}
				&:after {
					opacity: 0;
					transform: scale(0.5);
				}
			}
		}
	}
}
@keyframes rotateCheckboxLoading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}