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

@mixin M {
	@include icons.M;

	--components-button-font: var(--pr-t-font-body-M);
	--components-button-paddingBlock: var(--pr-t-spacings-100);
	--components-button-paddingInline: var(--pr-t-spacings-150);
	--components-button-gap: var(--pr-t-spacings-100);

	.numericBadge {
		@include numericBadge.M;
	}

	// Deprecated
	--components-button-font-size: var(--pr-t-font-body-M-fontSize);
	--components-button-line-height: var(--pr-t-font-body-M-lineHeight);
}

@mixin S {
	@include icons.S;

	--components-button-font: var(--pr-t-font-body-S);
	--components-button-paddingBlock: var(--pr-t-spacings-75);
	--components-button-paddingInline: var(--pr-t-spacings-100);
	--components-button-gap: var(--pr-t-spacings-75);

	.numericBadge {
		@include numericBadge.S;
	}

	// Deprecated
	--components-button-font-size: var(--pr-t-font-body-S-fontSize);
	--components-button-line-height: var(--pr-t-font-body-S-lineHeight);

	// status icon
	&::after {
		font-size: var(--pr-t-font-body-S-lineHeight);
		block-size: var(--pr-t-font-body-S-lineHeight);
	}
}

@mixin XS {
	@include icons.XS;

	--components-button-font: var(--pr-t-font-body-XS);
	--components-button-paddingBlock: var(--pr-t-spacings-50);
	--components-button-paddingInline: var(--pr-t-spacings-75);
	--components-button-gap: var(--pr-t-spacings-50);
	--components-button-borderRadius: var(--pr-t-border-radius-small);

	.numericBadge {
		@include numericBadge.XS;
	}

	// Deprecated
	--components-button-font-size: var(--pr-t-font-body-XS-fontSize);
	--components-button-line-height: var(--pr-t-font-body-XS-lineHeight);

	// status icon
	&::after {
		font-size: var(--pr-t-font-body-XS-lineHeight);
		block-size: var(--pr-t-font-body-XS-lineHeight);
	}
}

@mixin onlyIcon {
	--components-button-padding: var(--pr-t-spacings-100);
}

@mixin onlyIconS {
	--components-button-padding: var(--pr-t-spacings-75);
}

@mixin onlyIconXS {
	--components-button-padding: var(--pr-t-spacings-50);
}

@mixin block {
	--components-button-width: 100%;
}

@mixin outlined {
	--components-button-backgroundColor: var(--palettes-neutral-0);
	--components-button-color: var(--palettes-700, var(--palettes-neutral-700));
	--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);

	&:hover {
		--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
		--components-button-color: var(--palettes-700, var(--palettes-neutral-700));
		--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
	}

	&:active {
		--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
	}

	&:focus-visible {
		@include a11y.focusVisible($offset: 3px);
	}

	&:disabled {
		--components-button-backgroundColor: var(--palettes-neutral-0);
		--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);
		--components-button-color: var(--pr-t-color-text-disabled);
	}
}

@mixin ghost {
	--components-button-backgroundColor: transparent;
	--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));
	--components-button-boxShadow: none;

	&:hover,
	&:focus-visible {
		--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));
		--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
	}

	&:active {
		--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
	}

	&:disabled {
		--components-button-backgroundColor: transparent;
		--components-button-color: var(--pr-t-color-text-disabled);
	}
}

@mixin inverted {
	--components-button-color: var(--palettes-neutral-0);

	&:hover,
	&:focus-visible {
		--components-button-color: var(--palettes-neutral-0);
		--components-button-backgroundColor: var(--palettes-neutral-900);
	}

	&:active {
		--components-button-backgroundColor: var(--palettes-neutral-700);
	}
}

@mixin more {
	--components-button-minWidth: 2rem;
	--components-button-padding: 0;

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

		block-size: 0;
		order: -1;
		vertical-align: text-top;
	}
}

@mixin moreInsideUl {
	block-size: 100%;
	min-block-size: 2.25rem;

	&.mod-S {
		min-block-size: 2rem;
	}

	&.mod-XS {
		min-block-size: 1.5rem;
	}

	&::after {
		content: none;
	}
}

@mixin moreS {
	--components-button-minWidth: 1.75rem;
}

@mixin moreXS {
	--components-button-minWidth: 1.5rem;
}

@mixin critical {
	&:hover {
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-100);
	}

	&:active {
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-200);
	}
}

@mixin criticalGhost {
	&:hover,
	&:focus-visible {
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-100);
	}

	&:active {
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-200);
	}
}

@mixin criticalOutlined {
	&:hover {
		--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-error-400);
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-100);
	}

	&:focus-visible {
		--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);
		--components-button-color: var(--palettes-error-700);
	}

	&:active {
		--components-button-color: var(--palettes-error-700);
		--components-button-backgroundColor: var(--palettes-error-200);
	}
}

@mixin iconOnLeft {
	--components-button-paddingInlineStart: var(--pr-t-spacings-100);
}

@mixin iconOnRight {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-100);
}

@mixin iconOnLeftS {
	--components-button-paddingInlineStart: var(--pr-t-spacings-75);
}

@mixin iconOnRightS {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-75);
}

@mixin iconOnLeftXS {
	--components-button-paddingInlineStart: var(--pr-t-spacings-50);
}

@mixin iconOnRightXS {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-50);
}

@mixin disclosure {
	@include iconOnRight;

	.icon-arrowChevronBottom {
		transition-property: transform;
		transition-duration: var(--commons-animations-durations-fast);
		transform: var(--components-button-arrow-transform);
	}

	&[aria-expanded='true'] {
		--components-button-arrow-transform: rotate(180deg);
	}
}

@mixin counter {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-100);
}

@mixin counterS {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-75);
}

@mixin counterXS {
	--components-button-paddingInlineEnd: var(--pr-t-spacings-50);
}

@mixin AI {
	@include outlined;

	&:not(:disabled) {
		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));

		&:not(.mod-invert) .lucca-icon {
			@include icons.AI;
		}
	}
}

@mixin invertIA {
	--components-button-backgroundColor: transparent;
	--components-button-color: var(--palettes-neutral-0);

	background-image:
		linear-gradient(
			225deg,
			color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
			color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
		);

	&:hover,
	&:focus-visible {
		--components-button-AI-background-opacity: 15%;
		--components-button-color: var(--palettes-neutral-0);
	}

	&:active {
		--components-button-AI-background-opacity: 5%;
	}
}