@charset "utf-8";

/* --------------------------------------------------------------------------
   Confirmation Code
-------------------------------------------------------------------------- */

	.confirmation-code {

	display: flex;
	gap: var(--space-12);

	input[data-role="confirmation-code-input"] {
		width: var(--space-64);
		height: var(--space-64);
		padding: 0;
		text-align: center;
	}

	/* Error */
	&.input-error {

		input[data-role="confirmation-code-input"] {
			color: var(--color-negative-primary);
			border-color: var(--color-negative-border-medium);
			background: var(--color-negative-surface-low);
		}

		+ [data-confirmation-code-value] {

			+ .error-block {
				display: none;
			}

		}

	}

}