public-ui-kolibri

@use '../mixins/to-rem' as *;
@use './input-core' as *;

@layer kol-theme-component {
	.kol-input {
		background-color: transparent;
		height: to-rem(40);
		padding: 0 to-rem(10);
		border: none;

		&::placeholder {
			color: var(--color-subtle);
		}
	}

	.kol-input-container {
		position: relative;
		padding: 0;
		gap: 0;
		grid-template-columns: auto max-content min-content;

		&__adornment {
			position: absolute;
			top: to-rem(-2);

			&--start {
				left: 0;
			}

			&--end {
				right: 0;
			}
		}

		&:has(&__adornment--start:not(:empty)) .kol-input {
			padding-left: to-rem(48);
		}

		&:has(&__adornment--start &__smart-button + &__icon) .kol-input {
			padding-left: to-rem(76);
		}

		&:has(&__adornment--end:not(:empty)) .kol-input {
			padding-right: to-rem(48);
		}

		&:has(&__adornment--end &__icon + &__smart-button) .kol-input {
			padding-right: to-rem(76);
		}

		&__container {
			position: relative;
			z-index: 1;
		}
	}
}