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

.subscriptions-add-sites__form--container {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 20px;
	min-width: 515px;

	.subscriptions-add-sites__form-field {
		flex: 1;
	}

	.components-base-control.is-error input {
		border-color: var(--color-error);

		&:focus {
			box-shadow: 0 0 0 2px var(--color-error-10);
		}
	}

	.is-error .components-base-control__field {
		margin-bottom: 6px;
	}

	.components-text-control__input {
		border-color: var(--studio-gray-10);
		border-radius: 4px;
		box-sizing: border-box;
		font-size: 0.875rem;
		padding: rem(10px) rem(16px);
		/* We need to allow space for the SVG checkmark */
		padding-right: calc(0.5rem + 24px);
		height: 40px;

		&::placeholder {
			color: var(--studio-gray-20);
		}

		&[disabled] {
			background: var(--studio-gray-5);
		}

		&:focus {
			border-color: var(--studio-gray-10);
			box-shadow: 0 0 0 2px var(--color-primary-10);
			outline: none;
		}
	}

	.components-base-control {
		position: relative;
	}

	.components-base-control__help {
		display: flex;
		align-items: center;
		margin: 0;
		position: absolute;
		top: 0;
		right: 0.5rem;
		height: 100%;

		svg {
			fill: var(--color-success-50);
		}
	}

	@media (max-width: $break-small) {
		min-width: initial;
	}
}
