$crc: '.h-spinner';

#{$crc}{
	border-width: var(--border-thickness);
	border-style: solid;
	border-color: var(--border-color);
	border-right-color: transparent;
	border-bottom-color: transparent;
	box-sizing: border-box;
	border-radius: 50%;
	animation: h-spinner-rotate 1500ms cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;


	&.-color-primary {
		--border-color: #{$c-primary};
	}

	&.-color-negative {
		--border-color: #{$c-negative};
	}

	&.-color-success {
		--border-color: #{$c-success};
	}

	&.-color-warning {
		--border-color: #{$c-warning};
	}

	&.-color-danger {
		--border-color: #{$c-danger};
	}

	&.-color-current {
		--border-color: currentColor;
	}
}

@keyframes h-spinner-rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}