@import "@automattic/color-studio/dist/color-variables";
@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@automattic/components/src/styles/typography";

$stats-utm-builder-modal-header-margin: 76px;
$stats-utm-builder-help-padding: 38px;
$stats-utm-builder-vertical-spacing: 24px;
$modal-content-padding: 32px;

.stats-utm-builder__body-modal-open {
	// Not added by default on Calypso
	overflow: hidden;
}

.stats-utm-builder__overlay {
	@media (min-width: $break-large) {
		.components-modal__frame {
			max-height: 85%;
		}
	}

	.components-modal__header {
		font-family: $font-recoleta;
	
		// Overwrite the modal's class
		h1.components-modal__header-heading {
			font-size: 32px;
			line-height: 39px;
			font-weight: 400;
		}
	}
}

.stats-utm-builder-modal {
	display: flex;

	@media (max-width: $break-small) {
		flex-wrap: wrap;
		gap: $stats-utm-builder-vertical-spacing;
	}
}

.stats-utm-builder__fields {
	flex: 1 0 55%;
	padding: 0 32px 0 0;
	width: 500px;
	display: flex;
	flex-direction: column;
	gap: $stats-utm-builder-vertical-spacing;

	@media (max-width: $break-small) {
		padding: 0;
		flex: 1 auto;
	}
}

.stats-utm-builder__form-fieldset {
	margin-bottom: 0;
}

.stats-utm-builder__copy-area {
	display: flex;
	align-items: center;
	gap: 12px;
}

.stats-utm-builder__copy-button {
	align-self: baseline;
}

.stats-utm-builder__copy-confirmation {
	display: flex;
	align-items: center;
	gap: 4px;
	color: $studio-jetpack-green-50;
	fill: $studio-jetpack-green-50;
	opacity: 1;
	transition: opacity 0.5s ease;

	&.fade-out {
		opacity: 0;
	}
}

.stats-utm-builder__url {
	background-color: $studio-gray-0;
	border: 1px solid var(--color-neutral-10);
	padding: 6px;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word;
}

.stats-utm-builder__help {
	flex: 1 0 45%;
	padding: 0 0 0 $stats-utm-builder-help-padding;
	max-width: 35em;

	@media (max-width: $break-small) {
		padding: $stats-utm-builder-vertical-spacing 0 0 0;
		position: relative;
	}

	section {
		margin-bottom: 24px;
	}

	section p {
		margin-bottom: 0;
	}
}

.stats-utm-builder__help-bg {
	width: 100%;
	height: 100%;
	margin: -$stats-utm-builder-modal-header-margin 0 0 (-$stats-utm-builder-help-padding);
	position: absolute;
	background-color: $studio-gray-0;
	z-index: -1;

	@media (max-width: $break-small) {
		width: unset;
		height: unset;
		inset: -$modal-content-padding;
		top: 0;
		margin: 0;
	}
}

.stats-utm-builder__form-field {
	max-width: 700px;

	& + .stats-utm-builder__form-field {
		margin-top: 12px;
	}
}

.stats-utm-builder__label {
	font-family: $font-sf-pro-text;
	font-weight: 600;
	margin-bottom: 5px;
}

.stats-utm-builder__help-section-parameter {
	font-family: $code;
	background-color: $studio-gray-5;
	padding: 2px 4px;
	margin: 6px 0;
	display: inline-block;
}

.stats-utm-builder__help-section-parameter-example {
	font-style: italic;
	color: $studio-gray-40;
}

.stats-utm-builder__trigger {
	display: flex;
	justify-content: center;

	&.components-button {
		color: $studio-black;
		border-radius: 4px;
	}
}
