@use "@wordpress/base-styles/mixins";
@use "@automattic/jetpack-base-styles/style";

.jp-connection__connect-screen-layout {
	background: var(--jp-white);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
	border-radius: 4px;

	&__loading {
		display: none;
	}

	&__left,
	&__right {
		box-sizing: border-box;
	}

	&__left {
		padding: calc(var(--spacing-base) * 3);

		@include mixins.break-small {
			padding: 64px 96px;
		}

		.jetpack-logo {
			margin-bottom: 24px;
		}

		h2 {
			font-style: normal;
			font-weight: 700;
			font-size: 36px;
			line-height: 40px;
			color: var(--jp-black);
			margin-top: 32px;
			margin-bottom: 0;
		}

		h3 {
			font-style: normal;
			font-weight: 500;
			font-size: 24px;
			line-height: 32px;
			color: var(--jp-black);
			margin-top: 32px;
			margin-bottom: 0;
		}

		p,
		li {
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
		}

		p {
			color: #101517;
			margin: 16px 0;
		}

		a {
			color: var(--jp-black);
			text-decoration: underline;
			height: auto;
			font: inherit;
			padding: 0;

			&:hover {
				color: var(--jp-black);
				text-decoration-thickness: var(--jp-underline-thickness);
			}

			&:focus {
				color: var(--jp-black);
				box-shadow: none !important;
			}
		}

		ul {
			list-style-type: none;
			padding: 0;

			li {
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVHcEwFnwUInggGnggGnggHnAcAnwUFnQcAnwcGnwkFnQgGnQgFnwcGnQYFnQcFnAcGnQkDnwdhiL0pAAAAEnRSTlMAMF//f2Aw7yBQ3+9gcIBgcED+HDbkAAAAZklEQVR4Ae3LNwICARDDQC0+cv7/Y8mwV9odSfWIcf/+VegnGkIvDaGXKvTTn/Gz+Uf5xTL0K1XotS7fs5H6GHvvaO8d7c3j7rdgHne/A/PYt/cO+R42oYdN6OEQetiFHo4A//6dAXqtBEkmtWutAAAAAElFTkSuQmCC) no-repeat;
				background-size: 24px;
				padding-left: 30px;
				margin-bottom: 9px;
				color: var(--jp-black);
			}
		}
	}

	&__right {
		padding: 64px 0;

		img {
			max-width: 100%;
		}
	}

	&__two-columns {
		display: flex;
		flex-wrap: wrap;

		.jp-connection__connect-screen-layout__left {
			flex-grow: 1;
			flex-basis: 100%;

			@include mixins.break-xlarge {
				flex-basis: 52%;
			}
		}

		.jp-connection__connect-screen-layout__right {
			flex-grow: 1;
			flex-basis: 47%;
			background: #f9f9f6;
			display: none;

			@include mixins.break-xlarge {
				display: block;
			}
		}
	}
}

.rna {
	overflow: hidden;

	.jp-connection__connect-screen-layout__left {
		position: relative;
		z-index: 2;

		h2 {
			margin-top: 0;
			font-weight: 700;
		}

		h3 {
			margin-top: 24px;
		}

		@include mixins.break-small {
			padding: 4rem 6rem 4rem 4rem;
		}
	}

	.jp-connection__connect-screen-required-plan__pricing-card {

		/** Line up with the top of the product logo,
		* and mirror 96px horizontal padding seen in
		* .jp-connection__connect-screen-layout__left
		*/
		@include mixins.break-xlarge {
			position: absolute;
			top: calc(var(--spacing-base) * 9.25);
			right: calc(var(--spacing-base) * -45);
		}

		.jp-components__pricing-card {
			border-radius: var(--jp-border-radius-rna);
			width: 425px;
			max-width: 100%;

			&__title {
				margin-top: 0.625rem;
			}

			@include mixins.break-large {
				padding: 3rem;
			}
		}

		.components-button {
			margin-bottom: 0;
		}
	}

	.jp-backup-dashboard-promotion {

		ul.jp-product-promote li {
			margin-bottom: 0.75rem;
		}
	}

	.jp-connection__connect-screen-layout__color-blobs {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 363px;
		height: 677px;
		z-index: 1;

		clip-path: polygon(100% 0, 100% 100%, 0 0, 0 0);

		&__blue,
		&__yellow,
		&__green {
			position: absolute;
			filter: blur(50px);
			border-radius: 50%;
		}

		&__blue {
			width: 400px;
			height: 400px;
			right: -100px;
			top: -275px;
			z-index: 3;

			background-color: var(--jp-blue-5);
		}

		&__yellow {
			width: 250px;
			height: 250px;
			right: -25px;
			top: 10px;
			z-index: 2;

			background-color: var(--jp-yellow-5);
		}

		&__green {
			width: 300px;
			height: 300px;
			right: 0;
			top: 175px;
			z-index: 1;

			background-color: var(--jp-green-5);
		}

		@media ( min-width: 1080px ) {
			display: initial;
		}
	}
}
