@use "sass:meta";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;

@forward "text-field.vars";
@use "text-field.vars" as vars;

@mixin -invalid {
	$focus-border-offset: calc(
		props.get(vars.$border-width) - props.get(vars.$focus--border-width)
	);

	@include bem.sibling-elem("bg") {
		inset-block: $focus-border-offset;
		inset-inline: $focus-border-offset;
		border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
		border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
	}

	&:hover {
		@include bem.sibling-elem("bg") {
			border-color: props.get(vars.$error--hover--border-color);
		}
	}

	&:focus {
		@include bem.sibling-elem("bg") {
			border-color: props.get(vars.$error--focus--border-color);
		}
	}
}

@mixin -keyboard-focus {
	@include bem.sibling-elem("bg") {
		outline: props.get(vars.$key-focus--outline-color) solid
			props.get(vars.$key-focus--border-width);
		border-color: props.get(vars.$key-focus--border-color);
		//outline-offset: props.get(vars.$focus --border);
	}
}

@mixin styles {
	@include materialize-at-root(meta.module-variables("vars"));

	@include bem.object("text-field") {
		$focus-border-offset: calc(
			props.get(vars.$border-width) - props.get(vars.$focus--border-width)
		);

		position: relative;
		min-inline-size: 0;
		background-color: props.get(vars.$bg-color);
		border-radius: props.get(vars.$rounding);

		@include bem.elem("bg") {
			position: absolute;
			inset-block: 0;
			inset-inline: 0;
			display: block;
			pointer-events: none;
			border: props.get(vars.$border-width) solid props.get(vars.$border-color);
			border-radius: props.get(vars.$rounding);
		}

		@include bem.elem("native") {
			box-sizing: border-box;
			inline-size: 100%;
			padding-block: calc(
				props.get(vars.$pad-b) - 0.5em * (props.get(vars.$line-height) - 1)
			);
			padding-inline: props.get(vars.$pad-i);
			font: inherit;
			line-height: props.get(vars.$line-height);
			color: props.get(vars.$text-color);
			appearance: none;
			resize: none;
			background-color: transparent;
			border: 1px solid transparent;

			&::placeholder {
				font-style: italic;
				color: props.get(vars.$placeholder-color);
				opacity: 1;
			}

			&:hover {
				@include bem.sibling-elem("bg") {
					border-color: props.get(vars.$hover--border-color);
				}
			}

			&:focus {
				outline: 0;

				@include bem.sibling-elem("bg") {
					inset-block: $focus-border-offset;
					inset-inline: $focus-border-offset;
					border: props.get(vars.$focus--border-width) solid
						props.get(vars.$focus--border-color);
					border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
				}
			}

			&:invalid {
				@include -invalid;
			}

			&:focus-visible,
			&:invalid:focus-visible {
				@include -keyboard-focus;
			}
		}

		@include bem.modifier("extended") {
			padding: props.get(vars.$extended--pad);

			@include bem.multi("&", "elem" "bg") {
				border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
			}

			@include bem.elem("native") {
				&:focus {
					@include bem.sibling-elem("bg") {
						border-radius: calc(
							props.get(vars.$rounding) + props.get(vars.$extended--pad) -
								$focus-border-offset
						);
					}
				}
			}
		}

		@include bem.modifier("pill") {
			@include bem.multi("&", "elem" "bg") {
				border-radius: 100em;
			}

			@include bem.elem("native") {
				padding-inline: props.get(vars.$pad-i-pill);

				&:focus {
					@include bem.sibling-elem("bg") {
						border-radius: 100em;
					}
				}
			}

			@include bem.modifier("extended") {
				@include bem.elem("native") {
					padding-inline: props.get(vars.$pad-i);
				}
			}
		}

		@include bem.is("invalid") {
			@include bem.elem("native") {
				@include -invalid;

				&:focus-visible {
					@include -keyboard-focus;
				}
			}
		}

		@include bem.is("disabled") {
			background-color: props.get(vars.$disabled--bg-color);

			@include bem.elem("native") {
				color: props.get(vars.$disabled--text-color);

				&::placeholder {
					color: props.get(vars.$disabled--placeholder-color);
				}
			}

			@include bem.elem("bg") {
				border-color: props.get(vars.$disabled--border-color);
			}

			@include bem.is("invalid") {
				@include bem.elem("native") {
					@include bem.sibling-elem("bg") {
						border-color: props.get(vars.$disabled--border-color);
					}
				}
			}

			@include bem.elem("native") {
				&:invalid {
					@include bem.sibling-elem("bg") {
						border-color: props.get(vars.$disabled--border-color);
					}
				}
			}
		}
	}
}