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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	align-items: flex-start;
	background-color: var(--palettes-100, var(--palettes-product-100));
	border-radius: var(--pr-t-border-radius-full);
	display: inline-flex;
	font-size: var(--components-statusBadge-fontSize);
	font-weight: var(--pr-t-font-fontWeight-regular);
	font-family: var(--pr-t-font-family);
	line-height: var(--components-statusBadge-lineHeight);
	gap: var(--pr-t-spacings-50);
	padding-block: calc(var(--pr-t-spacings-50) / 2);
	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
	white-space: nowrap;
	max-inline-size: 100%;
	color: var(--pr-t-color-text);

	&::before {
		background-color: var(--palettes-700, var(--palettes-product-700));
		border-radius: var(--pr-t-border-radius-full);
		content: ' ' / ''; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
		display: block;
		block-size: var(--components-statusBadge-dot-size);
		flex-shrink: 0;
		inline-size: var(--components-statusBadge-dot-size);
		inset-block-start: var(--components-statusBadge-dot-top);
		position: relative;
	}

	@at-root ($atRoot) {
		.statusBadge-content {
			overflow: hidden;
			text-overflow: ellipsis;
			outline: none;
		}
	}
}