@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.configure-your-site-modal-form {
	max-width: 650px;

	select {
		width: fit-content;
	}

	.configure-your-site-modal-form__php-version-select {
		min-width: 200px;
	}
	.configure-your-site-modal-form__allow-clients-to-use-help-center {
		margin-top: 15px;
		display: flex;
		font-weight: 400;
		color: var(--color-neutral-50);
		@include body-small;
		align-items: center;


		.dev-sites-label {
			margin-top: 15px;
		}
	}

	.configure-your-site-modal-form__footer {
		margin-top: 42px;
		text-align: right;
	}

	.configure-your-site-modal-form__site-name-placeholder {
		@include placeholder( --color-neutral-10 );

		flex: 1;
		display: block;
	}

	.configure-your-site-modal-form__site-name-wrapper {
		display: flex;
		align-items: center;

		.form-text-input-with-affixes {
			.configure-your-site-modal-form__input {
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
			}

			.form-text-input-with-affixes__suffix {
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;
			}
		}

		.configure-your-site-modal-form__site-name-icon-wrapper {
			display: flex;
			justify-content: space-around;
			margin-left: 5px;
			width: 28px;
		}

		.configure-your-site-modal-form__site-name-success {
			margin-right: -5px;
			fill: var(--color-success);
		}

		.configure-your-site-modal-form__site-name-fail {
			margin-right: -5px;
			fill: var(--color-error);
		}

		.configure-your-site-modal-form__site-name-loading {
			display: flex;
			justify-content: space-around;
			margin: 0;
		}
	}

	.configure-your-site-modal-form__site-name-validation-message {
		display: flex;
		align-items: center;
		@include body-small;
		color: var(--color-error);
		margin-top: 4px;

		.configure-your-site-modal-form__site-name-suggestion {
			text-decoration: underline;
			@include heading-small;
			color: var(--color-error);
			cursor: pointer;
		}

		svg {
			margin-right: 5px;
		}
	}

}
