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

.agency-details-form {

	.agency-details-form__controls {
		margin-block-start: 2rem;
	}

	.agency-details-form__business-address {
		#line1 {
			margin-block-end: 10px;
		}
	}

	.agency-details-form__tos p {
		margin: 45px 0 24px;
		@include body-large;
		color: var(--color-neutral-100);
	}

	select {
		width: 100%;
	}

	.agency-details-form__fullname-container {
		@include break-small {
			display: flex;
			flex-direction: row;
			gap: 16px;

			> * {
				flex-grow: 1;
			}
		}
	}

	.agency-details-form__footer-error {
		margin-block-start: 0.25rem;
		color: var(--color-scary-40);
		font-style: italic;
		@include body-medium;

		&.hidden {
			display: none;
		}

		// FIXME: come up with better solution for line1 and line2 separation
		&.line-separated {
			margin-block-start: -0.25rem;
			margin-block-end: 0.5rem;
		}
	}

	.company-details-form__tos p {
		@include body-large;
	}

	.company-details-form__phone-input {
		display: flex;
		flex-direction: column;

		> * {
			flex-grow: 1;
		}

		@include break-small {
			flex-direction: row;
			gap: 16px;
		}

		.form-label {
			display: none;
		}
	}

	.components-base-control__label {
		@include heading-medium;
		margin-bottom: 5px;
		text-transform: none;
	}
}
