.si-switch {
	&:before {
		position: absolute;
		z-index: 1;
		visibility: hidden;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		opacity: 0;
		border: 3px solid hsl(var(--si-color));
		border-top: 3px solid transparent;
		border-right: 3px solid transparent;
		border-radius: 50%;
		content: '';
		animation: rotateSwitch 0.6s ease infinite 0.25s;
		pointer-events: none;
	}
	&:after {
		position: absolute;
		z-index: 1;
		visibility: hidden;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		opacity: 0;
		border: 3px dashed hsl(var(--si-color));
		border-top: 3px solid transparent;
		border-right: 3px solid transparent;
		border-radius: 50%;
		content: '';
		animation: rotateSwitch 0.6s linear infinite 0.25s;
		pointer-events: none;
	}

	&.loading {
		width: 28px;
		min-width: 28px;
		border-radius: 20px;
		pointer-events: none;
		.si-switch__circle {
			border-radius: 50%;
		}
		.si-switch__background {
			opacity: 0;
		}

		&:before {
			visibility: visible;
			opacity: 1;
			transition: all 0.25s ease 0.3s;
		}
		&:after {
			visibility: visible;
			opacity: 1;
			transition: all 0.25s ease 0.3s;
		}
	}
}

@keyframes rotateSwitch {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}