@use '@lucca-front/icons/src/icon/exports' as icons;
@use '@lucca-front/scss/src/commons/config';
@use '@lucca-front/scss/src/commons/core';
@use '@lucca-front/scss/src/commons/utils/keyframe';
@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/loading';
@use '@lucca-front/scss/src/commons/utils/a11y';

@use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;

@mixin disabled {
	--components-button-cursor: default;
	--components-button-color: var(--pr-t-color-text-disabled);
	--components-button-backgroundColor: var(--commons-disabled-background);
	--components-button-pointerEvents: none;

	.numericBadge {
		@include numericBadge.disabled;
	}
}

@mixin loading {
	--components-button-pointerEvents: none;
	--components-button-color: transparent;
	--components-button-userSelect: none;
	--components-button-boxShadow: none;
	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
	--commons-loading-frontground: var(--palettes-50, var(--palettes-product-50));

	@include loading.spinner(var(--pr-t-font-body-M-lineHeight));

	.numericBadge {
		@include numericBadge.state;
	}
}

@mixin loadingS {
	@include loading.spinner(var(--pr-t-font-body-S-lineHeight));
}

@mixin loadingXS {
	@include loading.spinner(var(--pr-t-font-body-XS-lineHeight));

	// stylelint-disable block-no-redundant-nested-style-rules -- Prevent issues with mixed declarations.
	// SEE: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
	& {
		--commons-loading-borderWidth: 2px;
	}
	// stylelint-enable
}

@mixin loadingOutlined {
	--components-button-backgroundColor: var(--palettes-neutral-0);
	--commons-loading-frontground: var(--palettes-neutral-300);
	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);
}

@mixin loadingGhost {
	--components-button-backgroundColor: var(--palettes-neutral-50);
	--commons-loading-frontground: var(--palettes-neutral-400);
}

@mixin success {
	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
	--components-button-color: transparent;
	--components-button-pointerEvents: none;
	--components-button-userSelect: none;

	&::after {
		@include icon.generate('sign_confirm');

		color: var(--palettes-neutral-0);
		font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
		block-size: var(--pr-t-font-body-M-lineHeight);
		inset: 0;
		margin: auto;
		position: absolute;
	}

	.numericBadge {
		@include numericBadge.state;
	}
}

@mixin loadingAI {
	--components-button-color: transparent;
	--components-button-backgroundColor: var(--palettes-neutral-0);
	--commons-loading-frontground: var(--palettes-neutral-300);
	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);

	.lucca-icon {
		background-image: none !important;
	}

	&::before {
		content: none;
	}
}

@mixin successAI {
	.lucca-icon {
		@include icons.transparent;
	}

	&::before {
		content: none;
	}

	&::after {
		@include icons.AI;
	}
}

@mixin successOutlined {
	--components-button-backgroundColor: var(--palettes-neutral-0);
	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);

	&::after {
		color: var(--palettes-700, var(--palettes-product-700));
	}
}

@mixin successGhost {
	--components-button-backgroundColor: var(--palettes-neutral-50);
	--components-button-boxShadow: none;

	&::after {
		color: var(--palettes-700, var(--palettes-product-700));
	}
}

@mixin error {
	animation-name: shake;
	animation-iteration-count: 1;
	animation-duration: var(--commons-animations-durations-standard);

	@include keyframe.shake;
}