@use "@wordpress/base-styles/mixins";

.jp-connection__connect-screen-layout__left {

	/**
	  * Start with 100% width;
	  * then account for a 384px pricing card that floats to the right;
	  * finally give 32px of padding between content and the pricing card
	  */
	@include mixins.break-xlarge {
		width: calc(100% - 384px - var(--spacing-base) * 4);
	}
}

.jp-connection__connect-screen-required-plan {

	@include mixins.break-xlarge {
		position: relative;
		background: linear-gradient(to right, #fff 70%, #f9f9f6 30%);
	}

	&__loading {
		display: none;
	}

	/** There's a header above this list, which makes the top spacing
	  * look a bit taller than it actually is
	  */
	ul.jp-product-promote {
		margin-block-start: calc(var(--spacing-base) * 3);
		margin-block-end: calc(var(--spacing-base) * 4);
	}

	&__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) * 8);
			right: calc(var(--spacing-base) * 12);
		}

		.jp-action-button--button.components-button {
			width: 100%;
			height: auto;
			font-size: 18px;
			font-weight: 500;
			background: var(--jp-black) !important;
			color: var(--jp-white) !important;
			border-radius: var(--jp-border-radius);
			padding: 14px 24px;
			margin: 24px 0 32px;
			justify-content: center;
			align-items: center;

			&:disabled {
				background: var(--jp-gray) !important;
				color: var(--jp-gray-20) !important;
			}
		}

		.terms-of-service {
			margin-top: calc(var(--spacing-base) * 4);
			margin-bottom: var(--spacing-base);
		}
	}

	&__with-subscription {
		margin-top: calc(var(--spacing-base) * 4);

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 1ch;
		line-height: 1;

		.jp-action-button--button.components-button.is-primary {
			display: inline;
			color: var(--jp-black) !important;
			background: inherit !important;
			text-decoration: underline;

			width: auto;
			min-width: 0;
			height: auto;
			font: inherit;
			padding: 0;

			&:hover {
				background: inherit;
				text-decoration-thickness: var(--jp-underline-thickness);
			}

			&:focus {
				background: inherit;
				box-shadow: none !important;
			}
		}

		.jp-components-spinner__inner,
		.jp-components-spinner__outer {
			border-top-color: var(--jp-black);
			border-right-color: var(--jp-black);
		}
	}
}
