@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-tag-background);
	border-radius: var(--pr-t-border-radius-small);
	padding-block: 0;
	padding-inline: var(--pr-t-spacings-50);

	/* autoprefixer: off */
	text-decoration: var(--components-tag-decoration);
	box-shadow: 0 0 0 1px var(--components-tag-shadow);
	gap: var(--components-tag-gap);
	cursor: var(--components-tag-cursor);
	display: inline-flex;
	align-items: center;
	text-align: center;
	vertical-align: baseline;
	white-space: nowrap;
	border: 0;
	font: var(--components-tag-font);
	font-size: var(--components-tag-fontSize); // Deprecated
	line-height: var(--components-tag-lineHeight); // Deprecated
	max-inline-size: 100%;
	position: var(--components-tag-position);

	&,
	&:is(a, button) {
		color: var(--components-tag-color);
	}

	.lucca-icon {
		@include icon.XS;
	}

	@at-root ($atRoot) {
		.tag-content {
			outline: none;

			/* autoprefixer: off */
			text-decoration: var(--components-tag-decoration);
		}
	}
}