/* 공통 텍스트필드 primitive를 정의한다. */
.form-textfield {
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);
	font-size: 1rem;
	line-height: 1.5rem;
	background: var(--field);
	color: var(--text);
}

.form-textfield:focus {
	outline: 2px solid var(--primary-ghost);
	border-color: var(--primary);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

/* 상태 토큰 통일: textfield는 wrapper(.form-box) 상태와 동일한 링/톤을 사용한다. */
.form-box.is-focus .form-textfield {
	border-color: var(--primary);
	outline: 2px solid var(--primary-ghost);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

.form-box.is-error .form-textfield {
	border-color: var(--negative);
	background: var(--negative-ghost);
}

.form-box.is-error .form-textfield:is(:focus, :focus-visible) {
	border-color: var(--negative);
	outline: 2px solid var(--negative-soft);
	box-shadow: 0 0 0 2px var(--negative-ghost);
}

.form-box.is-success .form-textfield {
	border-color: var(--positive);
	background: var(--positive-ghost);
}

/* Edge/IE 기본 비밀번호 표시 버튼을 숨겨서 커스텀 아이콘만 사용한다. */
.form-textfield[type="password"]::-ms-reveal,
.form-textfield[type="password"]::-ms-clear {
	display: none;
}

.form-textfield:disabled,
.form-textfield:read-only {
	background: var(--field-disabled);
	border-color: var(--border-disabled);
	color: var(--text-disabled);
	cursor: not-allowed;
}

/* date 입력의 캘린더 아이콘도 비활성 상태에서 동일한 톤으로 낮춘다. */
.form-textfield:disabled::-webkit-calendar-picker-indicator,
.form-textfield:read-only::-webkit-calendar-picker-indicator {
	opacity: 0.35;
	cursor: not-allowed;
}

/* 좌/우 아이콘 또는 아이콘 버튼을 입력 안쪽에 배치하는 공통 affix 래퍼다. */
.form-input-affix,
.form-input-wrap,
.form-textfield-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

/* suffix 액션이 있는 경우 우측 공간을 미리 확보한다. */
.form-input-affix.has-suffix .form-textfield,
.form-input-wrap .form-textfield,
.form-textfield-wrap .form-textfield {
	width: 100%;
	padding-right: 4rem;
}

/* prefix 아이콘이 있는 경우 좌측 시각 요소와 텍스트가 겹치지 않게 패딩을 늘린다. */
.form-input-affix.has-prefix .form-textfield {
	padding-left: 2.75rem;
}

/* 아이콘/버튼 그룹은 입력 우측 끝에 고정한다. */
.form-input-affix-actions,
.form-textfield-actions {
	position: absolute;
	right: 0.625rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

/* suffix 단일 아이콘은 별도 액션 그룹 없이 직접 우측에 놓을 수 있다. */
.form-input-affix-suffix {
	position: absolute;
	right: 0.875rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--blue-gray-400);
	pointer-events: none;
}

/* prefix 단일 아이콘은 좌측에 고정 배치한다. */
.form-input-affix-prefix {
	position: absolute;
	left: 0.875rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--blue-gray-400);
	pointer-events: none;
}

/* 클릭 가능한 우측 아이콘 버튼은 공통 primitive로 관리한다. */
.form-input-affix-button,
.password-toggle,
.form-textfield-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	background: transparent;
	border-radius: var(--circle);
	cursor: pointer;
}

.form-input-affix :is(.form-input-affix-prefix, .form-input-affix-suffix, .form-input-affix-button) :is(img, svg),
.password-toggle img,
.form-textfield-icon img {
	width: 1.5rem;
	height: 1.5rem;
}

.form-textfield-chip {
	border: 1px solid var(--primary);
	color: var(--primary);
	background: transparent;
	border-radius: var(--curved);
	padding: 0.125rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1rem;
	cursor: pointer;
}

/* 버튼형 suffix는 포커스 가능 요소이므로 hover/focus-visible 반응을 별도로 준다. */
.form-input-affix-button:is(:hover, :focus-visible),
.password-toggle:is(:hover, :focus-visible),
.form-textfield-icon:is(:hover, :focus-visible) {
	outline: none;
	background: var(--blue-gray-100);
}

.form-input-affix-button:focus-visible,
.password-toggle:focus-visible,
.form-textfield-icon:focus-visible {
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

/* 에러 form-box 안 액션 버튼 포커스 링도 danger 기준으로 통일한다. */
.form-box.is-error :is(.form-input-affix-button, .password-toggle, .form-textfield-icon):focus-visible {
	box-shadow: 0 0 0 2px var(--negative-ghost);
}

/* 성공 form-box 안 액션 버튼 포커스 링도 success 기준으로 통일한다. */
.form-box.is-success :is(.form-input-affix-button, .password-toggle, .form-textfield-icon):focus-visible {
	box-shadow: 0 0 0 2px var(--positive-ghost);
}

/* 비활성/읽기전용 박스에서는 내부 액션 아이콘 버튼도 클릭 불가 상태로 고정한다. */
.form-box:is(.is-disabled, .is-readonly) :is(.form-input-affix-actions, .form-textfield-actions) {
	opacity: 0.56;
}

.form-box:is(.is-disabled, .is-readonly)
	:is(
		.form-input-affix-prefix,
		.form-input-affix-suffix,
		.form-input-affix-button,
		.password-toggle,
		.form-textfield-icon,
		.form-textfield-chip
	) {
	color: var(--text-disabled);
	border-color: var(--border-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

.form-box:is(.is-disabled, .is-readonly)
	:is(
		.form-input-affix-prefix,
		.form-input-affix-suffix,
		.form-input-affix-button,
		.password-toggle,
		.form-textfield-icon
	)
	img {
	opacity: 0.48;
}