@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: var(--components-numericBadge-size);
	min-inline-size: var(--components-numericBadge-size);
	padding: var(--pr-t-spacings-50);
	font: var(--components-numericBadge-font);
	font-size: var(--components-numericBadge-fontSize); // Deprecated
	line-height: var(--components-numericBadge-lineHeight); // Deprecated
	font-weight: var(--pr-t-font-fontWeight-semibold);
	background-color: var(--components-numericBadge-background);
	color: var(--components-numericBadge-color);
	border-radius: var(--components-numericBadge-borderRadius);
	transition-timing-function: ease;
	white-space: nowrap;
	position: relative;
	transition-duration: var(--commons-animations-durations-fast);
	transition-property: color;

	&:empty {
		&::before {
			content: ' ' / '';
		}
	}

	@at-root ($atRoot) {
		.numericBadge-value {
			outline: none;
		}
	}
}