@use 'sass:map';
@use 'sass:math';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;

@include b(spinner) {
	@include set-component-css-var('spinner-size', $spinner-size);
	@include set-component-css-var('spinner-border', $spinner-border);

	@include css-var-from-global(('spinner', 'color'), ('color', 'default'));
}

@include b(spinner) {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	height: getCssVar('spinner', 'size');
	width: getCssVar('spinner', 'size');

	&::before,
	&::after {
		border-color: transparent;
		border-radius: 50%;
		border-style: solid;
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		border-width: getCssVar('spinner', 'border');
		height: 100%;
		width: 100%;
		margin: -50% 0 0 -50%;
		box-sizing: border-box;
	}

	&::after {
		animation: #{$namespace}-animation 0.6s linear;
		animation-iteration-count: infinite;
		border-color: getCssVar('spinner', 'color') transparent transparent;
	}

	@include when(has-bg) {
		&::before {
			border-color: getCssVar('border-color', 'dark');
		}
	}

	@each $variant in (primary, default, info, success, warning, danger) {
		@include m(variant-#{$variant}) {
			@include css-var-from-global(('spinner', 'color'), ('color', $variant));
		}
	}

	@each $size in (large, small) {
		@include m(size-#{$size}) {
			@include set-css-var-value(('spinner', 'size'), map.get($spinner-size, $size));

			height: getCssVar('spinner', 'size', $size);
			width: getCssVar('spinner', 'size', $size);

			&::before,
			&::after {
				border-width: getCssVar('spinner', $size);
			}
		}
	}
}

@keyframes #{$namespace}-animation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}