/**
 * Text'ish
 */
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]),
textarea {
	padding: var(--input-text-default-padding-top, 12px) var(--input-text-default-padding-right, 16px) var(--input-text-default-padding-bottom, 12px) var(--input-text-default-padding-left, 16px);
	border-radius: var(--input-text-default-corner-radius, 16px);
	border-top: var(--input-text-default-border-width-top, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-right: var(--input-text-default-border-width-right, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-bottom: var(--input-text-default-border-width-bottom, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-left: var(--input-text-default-border-width-left, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	background: var(--input-text-default-color-surface, #F3F6FC);
	box-shadow: var(--input-text-shadow-inner-pos-x, 0) var(--input-text-shadow-inner-pos-y, 2px) var(--input-text-shadow-inner-blur, 0) var(--input-text-shadow-inner-spread, 0) var(--input-text-shadow-inner-color, rgba(38, 38, 38, 0.50)) inset;
	color: var(--input-text-default-color-text, #000);
	width: 100%;

	/* Fluid Max/Input - Field */
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-10-line-height, 24px); /* 150% */
	letter-spacing: var(--typography-10-letter-spacing, 0);
}

/* Focus. */
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]):focus-visible,
textarea:focus-visible {
	padding: var(--input-text-focus-padding-top, 12px) var(--input-text-focus-padding-right, 16px) var(--input-text-focus-padding-bottom, 12px) var(--input-text-focus-padding-left, 16px);
	border-radius: var(--input-text-focus-corner-radius, 16px);
	border-top: var(--input-text-focus-border-width-top, 1px) solid var(--input-text-focus-color-border, #3A76BD);
	border-right: var(--input-text-focus-border-width-right, 1px) solid var(--input-text-focus-color-border, #3A76BD);
	border-bottom: var(--input-text-focus-border-width-bottom, 1px) solid var(--input-text-focus-color-border, #3A76BD);
	border-left: var(--input-text-focus-border-width-left, 1px) solid var(--input-text-focus-color-border, #3A76BD);
	background: var(--input-text-focus-color-surface, #F3F6FC);

	/* input-textfield-focus */
	box-shadow: 0 var(--input-text-shadow-outer-focus-pos-y, 2px) 0 0 var(--input-text-focus-color-border, #3A76BD), var(--input-text-shadow-inner-pos-x, 0) var(--input-text-shadow-inner-pos-y, 2px) var(--input-text-shadow-inner-blur, 0) var(--input-text-shadow-inner-spread, 0) var(--input-text-shadow-inner-color, rgba(38, 38, 38, 0.50)) inset;
}

/* Has Error. */
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-radius: var(--input-text-error-corner-radius, 16px);
	border-top: var(--input-text-error-border-width-top, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-right: var(--input-text-error-border-width-right, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-bottom: var(--input-text-error-border-width-bottom, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-left: var(--input-text-error-border-width-left, 1px) solid var(--input-text-error-color-border, #FF0400);
	background: var(--input-text-error-color-surface, #FEE);
	padding: var(--input-text-error-padding-top, 12px) var(--input-text-error-padding-right, 16px) var(--input-text-error-padding-bottom, 12px) var(--input-text-error-padding-left, 16px);
}

/* Has Error/Focus. */
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
	border-radius: var(--input-text-errorfocus-corner-radius, 16px);
	border-top: var(--input-text-errorfocus-border-width-top, 1px) solid var(--input-text-errorfocus-color-border, #E70300);
	border-right: var(--input-text-errorfocus-border-width-right, 1px) solid var(--input-text-errorfocus-color-border, #E70300);
	border-bottom: var(--input-text-errorfocus-border-width-bottom, 1px) solid var(--input-text-errorfocus-color-border, #E70300);
	border-left: var(--input-text-errorfocus-border-width-left, 1px) solid var(--input-text-errorfocus-color-border, #E70300);
	background: var(--input-text-errorfocus-color-surface, #FEE);
	padding: var(--input-text-errorfocus-padding-top, 12px) var(--input-text-errorfocus-padding-right, 16px) var(--input-text-errorfocus-padding-bottom, 12px) var(--input-text-errorfocus-padding-left, 16px);

	/* input-textfield-errorfocus */
	box-shadow: 0 var(--input-text-shadow-outer-focus-pos-y, 2px) 0 0 var(--input-text-errorfocus-color-border, #E70300), var(--input-text-shadow-inner-pos-x, 0) var(--input-text-shadow-inner-pos-y, 2px) var(--input-text-shadow-inner-blur, 0) var(--input-text-shadow-inner-spread, 0) var(--input-text-shadow-inner-color, rgba(38, 38, 38, 0.50)) inset;
}

/** Combobox as a part of text input. **/
[role="combobox"] {
	width: 100%;
}

[type='date'],
[type='time'] {
	max-width: 13rem;
	max-width: 20ch;
}

select {
	padding: var(--input-text-default-padding-top, 12px) var(--input-text-default-padding-right, 16px) var(--input-text-default-padding-bottom, 12px) var(--input-text-default-padding-left, 16px);
	border-radius: var(--input-text-default-corner-radius, 16px);
	border-top: var(--input-text-default-border-width-top, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-right: var(--input-text-default-border-width-right, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-bottom: var(--input-text-default-border-width-bottom, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	border-left: var(--input-text-default-border-width-left, 1px) solid var(--input-text-default-color-border, #6D6D6D);
	background: var(--input-text-default-color-surface, #F3F6FC);
	box-shadow: var(--input-text-shadow-inner-pos-x, 0) var(--input-text-shadow-inner-pos-y, 2px) var(--input-text-shadow-inner-blur, 0) var(--input-text-shadow-inner-spread, 0) var(--input-text-shadow-inner-color, rgba(38, 38, 38, 0.50)) inset;
	color: var(--input-text-default-color-text, #000);
	width: 100%;

	/* Fluid Max/Input - Field */
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-10-line-height, 24px); /* 150% */
	letter-spacing: var(--typography-10-letter-spacing, 0);
}

select[aria-invalid="true"] {
	border-radius: var(--input-text-error-corner-radius, 16px);
	border-top: var(--input-text-error-border-width-top, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-right: var(--input-text-error-border-width-right, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-bottom: var(--input-text-error-border-width-bottom, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-left: var(--input-text-error-border-width-left, 1px) solid var(--input-text-error-color-border, #FF0400);
	background: var(--input-text-error-color-surface, #FEE);
}

/**
 * Labels.
 */
label {
	color: var(--input-text-color-label, #20375A);

	/* Fluid Max/Input - Label */
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size, 16px);
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-10-line-height, 24px); /* 150% */
	letter-spacing: var(--typography-10-letter-spacing, 0);
}

/**
 * Input descriptions.
 */
.input-description {
	color: var(--color-text-primary, #000);

	/* Fluid Max/Body */
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-10-line-height, 24px); /* 150% */
	letter-spacing: var(--typography-10-letter-spacing, 0);
}

.input-description:empty {
	display: none;
}

.input-error-message {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-vw-2x-small, 8px);

	color: var(--input-text-color-text-error, #BE0300);

	/* Input - Feedback */
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-10-line-height, 24px); /* 150% */
	letter-spacing: var(--typography-10-letter-spacing, 0);
}

.input-error-message::before {
		content: '';
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125ZM11 13H13V7.00001H11V13ZM12 23.3L8.65 20H4V15.35L0.699997 12L4 8.65001V4.00001H8.65L12 0.700012L15.35 4.00001H20V8.65001L23.3 12L20 15.35V20H15.35L12 23.3ZM12 20.5L14.5 18H18V14.5L20.5 12L18 9.50001V6.00001H14.5L12 3.50001L9.5 6.00001H6V9.50001L3.5 12L6 14.5V18H9.5L12 20.5Z' fill='black'/%3e%3c/svg%3e");
		flex-basis: 1.5rem;
		aspect-ratio: 1 / 1;
		background-repeat: no-repeat;
		background-size: contain;
		flex-shrink: 0;
}