@use 'sass:map';

@mixin generate-input(
	$color,
	$background,
	$background-disabled,
	$border-color,
	$transitions-global,
	$height-atoms,
	$border-radius-atoms,
	$corner-shape-atoms
) {
	.nuitral-input {
		display: flex;
		height: $height-atoms;
		padding: 8px 12px;
		align-items: center;
		background: $background;
		border: 1px solid $border-color;
		border-radius: $border-radius-atoms;
		transition: $transitions-global;
		box-sizing: border-box;
		corner-shape: $corner-shape-atoms;
		gap: 4px;

		input {
			width: 100%;
			font-size: 16px;
			color: unset;
			background: transparent;
			border: none;
			transition: $transitions-global;
			outline: none;
		}

		@include generate-input-states(
			$color,
			$background-disabled,
			$border-color
		);
	}
}

@mixin generate-input-states($color, $background-disabled, $border-color) {
	&.disabled {
		pointer-events: none;
		background-color: $background-disabled;
	}

	&:focus-within {
		border-color: $color;
	}
}

@mixin generate-input-classes() {
	.nuitral-input-text-color {
		input {
			color: var(--text-color) !important;
		}

		*,
		*::before,
		*::after {
			color: var(--text-color) !important;
			fill: var(--text-color) !important;
			stroke: var(--text-color) !important;
		}
	}
}

@mixin input(
	$color,
	$background,
	$background-disabled,
	$border-color,
	$transitions-global,
	$height-atoms,
	$border-radius-atoms,
	$corner-shape-atoms
) {
	@include generate-input-classes;
	@include generate-input(
		$color,
		$background,
		$background-disabled,
		$border-color,
		$transitions-global,
		$height-atoms,
		$border-radius-atoms,
		$corner-shape-atoms
	);
}