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

.skeleton {
	display: inline-block;
	height: tokens.$coral-sizing-m;
	width: tokens.$coral-sizing-m;
	background: tokens.$coral-color-neutral-background-strong;
	animation: tokens.$coral-animation-heartbeat;
	border-radius: tokens.$coral-radius-s;
	cursor: wait;

	&.isBlock {
		display: block;
		width: 100%;
	}
}

.size-XL {
	height: tokens.$coral-sizing-m;
}

.size-L {
	height: tokens.$coral-sizing-s;
}

.size-M {
	height: tokens.$coral-sizing-xxxs;
}

.size-S {
	height: tokens.$coral-sizing-minimal;
}

.size-XS {
	height: tokens.$coral-spacing-xs;
}