.cbp-form {
	--unfocused: var(--color-container-content);
	--text-highlight: var(--color-accent);
	--outline: var(--color-accent);

	--background-color: white;

	display: flex;
	flex-direction: column;

	row-gap: 1rem;

	.notifications {
		.cbp-success,
		.cbp-error {
			background-color: var(--color-container);
			color: var(--color-container-content);

			padding: 0.8rem;
			margin-block-end: 1rem;

			border-left: 4px solid var(--color-notification);
		}

		.cbp-success {
			--color-notification: var(--color-feedback-success);
		}

		.cbp-error {
			--color-notification: var(--color-feedback-danger);
		}
	}

	.cbp-form__row {
		display: flex;
		align-items: flex-start;

		flex-basis: 100%;

		column-gap: 0.7rem;

		@media only screen and (max-width: 767px) {
			flex-flow: column;
			align-items: stretch;
			row-gap: 1rem;
		}

		&:has(.cbp-form__input--checkbox) {
			flex-wrap: wrap;
		}

		> * {
			flex-basis: 100%;
		}

		.cbp-form__input-wrapper:not(.cbp-form__input--checkbox) {
			display: flex;
			flex-direction: column;
		}

		.cbp-form__input--text,
		.cbp-form__input--textarea,
		.cbp-form__input--email,
		.cbp-form__input--number {
			position: relative;

			/* font-size: 1.125rem; */
			font-size: var(--typography-body-size, 1.125rem);
			font-family: var(--typography-body-font);
			font-weight: 500;

			label {
				position: absolute;

				margin-inline-start: 1.25rem;

				left: 0;
				top: 50%;

				transform: translateY(-50%);

				color: var(--unfocused);
				background-color: var(--background-color);

				transition: 0.1s ease-out;
				transform-origin: left top;

				pointer-events: none;
			}

			&.cbp-form__input--textarea {
				label {
					top: 1.5em;
				}
			}

			input,
			textarea {
				width: 100%;

				padding: 0.9rem 1.25rem;

				border: solid 1px var(--unfocused);
				border-radius: var(--radius-border-small);
				outline: none;

				transition: 0.1s ease-out;

				&:focus {
					color: var(--text-highlight);
					border-color: var(--outline);
				}

				&:not(:placeholder-shown) + label,
				&:focus + label {
					top: 0;
					left: 10px;
					font-size: 0.9em;
				}

				/* &[required] + label {
					&:after {
						content: "*";
						position: absolute;
						right: -1ch;
						top: 0;

						color: var(--color-feedback-danger, red);
					}
				} */
			}
		}

		.cbp-form__input--checkbox {
			position: relative;

			flex-shrink: 0;

			margin-block-end: 0.95rem;

			/* input {
				&[required] + label {
					position: relative;

					&:after {
						content: "*";
						position: absolute;
						right: -1ch;
						top: 0;

						color: var(--color-feedback-danger, red);
					}
				}
			} */

			label {
				font: var(--typography-body-font);
				font-size: var(--typography-body-size, 1rem);
				/* font-size: 1.25rem; */
				font-style: italic;

				line-height: 1.25;
				letter-spacing: 0.6px;

				a {
					text-transform: unset;
				}
			}
		}

		.cbp-form__input--select {
			/* font-size: 1.125rem; */
			font-weight: 500;
			font-size: var(--typography-body-size, 1.125rem);
			font-family: var(--typography-body-font, sans-serif);

			text-transform: uppercase;
			line-height: 1.38;
			letter-spacing: 0.54px;

			outline: none;
			border: solid 1px var(--unfocused);

			legend {
				margin-block-end: -0.25em;
			}

			.selection:not(:last-child) {
				margin-inline-end: 0.5rem;
			}
		}

		.cbp-form__input--submit {
			input {
				width: 100%;

				transition: all 0.3s ease-out;

				margin-block-start: 0;
			}
		}

		.cbp-form__mark-required {
			color: var(--color-feedback-danger, red);
		}
	}
}