@import '@automattic/typography/styles/variables';
@import '@wordpress/base-styles/colors.native';
@import '@wordpress/base-styles/breakpoints';

.site-address-changer__copy-addition,
.site-address-changer__copy-addition svg {
	color: var( --color-success );
	fill: currentColor;
}

.site-address-changer__copy-deletion,
.site-address-changer__copy-deletion svg {
	color: var( --color-error );
	fill: currentColor;
}

.site-address-changer__confirmation-detail {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 24px;

	.site-address-changer__icon-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.site-address-changer__confirmation-detail-copy {
		margin: 0;
		line-height: 1.5;
		display: flex;
		font-size: $font-body;
	}
}

.site-address-changer__affix {
	display: flex;
	align-items: center;
}

.site-address-changer__info-message {
	display: flex;
	align-items: center;
	gap: 4px;

	.site-address-changer__info-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	svg {
		fill: currentColor;
	}
}

.site-address-changer__select-icon {
	color: var( --color-neutral-light );
	margin-left: 6px;
	align-self: center;

	svg {
		fill: currentColor;
	}
}

.form-text-input-with-affixes__prefix,
.form-text-input-with-affixes__suffix {
	&:hover .site-address-changer__select-icon {
		color: var( --color-neutral-50 );

		svg {
			fill: currentColor;
		}
	}
}

.site-address-changer__select {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background-image: none;
	opacity: 0;
}

.site-address-changer__info {
	font-size: $font-body-small;
	margin-top: 24px;
	margin-bottom: 24px;

	.site-address-changer__message {
		@media ( min-width: $break-small ) {
			display: flex;
			flex-direction: column;
		}
		margin-bottom: 24px;
	}
}

.site-address-changer__details {
	.form-label {
		text-transform: uppercase;
		font-size: $font-body-extra-small;
		font-weight: 500;
	}

	.form-input-validation {
		padding-top: 6px;
		padding-right: 24px;
		padding-bottom: 0;
	}

	.form-input-validation.email-not-verified {
		padding-bottom: 0;

		&.already-sent {
			padding-bottom: 16px;
		}
	}

	.site-address-changer__resend-email-link {
		margin-left: 33px;
		margin-bottom: 16px;

		button {
			color: var( --color-link );
			cursor: pointer;
			font-size: $font-body-small;
		}
	}
}

.site-address-changer__only-owner-info {
	margin: 0 auto 10px;
	padding: 16px;

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0;
	}
}

.site-address-changer__content {
	p {
		font-size: $font-body-small;
		margin-bottom: 8px;
	}

	.form-section-heading {
		font-size: 1.25rem;
		margin: 0;
		padding: 10px 0 5px;
	}

	.site-address-changer__email-confirmation-banner {
		.gridicon {
			fill: var( --color-accent );
		}

		.banner__icon-circle {
			background-color: transparent !important;
		}
	}

	.components-checkbox-control__label {
		font-size: $font-body-small;
	}

	@include breakpoint-deprecated( '<480px' ) {
		.form-text-input-with-affixes__suffix {
			padding-left: 8px;
			padding-right: 8px;
		}
	}
}

.site-address-changer__modal-buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 24px;

	.components-button + .components-button {
		margin-left: 8px;
	}
}
