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

@mixin checkboxChecked {
	--components-filterPill-borderColor: var(--palettes-product-300);
	--components-filterPill-backgroundColor: var(--palettes-product-50);
	--components-filterPill-color: var(--palettes-product-800);
	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);
	--components-filterPill-checkbox-borderColor: var(--palettes-product-700);
	--components-filterPill-checkbox-icon-scale: 1;
	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, 1, 0.5, 1.5);
	--components-filterPill-label-fontWeight: var(--components-filterPill-label-fontWeightChecked);
}

@mixin focusVisible {
	@include a11y.focusVisible($offset: 3px);
}

@mixin hover {
	--components-filterPill-borderColor: var(--palettes-product-400);
	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor), var(--pr-t-elevation-shadow-button);
}

@mixin active {
	--components-filterPill-backgroundColor: var(--palettes-neutral-0);

	box-shadow:
		0 0 0 1px var(--palettes-product-500),
		var(--pr-t-elevation-shadow-button);
}

@mixin filledHover {
	--components-filterPill-borderColor: var(--palettes-product-400);
	--components-filterPill-checkbox-borderColor: var(--palettes-product-600);
	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-600);
}

@mixin filledActive {
	--components-filterPill-backgroundColor: var(--palettes-product-100);
	--components-filterPill-checkbox-borderColor: var(--palettes-product-700);
	--components-filterPill-checkbox-backgroundColor: var(--palettes-product-700);
}

@mixin checkboxDisabled {
	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
	--components-filterPill-borderColor: var(--palettes-neutral-300);
	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-500);
	--components-filterPill-color: var(--palettes-neutral-500);
	--components-filterPill-label-cursor: default;

	box-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
}

@mixin checkboxCheckedDisabled {
	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
	--components-filterPill-borderColor: var(--palettes-neutral-300);
	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-100);
	--components-filterPill-checkbox-backgroundColor: var(--palettes-neutral-100);
	--components-filterPill-color: var(--palettes-neutral-500);
	--components-filterPill-checkbox-color: var(--palettes-neutral-500);
	--components-filterPill-label-cursor: default;
}

@mixin filled {
	--components-filterPill-borderColor: var(--palettes-product-300);
	--components-filterPill-backgroundColor: var(--palettes-product-50);
	--components-filterPill-color: var(--palettes-product-800);
	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
}

@mixin notFilled {
	.filterPill-combobox {
		@include a11y.mask;
	}
}

@mixin comboboxHidden {
}

@mixin opened {
	--components-filterPill-toggle-rotation: 180deg;
}

@mixin beginning {
	--components-filterBar-displayBefore: none;
}

@mixin ending {
	--components-filterBar-displayAfter: none;
}

@mixin disabled {
	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
	--components-filterPill-borderColor: var(--palettes-neutral-300) !important;
	--components-filterPill-color: var(--palettes-neutral-500);
	--components-filterPill-toggle-iconColor: var(--palettes-neutral-500);
	--components-filterPill-label-cursor: default;
	--components-filterPill-arrowColor: var(--palettes-neutral-500);
	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);

	box-shadow: var(--components-filterPill-shadow);

	@include clear.hidden;

	// TODO
	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
}

@mixin hidden {
	--components-filterPill-display: none;
}