@use '@talend/design-tokens/lib/tokens' as tokens;

.skeletonHeading {
	max-width: tokens.$coral-sizing-maximal;

	// Font-size mimics
	&.size-L {
		height: 1.125rem;
	}

	&.size-M {
		height: 1rem;
	}

	&.size-S {
		height: 0.875rem;
	}

	&.width-XS {
		max-width: 10%;
	}

	&.width-S {
		max-width: 20%;
	}

	&.width-M {
		max-width: 40%;
	}

	&.width-L {
		max-width: 60%;
	}

	&.width-XL {
		max-width: 80%;
	}

	&.width-100 {
		max-width: 100%;
	}
}