@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/text';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	align-items: center;
	gap: var(--pr-t-spacings-100);

	.color-value {
		inline-size: var(--components-color-value-inlineSize);
		aspect-ratio: 1;
		background: var(--components-color-value-backgroundColor);
		color: rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));
		border-radius: var(--pr-t-border-radius-small);
		box-shadow: inset 0 0 0 1px var(--components-color-value-boxShadowColor);
		scale: var(--components-color-value-scale);
		transition-property: scale;
		transition-duration: var(--commons-animations-durations-fast);
		flex-shrink: 0;

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

			display: var(--components-color-value-before-display);
			position: absolute;
			inset: 0;
			place-items: center;
			font-size: 1.5rem;
		}
	}

	@at-root ($atRoot) {
		.color-name {
			@include text.ellipsis;
		}
	}
}

@mixin componentPicker($atRoot: namespace.$defaultAtRoot) {
	inline-size: var(--components-colorPicker-inlineSize);

	.simpleSelect-field-value {
		padding: 1px;
		margin: -1px;
		min-inline-size: 0;
	}

	.simpleSelect-field-input {
		padding-inline-start: var(--components-colorPicker-input-paddingInlineStart);
		color: transparent;
	}
}

@mixin componentPanel($atRoot: namespace.$defaultAtRoot) {
	.lu-picker-content {
		.cdk-overlay-pane:has(&) {
			min-inline-size: 0 !important;
			inline-size: 17rem;
		}
	}

	[role='listbox'] {
		display: flex;
		flex-wrap: wrap;
		padding: var(--pr-t-spacings-100);
	}

	.color {
		padding: var(--pr-t-spacings-50);
	}

	@at-root ($atRoot) {
		.colorPanel-highlighted {
			display: flex;
			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
			margin: 0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);
			gap: var(--pr-t-spacings-50);
		}
	}
}