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

@mixin component {
	@include icon.M;

	background-color: var(--components-button-backgroundColor);
	box-shadow: var(--components-button-boxShadow);
	border-radius: var(--components-button-borderRadius);
	padding: var(--components-button-padding);
	transition-property: background-color, color, border-color, box-shadow;
	transition-duration: var(--commons-animations-durations-fast);
	inline-size: var(--components-button-width);
	min-inline-size: var(--components-button-minWidth);
	font: var(--components-button-font);
	font-size: var(--components-button-font-size); // Deprecated
	line-height: var(--components-button-line-height); // Deprecated
	font-weight: var(--pr-t-font-fontWeight-semibold);
	gap: var(--components-button-gap);
	pointer-events: var(--components-button-pointerEvents);
	user-select: var(--components-button-userSelect);
	opacity: var(--components-button-opacity);
	cursor: var(--components-button-cursor);
	transition-timing-function: ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	vertical-align: middle;
	text-wrap: balance;
	text-align: center;
	border: 0;

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

	.lucca-icon {
		display: block;
	}

	// deprecated
	.button-icon {
		@include icon.M;
	}

	// .mod-outline is deprecated
	&:not(.mod-outlined, .mod-outline) {
		.numericBadge {
			@include numericBadge.inherit;
		}
	}

	&:hover {
		--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
		--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
	}

	&:focus-visible {
		// Radius needed to override focused link / a
		@include a11y.focusVisible($borderRadius: var(--components-button-borderRadius));
	}

	&:active {
		--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900));
	}

	&:disabled {
		--components-button-cursor: default;
		--components-button-color: var(--palettes-neutral-500); // disabled token candidate
		--components-button-backgroundColor: var(--commons-disabled-background);
		--components-button-pointerEvents: none;

		.numericBadge {
			@include numericBadge.disabled;
		}
	}
}