.app-input-control {
	.components-flex-item {
		width: 100%;
		max-width: 100%;
		margin-right: 0;

		// hack with !important to override the specificity in @wordpress/components.
		label.components-input-control__label {
			color: wpColors.$gray-700 !important;
			white-space: normal !important;
		}
	}

	&__character-count {
		margin-top: calc(wpVariables.$grid-unit-05 / 2);
		text-align: right;
		line-height: variables.$rfw-line-height-smaller;
		font-size: variables.$rfw-font-smaller;
		color: wpColors.$gray-700;
	}

	&.has-error .components-input-control__backdrop,
	&--error-character-count .components-input-control .components-input-control__container .components-input-control__backdrop {
		border-color: wpColors.$alert-red;
		box-shadow: none;
	}

	&.has-error .components-base-control__help,
	&--error-character-count &__character-count {
		color: wpColors.$alert-red;
	}
}