@charset "UTF-8";
@import "../../theme/variables";
@import "~@jereation/sass-helpers/_mixins";

.vui-spinner {
	width: map-get($spinner, width);
	height: map-get($spinner, height);
	display: inline-block;
	vertical-align: middle;
	stroke: map-get($spinner, stroke);
	fill: map-get($spinner, fill);
	svg {
		width: 100%;
		height: 100%;
	}
	&.vui-spinner-primary {
		stroke: map-get($spinner, primary-stroke);
		fill: map-get($spinner, primary-fill);
	}
	&.vui-spinner-secondary {
		stroke: map-get($spinner, secondary-stroke);
		fill: map-get($spinner, secondary-fill);
	}
	&.vui-spinner-danger {
		stroke: map-get($spinner, danger-stroke);
		fill: map-get($spinner, danger-stroke);
	}
	&.vui-spinner-light {
		stroke: map-get($spinner, light-stroke);
		fill: map-get($spinner, light-fill);
	}
	&.vui-spinner-dark {
		stroke: map-get($spinner, dark-stroke);
		fill: map-get($spinner, dark-stroke);
	}
}

.vui-spinner-android {
	stroke: map-get($spinner, dark-stroke);
}

.vui-spinner-ios,
.vui-spinner-ios-small {
	stroke: #69717d;
}

.vui-spinner-spiral {
	.stop1 {
		stop-color: map-get($spinner, light-fill);
		stop-opacity: 0;
	}
	&.vui-spinner-primary .stop2 {
		stop-color: map-get($spinner, stroke);
	}
	&.vui-spinner-secondary .stop2 {
		stop-color: map-get($spinner, stroke);
	}
	&.vui-spinner-danger .stop2 {
		stop-color: map-get($spinner, stroke);
	}
	&.vui-spinner-light {
		.stop1 {
			stop-color: map-get($spinner, stroke);
		}
		.stop2 {
			stop-color: map-get($spinner, light-fill);
		}
	}
	&.vui-spinner-dark .stop2 {
		stop-color: map-get($spinner, stroke);
	}
}