@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.site-options {
	@include break-small {
		.step-container__content {
			flex-basis: 50%;
		}
	}

	/**
	 *	Write Step
 	 */
	&.is-step-write {
		@include break-small {
			.step-container__header {
				flex-basis: 34%;
			}
		}
	}

	/**
 	 *	Sell Step
 	 */
	&.is-step-sell {
		@include break-small {
			.step-container__header {
				flex-basis: 40%;
			}
		}
	}

	.site-options__form {
		margin-top: 12px;

		.site-options__form-fieldset {
			margin-bottom: 24px;

			.form-label {
				line-height: 1.5;
				margin-bottom: 8px;
				font-weight: 500;
				color: var(--studio-gray-60);
				border-radius: 4px;

				.form-label__optional {
					font-size: inherit;
					color: var(--studio-gray-40);
					text-transform: lowercase;

					&::before {
						content: "(";
					}

					&::after {
						content: ")";
					}
				}

				@include break-small {
					font-size: $font-body;
				}
			}

			input.form-text-input {
				height: 44px;
				line-height: 44px;
				border-radius: 4px;

				&:focus,
				&:focus:hover {
					border-color: var(--studio-gray-50);
					box-shadow: 0 0 0 2px #e2eaf1;
				}
			}

			.form-setting-explanation {
				line-height: 21px;
				display: flex;
				align-items: center;
				margin: 16px 0;
				font-style: normal;
				color: var(--studio-gray-40);

				.site-options__form-icon {
					margin-right: 8px;
				}
			}

			.form-input-validation {
				span {
					display: flex;
					align-items: center;
					gap: 10px;
				}
			}
		}
	}

	.button.site-options__submit-button.is-primary {
		padding: 9px 48px;
		border-radius: 4px;
		font-weight: 500;
		align-self: center;

		// override unnecessary super specificity added by another class
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

		&:disabled {
			color: #fff;
			background-color: var(--studio-gray-5);
		}
	}
}
