@use 'sass:math';
@use './variables' as *;

.s-text-field__input {
	display: flex;
	flex-grow: 1;

	label {
		position: absolute;
		max-width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		top: $text-field-label-top;
		pointer-events: none;
		transform-origin: top left;

		&.active {
			max-width: 133%;
			transform: $text-field-label-active-transform;
		}
	}

	input {
		caret-color: inherit;
		flex: 1 1 auto;
		line-height: $text-field-line-height;
		padding: $text-field-padding;
		max-width: 100%;
		min-width: 0;
		width: 100%;

		&:focus + label,
		&:not(:placeholder-shown) + label {
			max-width: 133%;
			transform: $text-field-label-active-transform;
		}

		&:invalid:not(:placeholder-shown) + label,
		&:invalid:not(:placeholder-shown)::placeholder {
			color: var(--error-text-color, #{$error-color}) !important;
			caret-color: var(--error-text-caret-color, #{$error-color}) !important;
		}
	}
}

.s-text-field__wrapper {
	width: 100%;
	color: inherit;
	caret-color: currentColor;
	display: flex;
	align-items: center;

	// transition: $primary-transition;

	$default-border-width: thin 0 0 0;

	&::before,
	&::after {
		border-radius: inherit;
		width: inherit;
		bottom: -1px;
		content: '';
		left: 0;
		position: absolute;
		transition: $primary-transition;
		pointer-events: none;
	}

	&::before {
		border-color: var(--theme-text-fields-border);
		border-style: solid;
		border-width: var(--theme-text-fields-border-width, #{$default-border-width});
	}

	&::after {
		background-color: currentColor;
		border-color: currentColor;
		border-style: solid;
		border-width: thin 0 thin 0;
		transform: scaleX(0);
	}

	&:hover {
		&::before {
			border-color: var(--theme-text-fields-border-hover, rgba(0, 0, 0, 0.87));
			border-width: var(--theme-text-fields-border-width-hover, #{$default-border-width});
		}
	}

	&:focus-within {
		&::after {
			transform: scale(1);
		}

		label {
			color: var(--theme-primary-text-color, var(--primary-text-color, #{$primary-color}));
		}
	}

	& > {
		[slot='prepend'] {
			margin-inline-end: $text-field-prepend-append-margin;
		}

		[slot='append'] {
			margin-inline-end: $text-field-prepend-append-margin;
		}
	}

	&.outlined {
		&::before {
			top: 0;
			border-width: var(--theme-text-fields-border-width, thin);
		}

		&:hover::before {
			border-width: var(--theme-text-fields-border-width-hover);
		}

		&:focus-within::before {
			border-color: currentColor;
			border-width: 2px;
		}

		input:focus + label,
		input:not(:placeholder-shown) + label {
			padding: 0 4px;
			background-color: var(--theme-surface);
			transform: $text-field-outlined-label-active-transform;
		}

		label {
			top: $text-field-outlined-label-top;

			&.active {
				padding: 0 4px;
				background-color: var(--theme-surface);
				transform: $text-field-outlined-label-active-transform;
			}
		}
	}

	&.outlined,
	&.solo,
	&.filled {
		padding: $text-field-wrapper-padding;
		padding-inline-start: var(--s-text-field-wrapper-padding-inline-start, 12px);
		padding-inline-end: var(--s-text-field-wrapper-padding-inline-end, 1px);
	}

	&.filled,
	&.outlined {
		min-height: $text-field-filled-outlined-min-height;
	}

	&.filled {
		border-radius: $text-field-filled-border-radius;
		background-color: var(--theme-text-fields-filled);

		&:hover {
			background-color: var(--theme-text-fields-filled-hover);
		}

		input,
		textarea {
			padding-top: $text-field-filled-margin-top;
		}

		label {
			align-self: center;
			top: unset;

			&.active {
				transform: $text-field-filled-label-active-transform;
			}
		}

		textarea + label {
			top: $text-field-filled-label-top;
		}

		input:focus + label,
		input:not(:placeholder-shown) + label {
			transform: $text-field-filled-label-active-transform;
		}

		textarea:focus + label,
		textarea:not(:placeholder-shown) + label {
			transform: $text-field-filled-label-active-transform;
		}
	}

	&.outlined,
	&.solo,
	&.rounded {
		&::after {
			display: none;
		}
	}

	&.outlined,
	&.solo {
		border-radius: var(--s-text-field-wrapper-border-radius, #{$text-field-border-radius});
	}

	&.solo {
		min-height: $text-field-solo-min-height;
		@include elevation($text-field-solo-depth);

		&::before {
			display: none;
		}
	}

	&.rounded {
		border-radius: $text-field-rounded-border-radius;

		&.filled::before {
			border: none;
		}

		&.outlined {
			padding: $text-field-outlined-rounded-padding;
		}
	}

	&.flat {
		@include elevation(0, true);
	}
}

.s-text-field {
	&.error,
	&.success {
		.s-text-field__wrapper::before {
			border-color: currentColor !important;
		}
	}

	&.dense {
		input {
			padding: $text-field-dense-padding;
		}

		.s-text-field__wrapper {
			&.outlined,
			&.filled {
				min-height: $text-field-filled-outlined-dense-min-height;
			}

			&.outlined {
				label {
					top: $text-field-outlined-dense-label-top;

					&.active {
						transform: $text-field-outlined-dense-label-active-transform;
					}
				}

				input:focus + label,
				input:not(:placeholder-shown) + label {
					transform: $text-field-outlined-dense-label-active-transform;
				}
			}

			&.solo {
				min-height: $text-field-solo-dense-min-height;
			}

			&.filled {
				input,
				textarea {
					margin-top: math.div($text-field-filled-margin-top, 2);
				}

				label {
					// top: $text-field-filled-dense-label-top;
					align-self: center;
					top: unset;

					&.active {
						transform: $text-field-filled-dense-label-active-transform;
					}
				}

				input:focus + label,
				input:not(:placeholder-shown) + label {
					transform: $text-field-filled-dense-label-active-transform;
				}
			}
		}
	}
}