/* ✅ Input Wrapper (Container for input, prefix, suffix) */
.input-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border: .5px solid var(--input-border);
	background: var(--input-bg);
	color: var(--input-color);
	border-radius: var(--input-radius);
	box-shadow: var(--input-shadow);
	transition: 0.2s ease;
	box-sizing: border-box;
	font-family: var(--family-body, Inter);
	width:fit-content;
}


/* ✅ Standalone Input (No Wrapper) */
.input {
	display: block; /* Prevent flex issues */
	border: .5px solid var(--input-border);
	background: var(--input-bg);
	color: var(--input-color);
	border-radius: var(--input-radius);
	box-shadow: var(--input-shadow);
	transition: 0.2s ease;
	padding: var(--input-padding-y) var(--input-padding-x);
	font-size: var(--input-font-size);
	min-height: var(--input-height);
	outline: none;
	font-family: var(--family-body, Inter);
	box-sizing: border-box;
}

/* ✅ Input inside Wrapper */
.input-wrapper input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: var(--input-font-size);
	color: var(--input-color);
	min-height: var(--input-height);
	padding: var(--input-padding-y) var(--input-padding-x);
	line-height: 1;
	box-sizing: border-box;
	font-family: var(--family-body, Inter);
}
.input-wrapper input::placeholder,
.input::placeholder {
	color: var(--text-tertiary, rgba(48, 48, 48, 0.40));
}


.input--hover,
.input-wrapper:hover,
.input:hover {
	--input-bg: var(--input-hover-bg);
	--input-border: var(--input-hover-border);
	--input-color: var(--input-hover-color);
}
.input--focus,
.input-wrapper:focus-within,
.input:focus {
	border: .5px solid var(--input-focus-border);
	box-shadow: var(--input-focus-shadow);
	outline: 3px solid var(--input-focus-outline);
	outline-offset: 1px;
}

.input-wrapper:has(input:disabled),
.input:disabled {
	--input-bg: var(--input-disabled-bg);
	--input-border: var(--input-disabled-border);
	--input-color: var(--input-disabled-color);
	cursor: not-allowed;
}


