*,
*::before,
*::after {
	box-sizing: border-box;
}

:host {
	--height: 0.5rem;
	--inner-width: 40%;
	--starting-position: calc(0% - (var(--inner-width) * 2));
	--ending-position: calc(100% + (var(--inner-width) * 2));
}

.loading {
	display: block;
	height: var(--height);
	border-radius: calc(var(--height) / 2);
	overflow: hidden;
	padding-top: var(--height);
	background-repeat: no-repeat;
	background-color: var(--g-color-primary-500);
	background-image: linear-gradient(
		to right,
		transparent 0%,
		var(--g-color-background-shimmer) 10%,
		var(--g-color-background-shimmer) 90%,
		transparent 100%
	);
	background-size: var(--inner-width) 100%;
	background-position-x: var(--starting-position);
	animation: loading 2s linear infinite;
	/* This is probably a bad way of hiding the text */
	font-size: 0;
}

@keyframes loading {
	0% {
		background-position-x: var(--starting-position);
	}
	100% {
		background-position-x: var(--ending-position);
	}
}