@mixin dark {
	--components-skeleton-gradient-step-one: var(--palettes-neutral-200);
	--components-skeleton-gradient-step-two: var(--palettes-neutral-500);
}

@mixin square {
	border-radius: var(--pr-t-border-radius-small);
	block-size: var(--components-skeleton-shape-height);
	inline-size: var(--components-skeleton-shape-width);
}

@mixin circle {
	border-radius: var(--pr-t-border-radius-full);
	block-size: var(--components-skeleton-shape-height);
	inline-size: var(--components-skeleton-shape-width);
}

@mixin XS {
	--components-skeleton-shape-height: 0.5rem;
	--components-skeleton-shape-width: 0.5rem;
}

@mixin S {
	--components-skeleton-shape-height: 1rem;
	--components-skeleton-shape-width: 1rem;
}

@mixin L {
	--components-skeleton-shape-height: 2rem;
	--components-skeleton-shape-width: 2rem;
}

@mixin XL {
	--components-skeleton-shape-height: 3rem;
	--components-skeleton-shape-width: 3rem;
}

@mixin XXL {
	--components-skeleton-shape-height: 4rem;
	--components-skeleton-shape-width: 4rem;
}

@mixin alignRight {
	&:not(.mod-square, .mod-circle) {
		clip-path:
			inset(
				calc(var(--components-skeleton-text-offset) + 1px)
				0
				calc(var(--components-skeleton-text-offset) - 1px)
				calc(100% - var(--components-skeleton-text-width, 100%))
				var(--components-skeleton-text-clipPathRound)
			);
	}
}

@mixin alignCenter {
	&:not(.mod-square, .mod-circle) {
		clip-path:
			inset(
				calc(var(--components-skeleton-text-offset) + 1px)
				calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
				calc(var(--components-skeleton-text-offset) - 1px)
				calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
				var(--components-skeleton-text-clipPathRound)
			);
	}
}