/* Input Variants */
.input-wrapper,
.input--primary,
.input {
	--input-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--input-bg: var(--states-primary-secondary, #FFF);
	--input-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
	--input-color: var(--text-primary, #171717);

	--input-hover-bg: var(--states-primary-secondary, #FFF);
	--input-hover-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));

	--input-focus-bg: var(--states-primary-secondary, #FFF);
	--input-focus-border: var(--shadows-highlight-2, #1487FA);
	--input-focus-outline: var(--shadows-highlight-1, #CCE5FF);
	--input-focus-shadow: 0px 0px 0px 1px var(--shadows-highlight-2, #1487FA);

	--input-disabled-bg: var(--states-primary-secondary-disabled, #F9F9F9);
	--input-disabled-border: var(--border-alpha-subtle, rgba(48, 48, 48, 0.10));
	--input-disabled-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
}

.input--secondary {
	--input-border: transparent;
	--input-bg: var(--states-primary-tertiary, rgba(48, 48, 48, 0.03));
	--input-shadow: unset;

	--input-hover-bg:  var(--states-primary-tertiary-hover, rgba(48, 48, 48, 0.05));
	--input-hover-border: transparent;

	--input-focus-bg: var(--states-primary-tertiary, rgba(48, 48, 48, 0.03));
	--input-focus-border: var(--shadows-highlight-2, #1487FA);
	--input-focus-outline: var(--shadows-highlight-1, #CCE5FF);
	--input-focus-shadow: 0px 0px 0px 1px var(--shadows-highlight-2, #1487FA);

	--input-disabled-bg: var(--states-primary-secondary-disabled, #F9F9F9);
	--input-disabled-border: var(--border-alpha-subtle, rgba(48, 48, 48, 0.10));
	--input-disabled-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
}

/* Sizes */
.input-wrapper,
.input--sm,
input.input {
	--input-height: 28px;
	--input-font-size: var(--type-size-xs, 0.8125rem);
	--input-padding-x: 10px;
	--input-padding-y: 0;
	--input-radius: var(--inputs-md, 0.5rem);
	--pre-sux-width:28px;
}

.input--xs,
input.input--xs {
	--input-height: 24px;
	--input-font-size: var(--type-size-xs, 0.8125rem);
	--input-padding-x: 10px;
	--input-padding-y: 0;
	--pre-sux-width:40px;
}

.input--2xs,
input.input--2xs {
	--input-height: 22px;
	--input-font-size: var(--type-size-2xs, 0.8125rem);
	--input-padding-x: 8px;
	--input-padding-y: 0;
	--pre-sux-width:40px;
}

.input--md,
input.input--md {
	--input-height: 32px;
	--input-font-size: 0.875rem;
	--input-padding-x: 10px;
	--input-padding-y: 0;
	--pre-sux-width:32px;
}
.input--lg,
input.input--lg {
	--input-height: 40px;
	--input-font-size: 1rem;
	--input-padding-x: 12px;
	--input-padding-y: 0;
	--pre-sux-width:40px;
}

.input--message {
	padding: var(--s-0, 0rem) var(--s-7, 0.75rem) var(--s-0, 0rem) var(--s-7, 0.75rem);
	--input-height: var(--s-16, 3rem);
	border-radius: 99999px;
	flex-grow: 1;
}

.input-wrapper:has(.input:invalid),
.input-wrapper.input--error {
	--input-border: var(--input-error-border, #dc3545);
	box-shadow: 0px 0px 0px 1px var(--shadows-danger-2, #EE3A3A), 0px 0px 0px 4px var(--shadows-danger-1, #FED7D7);
}
.input-wrapper:has(.input:valid)
.input-wrapper.input--success {
	--input-border: var(--input-success-border, #28a745);
}

/* Prefix & Suffix */
.input-prefix, .input-suffix {
	display: flex;
	padding: var(--s-0, 0rem) var(--s-7, 0.75rem);
	justify-content: center;
	align-items: center;
	gap: var(--s-3, 0.25rem);
	align-self: stretch;
	font-size: var(--input-font-size);
	color: var(--Text-tertiary, rgba(48, 48, 48, 0.40));
}

.input-prefix {
	border-right: 0.5px solid var(--Border-alpha-strong, rgba(48, 48, 48, 0.20));
}

.input-suffix {
	border-left: 0.5px solid var(--Border-alpha-strong, rgba(48, 48, 48, 0.20));

}

/* Icons */
.input-lead-icon, .input-tail-icon {
	font-size: 1.2em;
	color: var(--input-color);
	display: flex;
	align-items: center;
}

.input-lead-icon {
	margin-left: 7px;
	opacity: 0.7;
}

.input-wrapper kbd {
	margin-right: var(--input-padding-x, 0.625rem)
}

/* Numeric Stepper */
.input--numeric .input-minus,
.input--numeric .input-plus {
	width: var(--input-height);
	height: var(--input-height);
	background: var(--btn-bg, #ddd);
	border: 1px solid var(--input-border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--input-font-size);
	transition: 0.2s ease;
}

.input--numeric .input-minus:hover,
.input--numeric .input-plus:hover {
	background: var(--btn-hover-bg, #ccc);
}

/* Shortcut Key */
.input-shortcut {
	font-size: 0.75rem;
	color: var(--input-color, #aaa);
	background: rgba(0, 0, 0, 0.05);
	padding: 4px 6px;
	border-radius: 4px;
}


.input--select-menu__search {
	--input-border: transparent;
	--input-bg: transparent;
	--input-shadow: unset;
	--input-radius: 0;
	border-bottom: 0.5px solid var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	width: 100%;
	--input-height: 40px;
	padding: 0 var(--s-2, 0.625rem);
}

.input--select-menu__search:focus,
.input--select-menu__search:focus-within {
	--input-border: transparent;
	border-bottom: 0.5px solid var(--shadows-highlight-2, #1487FA);
	box-shadow: 0px 1px 0px 0px var(--shadows-highlight-2, #1487FA);
}

.input--select-menu__search:disabled {
	--input-bg: var(--states-primary-secondary-disabled, #F9F9F9);
	--input-border: var(--border-alpha-subtle, rgba(48, 48, 48, 0.10));
}