@use '../variables' as *;

.#{$prefix}input {
	position: relative;
	width: 100%;
	padding: 0;
	min-height: var(--#{$prefix}input-height);
	display: flex;
	align-items: center;
	border: none;
	border-radius: var(--#{$prefix}input-border-radius);
	color: var(--#{$prefix}input-color);
	background-color: var(--#{$prefix}input-background);
	z-index: 0;
	transition: all 0.2s ease-in-out;
	cursor: text;

	&:focus-visible {
		outline: none;
	}

	&--selectable {
		cursor: pointer;
	}

	&--disabled {
		opacity: 0.75;
		pointer-events: none;
	}

	&--read-only {
		pointer-events: none;
	}

	&--clearable &__clearable {
		transform: scale(0);
		transition: all 0.2s ease-in-out;
	}

	&--clearable:hover &__clearable {
		transform: scale(0.75);
	}

	&-group {
		display: flex;
		align-items: center;
	}

	&-group & {
		border-radius: 0px;
	}

	&-group &:first-of-type {
		border-top-left-radius: var(--#{$prefix}input-border-radius);
		border-bottom-left-radius: var(--#{$prefix}input-border-radius);
	}

	&-group &:last-of-type {
		border-top-right-radius: var(--#{$prefix}input-border-radius);
		border-bottom-right-radius: var(--#{$prefix}input-border-radius);
	}

	&__icon {
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		outline: none;
		background-color: transparent;
	}

	&__icon--opacity {
		opacity: 0;
	}

	&__icon--pointer {
		cursor: pointer;
	}

	&:hover &__icon--opacity-hoverable {
		opacity: 0.5;

		&:hover {
			opacity: 1;
		}
	}

	&__content {
		position: relative;
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		overflow: hidden;

		&--chips {
			padding-block: var(--#{$prefix}input-padding-y);
			padding-inline: var(--#{$prefix}input-padding-x);
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;
			gap: 0.25rem;

			& input {
				flex: 1;
				height: 24px;
				border: none;
				outline: none;
				color: inherit;
				background: inherit;
				min-width: 0;
			}
		}
	}

	&__field {
		flex: 1;
		width: 100%;
		height: 100%;
		padding-block: var(--#{$prefix}input-padding-y);
		padding-inline: var(--#{$prefix}input-padding-x);
		font-size: var(--#{$prefix}input-font-size);
		font-family: var(--#{$prefix}input-font-family);
		line-height: var(--#{$prefix}input-line-height);
		border: none;
		outline: none;
		color: var(--#{$prefix}input-color);
		background-color: transparent;
		display: flex;
		align-items: center;

		&:focus {
			outline: none !important;
		}

		&::placeholder {
			color: var(--#{$prefix}input-placeholder-color);
		}
	}

	&__search,
	&__placeholder {
		flex: 1;
		width: 100%;
		padding-block: var(--#{$prefix}input-padding-y);
		padding-inline: var(--#{$prefix}input-padding-x);
		font-size: var(--#{$prefix}input-font-size);
		font-family: var(--#{$prefix}input-font-family);
		line-height: var(--#{$prefix}input-line-height);
		color: var(--#{$prefix}input-color);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	&__placeholder {
		color: var(--#{$prefix}input-placeholder-color);
	}

	&__start-content,
	&__end-content {
		flex-shrink: 0;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: var(--#{$prefix}input-font-size);
		font-family: var(--#{$prefix}input-font-family);
		line-height: var(--#{$prefix}input-line-height);
		gap: var(--#{$prefix}input-content-gap);

		.#{$prefix}icon {
			font-size: var(--#{$prefix}input-icon-size);
		}
	}

	&__start-content {
		// margin-right: calc(-1 * var(--#{$prefix}input-icon-size));
		padding-left: calc(0.75 * var(--#{$prefix}input-padding-x));
		padding-right: calc(0.375 * var(--#{$prefix}input-padding-x));
	}

	&__end-content {
		// margin-left: calc(-1 * var(--#{$prefix}input-icon-size));
		padding-inline: calc(0.75 * var(--#{$prefix}input-padding-x));
	}

	&--start-content &__content &__field,
	&--start-content &__content &__search,
	&--start-content &__content &__placeholder {
		padding-left: 0;
	}

	&--end-content &__content &__field,
	&--end-content &__content &__search,
	&--end-content &__content &__placeholder {
		padding-right: 0;
	}
}

// ── Colores ──────────────────────────────────────────────────────────────────

$_input-colors: (primary, secondary, success, info, warning, danger);

@each $color in $_input-colors {
	.#{$prefix}input--filled.#{$prefix}input--#{$color},
	.#{$prefix}input--flat.#{$prefix}input--#{$color} {
		& > .#{$prefix}outline {
			--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
		}

		& > .#{$prefix}glow {
			--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
		}
	}

	.#{$prefix}input--outlined.#{$prefix}input--#{$color} {
		& > .#{$prefix}outline {
			--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
		}

		& > .#{$prefix}glow {
			--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
		}
	}
}