.wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.006em;
	color: var(--text-primary);
}

.input {
	width: 100%;
	padding: 0.5625rem 0.75rem;
	background-color: var(--bg-default);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	color: var(--text-primary);
	transition: all var(--duration-normal) var(--ease-out);

	&::placeholder {
		color: var(--text-tertiary);
	}

	&:hover:not(:disabled) {
		border-color: var(--text-tertiary);
	}

	&:focus {
		outline: none;
		border-color: var(--color-primary);
		box-shadow: var(--focus-ring);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: var(--bg-surface);
	}
}

.error {
	border-color: var(--color-danger);

	&:focus {
		border-color: var(--color-danger);
		box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
	}
}

.undertitle {
	font-size: 0.75rem;
	color: var(--text-secondary);
}