@import "../../themes/liberty.globals";

:host {
	display: inline-flex;

	color: var(--color);

	user-select: none;

	svg {
		width: 100%;
		height: 100%;

		transform: translateZ(0);
	}

	circle {
		animation: dash-rotate 1.4s ease-in-out infinite;
		fill: transparent;
		stroke-dasharray: 80px, 200px;
		stroke-dashoffset: 0px;
		stroke-width: 3.6px;
		stroke: currentColor;
	}

	svg {
		animation: spinner-rotate 1.4s linear infinite;

		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	}
}

:host(.lu-color) {
	color: current-color(base);
}

:host([data-paused]) svg,
:host([data-paused]) circle {
	animation-play-state: paused;
}

:host([data-hidden]) {
  /* stylelint-disable-next-line declaration-no-important */
	position: absolute !important;

	width: 1px;
	height: 1px;

  /* stylelint-disable-next-line declaration-no-important */
	overflow: hidden !important;
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px); // Future browser support.
	clip: rect(1px, 1px, 1px, 1px);
}

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

	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash-rotate {
	0% {
		stroke-dasharray: 1px, 200px;
		stroke-dashoffset: 0px;
	}
	50% {
		stroke-dasharray: 100px, 200px;
		stroke-dashoffset: -15px;
	}
	100% {
		stroke-dasharray: 100px, 200px;
		stroke-dashoffset: -125px;
	}
}