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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;

	@at-root ($atRoot) {
		.simpleSelect-field {
			display: grid;
			grid-template-columns: auto 1fr auto auto;
			align-items: center;
			box-shadow: 0 0 0 1px var(--components-simpleSelect-border-color);
			background-color: var(--components-simpleSelect-background);
			border-radius: var(--pr-t-border-radius-input);
			padding: var(--components-simpleSelect-padding);
			overflow: hidden;
			outline: none;
			cursor: pointer;

			&:hover {
				--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover);
			}
		}

		.simpleSelect-field-prefix {
			display: none;

			&:not(:empty) {
				display: flex;
				margin-inline-end: var(--pr-t-spacings-50);
			}
		}

		.simpleSelect-field-input {
			grid-column-start: 2;
			grid-row-start: 1;
			font: var(--components-simpleSelect-font);
			padding: 0;
			background-color: transparent;
			color: var(--components-simpleSelect-value-color);
			border: 0;
			outline: none;
			position: relative;
			z-index: 1;
			min-inline-size: 0;
			cursor: pointer;

			&::placeholder {
				color: var(--components-simpleSelect-placeholder);
			}
		}

		.simpleSelect-field-value {
			grid-column-start: 2;
			grid-row-start: 1;
			inline-size: 100%;
			font: var(--components-simpleSelect-font);
			color: var(--components-simpleSelect-value-color);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			transition: color var(--commons-animations-durations-fast) ease;
		}

		.simpleSelect-field-clear {
			grid-column-start: -2;
			margin-inline-start: var(--components-simpleSelect-gap);
		}

		.simpleSelect-field-icon {
			grid-column-start: -1;
			margin-inline-start: var(--components-simpleSelect-gap);
			color: var(--components-simpleSelect-arrow-color);
			transition: transform var(--commons-animations-durations-standard) ease;

			.lucca-icon {
				@include icon.M;
			}

			&.mod-search {
				display: none;
			}
		}
	}
}