/* Input — design system tokens (--ds-color-*, --ds-radius-*, --ds-interaction-*, --ds-motion-*) */

.ds-input {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 360px;
	font-family: var(--ds-typography-sm-primary-family, var(--ds-font-families-primary));
}

.ds-input--full {
	max-width: 100%;
}

.ds-input__label {
	margin: 0;
	color: var(--ds-color-text-primary);
	font-size: var(--ds-typography-sm-primary-size, 14px);
	font-weight: var(--ds-typography-sm-primary-weight, 500);
	line-height: var(--ds-typography-sm-primary-line-height, 20px);
}

.ds-input__control {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--ds-color-bg-surface);
	border: 1px solid var(--ds-outline-outline-variant);
	border-radius: var(--ds-radius-sm);
	transition:
		border-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard),
		box-shadow var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}

.ds-input__control::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ds-roles-primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}

.ds-input__control:hover::before {
	opacity: var(--ds-interaction-hover-opacity);
}

.ds-input__control:focus-within {
	border-color: var(--ds-roles-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-roles-primary) 24%, transparent);
}

.ds-input__control:focus-within::before {
	opacity: var(--ds-interaction-focus-opacity);
}

.ds-input__control--invalid {
	border-color: var(--ds-roles-error);
}

.ds-input__control--invalid:focus-within {
	border-color: var(--ds-roles-error);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-roles-error) 24%, transparent);
}

.ds-input__control--disabled {
	opacity: var(--ds-interaction-disabled-opacity);
	cursor: not-allowed;
}

.ds-input__control--disabled::before {
	opacity: 0;
}

.ds-input__control--sm {
	min-height: 36px;
}

.ds-input__control--md {
	min-height: 44px;
}

.ds-input__control--lg {
	min-height: 52px;
}

.ds-input-field {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: none;
	color: var(--ds-color-text-primary);
	font-family: inherit;
	font-size: var(--ds-typography-base-primary-size, 16px);
	font-weight: var(--ds-typography-base-primary-weight, 400);
	line-height: var(--ds-typography-base-primary-line-height, 24px);
	outline: none;
}

.ds-input-field:not([type="color"]) {
	background: transparent;
}

.ds-input__control--sm .ds-input-field:not([type="color"]) {
	font-size: var(--ds-typography-sm-primary-size, 14px);
	line-height: var(--ds-typography-sm-primary-line-height, 20px);
	padding: 8px 12px;
}

.ds-input__control--md .ds-input-field:not([type="color"]) {
	padding: 10px 14px;
}

.ds-input__control--lg .ds-input-field:not([type="color"]) {
	font-size: var(--ds-typography-lg-primary-size, 18px);
	line-height: var(--ds-typography-lg-primary-line-height, 28px);
	padding: 12px 16px;
}

.ds-input-field:disabled {
	cursor: not-allowed;
}

.ds-input-field::placeholder {
	color: var(--ds-color-text-secondary);
	opacity: 1;
}

.ds-input__control:has(> .ds-input-field[type="color"]) {
	padding: 4px;
}

.ds-input__control:has(> .ds-input-field[type="color"])::before {
	display: none;
}

.ds-input-field[type="color"] {
	display: block;
	width: 100%;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: calc(var(--ds-radius-sm) - 2px);
	color-scheme: dark;
	cursor: pointer;
}

.ds-input-field[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.ds-input-field[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: calc(var(--ds-radius-sm) - 2px);
}

.ds-input__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--ds-color-text-secondary);
}

.ds-input__icon--left {
	margin-left: 12px;
}

.ds-input__icon--right {
	margin-right: 12px;
}

.ds-input__icon svg {
	width: 20px;
	height: 20px;
}

.ds-input__icon--spin svg {
	animation: ds-input-spin 1s linear infinite;
}

@keyframes ds-input-spin {
	to {
		transform: rotate(360deg);
	}
}

.ds-input__toggle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	padding: 6px;
	border: none;
	background: transparent;
	color: var(--ds-color-text-secondary);
	border-radius: var(--ds-radius-xs);
	cursor: pointer;
	transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}

.ds-input__toggle:hover {
	color: var(--ds-roles-primary);
}

.ds-input__toggle:disabled {
	cursor: not-allowed;
	opacity: var(--ds-interaction-disabled-opacity);
}

.ds-input__hint,
.ds-input__error {
	margin: 0;
	font-size: var(--ds-typography-xs-secondary-size, 12px);
	line-height: var(--ds-typography-xs-secondary-line-height, 16px);
}

.ds-input__hint {
	color: var(--ds-color-text-secondary);
}

.ds-input__error {
	color: var(--ds-roles-error);
}

/* Input group */
.ds-input-group {
	display: inline-flex;
	align-items: stretch;
	width: 100%;
	max-width: 420px;
}

.ds-input-group--full {
	max-width: 100%;
}

.ds-input-group__addon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	background: var(--ds-color-bg-surface-variant);
	border: 1px solid var(--ds-outline-outline-variant);
	color: var(--ds-color-text-secondary);
	font-size: var(--ds-typography-sm-primary-size, 14px);
	white-space: nowrap;
}

.ds-input-group__addon:first-child {
	border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
	border-right: none;
}

.ds-input-group__addon:last-child {
	border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
	border-left: none;
}

.ds-input-group .ds-input__control {
	border-radius: 0;
}

.ds-input-group .ds-input {
	max-width: none;
	flex: 1;
}

.ds-input-group .ds-input:first-child .ds-input__control {
	border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
}

.ds-input-group .ds-input:last-child .ds-input__control {
	border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}

.ds-input-group .ds-input:not(:first-child):not(:last-child) .ds-input__control {
	border-radius: 0;
	border-left: none;
}

.ds-input-group .ds-input + .ds-input .ds-input__control {
	border-left: none;
}

/* OTP */
.ds-otp {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ds-otp__label {
	margin: 0;
	color: var(--ds-color-text-primary);
	font-size: var(--ds-typography-sm-primary-size, 14px);
	font-weight: var(--ds-typography-sm-primary-weight, 500);
}

.ds-otp__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ds-otp__cell {
	width: 44px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--ds-outline-outline-variant);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-bg-surface);
	color: var(--ds-color-text-primary);
	font-family: var(--ds-typography-lg-primary-family, var(--ds-font-families-primary));
	font-size: var(--ds-typography-lg-primary-size, 18px);
	font-weight: var(--ds-typography-lg-primary-weight, 600);
	text-align: center;
	outline: none;
	transition:
		border-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard),
		box-shadow var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}

.ds-otp__cell:focus {
	border-color: var(--ds-roles-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-roles-primary) 24%, transparent);
}

.ds-otp__cell--invalid {
	border-color: var(--ds-roles-error);
}

.ds-otp__cell:disabled {
	opacity: var(--ds-interaction-disabled-opacity);
	cursor: not-allowed;
}

.ds-otp--sm .ds-otp__cell {
	width: 36px;
	height: 44px;
	font-size: var(--ds-typography-base-primary-size, 16px);
}

.ds-otp--lg .ds-otp__cell {
	width: 52px;
	height: 56px;
	font-size: var(--ds-typography-xl-primary-size, 20px);
}