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

@mixin component {
	@include reset.button;

	display: var(--components-clear-display);
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: 'main';
	align-items: normal;
	flex-shrink: 0;
	inline-size: var(--components-clear-size);
	block-size: var(--components-clear-size);
	border-radius: var(--pr-t-border-radius-full);

	&::before,
	&::after {
		content: '';
		grid-area: main;
	}

	&::before {
		border-radius: var(--pr-t-border-radius-full);
		background-color: var(--components-clear-background);
	}

	&::after {
		mask-image: var(--components-clear-background-image);
		mask-size: var(--components-clear-size);
		mask-repeat: no-repeat;
		background-color: var(--components-clear-cross-color);
	}

	&:hover {
		--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));
		--components-clear-background: var(--palettes-700, var(--palettes-neutral-700));
	}

	&:focus-visible {
		@include a11y.focusVisible($borderRadius: 50%);
	}

	&:active {
		--components-clear-background: var(--palettes-900, var(--palettes-neutral-900));
	}

	// to prevent breaking change. lucca-icon is no longer needed.
	.lucca-icon {
		display: none;
	}
}