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


.layout__content {
	overflow: visible;
}
.checkout-thank-you {
	box-sizing: border-box;
	position: static;
	text-align: center;
	width: 100%;

	@include breakpoint-deprecated( "<660px" ) {
		background: transparent;
		padding: 14px;
	}

	&.main {
		max-width: 960px;
	}

	// Design i2 overrides
	&.is-redesign-v2 {
		--color-accent: var(--studio-blue-50);
		--color-accent-60: var(--studio-blue-60);

		&.main {
			max-width: 750px;
			padding: 0;
			display: flex;
			flex-direction: column;
			text-align: initial;
		}

		.thank-you {
			margin-left: 24px;
			margin-right: 24px;
		}
	}
}

.checkout-thank-you__content {
	padding: 0;
}

.checkout-thank-you__domain-registration-details-compact .purchase-detail {
	border-radius: 0;
	margin: 0 auto;

	.purchase-detail__required-notice {
		display: none;
	}

	&:first-child {
		border-bottom: none;
		border-radius: 2px 2px 0 0;
		margin-top: 16px;

		.purchase-detail__required-notice {
			display: block;
		}
	}

	&:last-child {
		border-bottom: 1px solid var(--color-neutral-0);
		border-radius: 0 0 2px 2px;
	}
}

.checkout-thank-you__domain-mapping-details,
.checkout-thank-you__failed-purchases-details {
	.purchase-detail__icon {
		top: 30%;
	}

	.purchase-detail__text {
		text-align: left;
	}
}

.checkout-thank-you__domain-mapping-details {
	.purchase-detail__description {
		margin: 0;
	}
	.purchase-detail__image {
		@include break-mobile {
			width: auto;
			margin-right: 1em;
		}
	}
	.purchase-detail__content {
		padding: 32px 0 0;

		@include break-mobile {
			padding: 32px;
		}
	}
}

.checkout-thank-you__domain-mapping-details-nameservers,
.checkout-thank-you__failed-purchases-details-list {
	border-left: solid 5px var(--color-neutral-5);
	list-style: none;
	margin-left: 0;
	padding-left: 15px;
	text-align: left;
}

.checkout-thank-you__purchase-details-list {
	text-align: center;

	@include breakpoint-deprecated( ">660px" ) {
		margin: 0 24px;
		padding-bottom: 48px;
	}
}

// Header subcomponent styles
.checkout-thank-you__header {
	position: relative;
	color: var(--color-text-subtle);
	padding: 12px 24px 48px;
	text-align: center;

	@include breakpoint-deprecated( ">660px" ) {
		padding-bottom: 72px;
	}
}
.checkout-thank-you__header::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	border-top: 1px solid #fff;
}

.checkout-thank-you__header-content {
	margin: 0 auto;
	max-width: 750px;
}

.checkout-thank-you__header-icon {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 132px;
	height: 132px;
}

.checkout-thank-you__header-copy {
	width: 100%;
}

.checkout-thank-you__success-messages,
.checkout-thank-you__success-message-item {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.checkout-thank-you__success-messages {
	margin-top: 25px;
}

.checkout-thank-you__success-message-item {
	display: flex;
	text-align: left;
	margin-top: 15px;
	font-size: $font-title-small;
	font-weight: 400;
	word-break: break-word;

	.gridicons-checkmark-circle {
		position: relative;
		flex: 24px 0 0;
		top: 1px;
		fill: var(--color-success);
		margin-right: 11px;
	}
}

.checkout-thank-you__header-heading,
.checkout-thank-you__success-message-item {
	clear: none;
}

.checkout-thank-you__header-button {
	margin: 2em 0;

	button:nth-child(2) {
		margin-left: 10px;
	}

	.button > .gridicon.gridicons-external {
		margin-left: 6px;
	}
}

.checkout-thank-you__header-heading {
	font-size: $font-title-medium;
	font-weight: 400;
	margin: 24px 0 8px;
}

// eCommerce Plan Thank You styles
.checkout-thank-you__atomic-store-email-instruction {
	margin-top: 18px;
}

// Footer Subcomponent styles
.checkout-thank-you__footer {
	padding: 32px 20px;

	@include breakpoint-deprecated( ">660px" ) {
		font-size: $font-body;
		padding: 60px 24px;
		text-align: left;
	}

	.happiness-support {
		margin-left: auto;
		margin-right: auto;
		max-width: 634px;
	}
}

.checkout-thank-you__verification-notice,
.checkout-thank-you__verified-required {
	width: 100%;
	max-width: 500px;
	text-align: left;
	margin: 0 auto;
}
.checkout-thank-you__verified-required {
	margin-top: 30px;
}
.checkout-thank-you__verification-notice-email {
	word-break: break-word;
}

.checkout-thank-you .checkout-thank-you__gsuite-support-link {
	color: inherit;
	text-decoration: underline;
}

// Jetpack thank you styles
.checkout-thank-you__jetpack-plugins {
	margin: 0 auto;
}

.checkout-thank-you__jetpack .button.thank-you-card__button {
	font-weight: inherit;
}

.checkout-thank-you__jetpack-error-card {
	text-align: left;
}

.checkout-thank-you__jetpack-error-heading {
	font-size: $font-title-small;
	font-weight: 400;
	line-height: 32px;
	margin-top: 0;
}

.checkout-thank-you__jetpack-error-explanation {
	color: var(--color-text-subtle);
	font-size: $font-body-small;
	font-style: italic;
	font-weight: 400;
}

.checkout-thank-you__jetpack-description-in-actions a {
	color: inherit;
	text-decoration: underline;
}

.checkout-thank-you__jetpack-action-buttons {
	display: flex;
}

.checkout-thank-you__jetpack {
	max-width: 500px;
	margin: 0 auto;

	&.is-errored .thank-you-card__description {
		margin-bottom: 0;
	}
	.thank-you-card__action .button {
		max-width: 45%;
	}

	.plan-thank-you-card {
		&.is-personal-plan,
		&.is-premium-plan,
		&.is-business-plan {
			.thank-you-card {
				color: var(--color-text);
				background-color: var(--color-surface);
				box-shadow:
					0 0 0 1px color-mix(in srgb, var(--color-neutral-10) 50%, transparent),
					0 1px 2px var(--color-neutral-0);
			}
		}
	}

	.thank-you-card__header {
		color: var(--color-text);
		background-color: var(--color-surface);
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-neutral-10) 50%, transparent);
	}

	.thank-you-card__description {
		width: 340px;
	}
}

/* Gridicon Floaties */
@keyframes floating {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(0) translateX(0) rotate(0);
	}
	70% {
		opacity: 1;
		transform: scale(1) translateY(30px) translateX(30px) rotate(-20deg);
	}
	100% {
		opacity: 0;
		transform: scale(0.8) translateY(0) translateX(0) rotate(0);
	}
}

@keyframes focus {
	0%,
	100% {
		opacity: 0.1;
		filter: blur(1px);
	}
	70% {
		opacity: 0.2;
		filter: blur(4px);
	}
}

.checkout-thank-you__floaties {
	pointer-events: none;
	position: fixed;
	top: 40px;
	right: 0;
	bottom: 0;
	max-height: calc(100vw - 30px);
	opacity: 0.1;
	animation: focus 5s infinite ease-in-out;

	@include breakpoint-deprecated( ">660px" ) {
		left: 0;
	}

	@include breakpoint-deprecated( "<660px" ) {
		transform: scale(0.8);
		left: 130px;
		top: -120px;
	}

	@include breakpoint-deprecated( ">960px" ) {
		transform: scale(1.2);
	}

	@include breakpoint-deprecated( ">1040px" ) {
		transform: scale(1.5);
	}

	.gridicon {
		fill: var(--color-text-subtle);
		position: absolute;
		height: auto;
		width: auto;
		opacity: 0;
		transform: scale(0.8);
		animation: floating 10s infinite ease-in-out;
	}
	.gridicons-add {
		top: 0;
		left: calc(50% - 320px);
		height: 150px;
		width: 150px;
	}
	.gridicons-aside {
		top: 150px;
		left: calc(50% + 310px);
		height: 70px;
		width: 70px;
		animation-delay: 6s;
	}
	.gridicons-attachment {
		height: 60px;
		width: 60px;
		top: 70px;
		left: calc(50% + 220px);
		animation-delay: 7s;
	}
	.gridicons-audio {
		height: 80px;
		width: 80px;
		top: 170px;
		left: calc(50% - 220px);
		transform: rotate(-30deg);
		animation-delay: 6s;
	}
	.gridicons-bell {
		height: 120px;
		width: 120px;
		top: 10px;
		left: calc(50% + 290px);
		animation-delay: 10s;
	}
	.gridicons-book {
		top: 340px;
		left: calc(50% - 300px);
		height: 100px;
		width: 100px;
		animation-delay: 1s;
	}
	.gridicons-camera {
		top: 300px;
		left: calc(50% + 200px);
		height: 160px;
		width: 160px;
		transform: rotate(-10deg);
		animation-delay: 3s;
	}
	.gridicons-comment {
		left: calc(50% + 130px);
		top: 167px;
		height: 140px;
		width: 140px;
		transform: rotate(12deg);
	}
	.gridicons-globe {
		height: 100px;
		width: 100px;
		top: 220px;
		left: calc(50% - 330px);
		animation-delay: 3s;
	}
	.gridicons-pencil {
		height: 220px;
		width: 220px;
		top: -110px;
		left: calc(50% + 110px);
		animation-delay: 1s;
	}
	.gridicons-phone {
		height: 80px;
		width: 80px;
		top: 130px;
		left: calc(50% - 390px);
		animation-delay: 6s;
	}
	.gridicons-reader {
		height: 130px;
		width: 130px;
		top: 360px;
		left: calc(50% - 170px);
		transform: rotate(12deg);
		animation-delay: 8s;
	}
	.gridicons-star {
		height: 90px;
		width: 90px;
		top: 380px;
		left: calc(50% + 60px);
	}
	.gridicons-video {
		top: 245px;
		left: calc(50% - 160px);
		animation-delay: 3s;
	}
	.gridicons-align-image-right {
		top: 280px;
		left: calc(50% + 90px);
		animation-delay: 7s;
	}
	.gridicons-bookmark {
		top: 460px;
		height: 110px;
		width: 110px;
		left: calc(50% - 440px);
		animation-delay: 5s;
	}
	.gridicons-briefcase {
		top: 320px;
		height: 80px;
		width: 80px;
		left: calc(50% - 450px);
		animation-delay: 1s;
	}
	.gridicons-calendar {
		top: 460px;
		left: calc(50% + 300px);
		height: 80px;
		width: 80px;
		animation-delay: 2s;
	}
	.gridicons-clipboard {
		top: 240px;
		left: calc(50% + 290px);
		height: 50px;
		animation-delay: 6s;
	}
	.gridicons-cloud-upload {
		top: 180px;
		left: calc(50% - 280px);
		height: 40px;
		width: 40px;
		animation-delay: 5s;
	}
	.gridicons-cog {
		top: 110px;
		left: calc(50% + 160px);
		height: 40px;
		width: 40px;
		animation-delay: 1s;
	}
	.gridicons-customize {
		top: 240px;
		height: 40px;
		width: 40px;
		left: calc(50% - 400px);
		animation-delay: 1s;
	}
	.gridicons-help {
		top: 460px;
		left: calc(50% + 160px);
		height: 90px;
		width: 90px;
		animation-delay: 1s;
	}
	.gridicons-link {
		top: 60px;
		left: calc(50% - 160px);
		height: 50px;
		width: 50px;
		transform: rotate(-45deg);
		animation-delay: 5s;
	}
	.gridicons-lock {
		top: 60px;
		left: calc(50% - 400px);
		height: 50px;
		width: 50px;
		animation-delay: 6s;
	}
	.gridicons-pages {
		top: 70px;
		left: calc(50% + 70px);
		height: 50px;
		width: 50px;
		animation-delay: 8s;
	}
	.gridicons-share {
		top: 280px;
		left: calc(50% + 360px);
		animation-delay: 2s;
	}
	.gridicons-stats {
		top: 470px;
		left: calc(50% - 270px);
		height: 80px;
		width: 80px;
		animation-delay: 9s;
	}
}

.checkout-processing-screen__content {
	position: relative;
	z-index: 1;
	max-width: 500px;
	margin: 0 auto;
	padding-bottom: 30px;
	color: var(--color-text-inverted);
}

/* Title */
@keyframes fade-in {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	100% {
		transform: translateY(-80px);
		opacity: 1;
	}
}

.is-section-checkout-thank-you {
	.layout__content {
		padding-right: 0;
		padding-left: 0;
	}
}

.is-section-checkout-pending,
.is-section-checkout-thank-you {
	&:not( :has( .step-container-v2 ) ) {
		background: var( --studio-white, #fff );
	}
}

.is-section-checkout-pending .empty-content__title,
.is-section-checkout-thank-you .empty-content__title {
	font-size: $font-title-small;
	font-weight: normal;
}

.is-section-checkout-pending .empty-content__line,
.is-section-checkout-thank-you .empty-content__line {
	font-size: $font-body;
	font-weight: normal;
}

.is-section-checkout-pending {
	&.has-no-sidebar {
		.layout__content {
			padding: 0;
			overflow: hidden;
		}
	
		.checkout-thank-you__pending {
			.wpcom__loading.checkout__pending-content {
				margin: calc( 60px + 32vh) auto 0;
			}
		}
	}
}

.checkout-thank-you__wordpress-logo {
	height: 180px;
	width: 180px;
	fill: var(--color-wpcom);
	margin: 0 auto;
	display: block;
	transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
	transform: scale(0.13333);
	transform-origin: 50% 0;

	&.is-large {
		transform: scale(1);
	}
}

@mixin jetpack-primary-button() {
	// button colors imported from packages/calypso-color-schemes/src/shared/color-schemes/_jetpack-cloud.scss
	background-color: var(--studio-jetpack-green-50);
	border-color: var(--studio-jetpack-green-50);
	color: var(--color-text-inverted);

	&:hover,
	&:focus {
		background-color: var(--studio-jetpack-green-60);
		border-color: var(--studio-jetpack-green-60);
		color: var(--color-text-inverted);
	}

	&[disabled],
	&:disabled,
	&.disabled {
		color: var(--color-neutral-20);
		background-color: var(--color-surface);
		border-color: var(--color-neutral-5);
	}
}

.licensing-thank-you-auto-activation__product-info-loading {
	@include placeholder( --color-neutral-20 );
}

.licensing-thank-you-auto-activation__select {
	.select-dropdown__header {
		.select-dropdown__header-text {
			padding-right: 10px;
		}
	}
	.licensing-thank-you-auto-activation__dropdown-item-flex-container {
		display: flex;
		justify-content: space-between;
		&.has-seperator {
			border-top: 1px solid var(--color-neutral-10);
		}
		> span {
			display: block;
		}
	}
	.select-dropdown__options {
		max-height: 220px;
		overflow-y: scroll;
	}
	a.select-dropdown__item {
		padding: 0 16px;
		text-decoration: none;
		&:hover {
			color: var(--studio-jetpack-green);
		}
		.select-dropdown__item-text {
			display: block;
			position: static;
			.licensing-thank-you-auto-activation__dropdown-item-text {
				padding-right: 10px;
			}
		}
		&::before {
			display: none;
		}
		&.is-selected {
			background-color: var(--color-neutral-10);
		}
	}
}

.licensing-activation .licensing-thank-you-manual-activation-instructions__button.button {
	margin-top: 0;
}

.jetpack-license-key-clipboard {
	margin-top: 40px;

	.jetpack-license-key-clipboard__helper-text {
		color: var(--color-neutral-60);
		font-size: 0.875rem;
		margin-top: 8px;
	}
}

.jetpack-license-key-clipboard__container {
	display: flex;
	margin-top: 8px;
}

.jetpack-license-key-clipboard__container .jetpack-license-key-clipboard__input.form-text-input {
	margin-right: 8px;

	background-color: var(--studio-gray-0);

	border: none;

	&.is-loading {
		@include placeholder( --color-neutral-20 );
	}
}

.jetpack-standalone-activation-instructions .jetpack-license-key-clipboard {
	margin: 32px 0 0;
}

.jetpack-standalone-activation-instructions__external-link {
	display: block;
	margin: 57.5px 0;
}

.licensing-activation .jetpack-license-key-clipboard__button.button {
	margin-top: 0;
	min-width: 100px;
}

.jetpack-checkout-thank-you {
	.jetpack-checkout-thank-you__card,
	.jetpack-checkout-thank-you__card-loading {
		box-shadow: 0 0 40px 0 #00000014;

		width: 100%;
		max-width: none;
		padding: 16px;

		@include break-mobile {
			width: auto;
			max-width: 650px;
			padding: 96px;
		}

		.jetpack-checkout-thank-you__main-message {
			font-size: $font-headline-small;
			font-weight: 700;
			margin-bottom: 24px;

			@include break-mobile {
				font-size: $font-headline-medium;
			}
		}

		.jetpack-checkout-thank-you__sub-message-loading,
		.jetpack-checkout-thank-you__sub-message {
			font-size: $font-title-medium;
			font-weight: 500;
			margin-bottom: 64px;
		}

		.jetpack-checkout-thank-you__email-message-loading,
		.jetpack-checkout-thank-you__email-message {
			margin-top: -32px;
			margin-bottom: 64px;
		}

		.jetpack-checkout-thank-you__button,
		.jetpack-checkout-thank-you__button:visited {
			border-radius: calc(2px * 2);
			@include jetpack-primary-button;
		}
	}

	.jetpack-checkout-thank-you__sub-message-loading,
	.jetpack-checkout-thank-you__email-message-loading {
		@include placeholder( --color-neutral-20 );
	}
}

main.akismet-checkout-thank-you {
	max-width: 1000px;

	.akismet-checkout-thank-you__main-message,
	.akismet-checkout-thank-you__email-message,
	.akismet-checkout-thank-you__overlap-notice,
	.akismet-checkout-thank-you__email-message-loading {
		margin: 1em 0;
		letter-spacing: -0.02em;

		@include break-mobile {
			max-width: 450px;
		}
	}

	.akismet-checkout-thank-you__email-message,
	.akismet-checkout-thank-you__overlap-notice {
		font-size: $font-title-small;
	}

	.akismet-checkout-thank-you__main-message {
		font-weight: 400;
		font-size: $font-headline-medium;
		line-height: 1.2;
		margin-top: 0;

		@include break-mobile {
			margin-top: 1.5em;
		}

		&-loading {
			@include placeholder( --color-neutral-20 );
		}
	}

	.akismet-checkout-thank-you__emoji {
		font-size: 40px;
	}

	.akismet-checkout-thank-you__card {
		box-shadow: 0 0 40px 0 #00000014;
		margin-top: var(--masterbar-checkout-height);
		padding: 2rem;
		margin-bottom: 0;

		@include break-mobile {
			background-image: url(calypso/assets/images/akismet/akismet-thank-you-background.jpg);
			background-size: cover;
			background-position: bottom;

			padding: 5rem;
		}

		@include break-large {
			margin-top: calc(var(--masterbar-checkout-height) + 24px);
		}
	}

	.akismet-checkout-thank-you__api-key-header {
		font-weight: 700;
		font-size: 1.25rem;
		line-height: 1.2;
		margin-top: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.akismet-checkout-thank-you__key-clipboard {
		display: flex;
		margin-top: 16px;
		max-width: 500px;
		margin-bottom: 2rem;

		input.form-text-input.akismet-checkout-thank-you__key-clipboard-input {
			font-size: 1.5rem;
			margin-right: 16px;
			margin-left: 0;
			background-color: var(--studio-gray-10);
			color: var(--color-text);
			border: none;
		}

		.button {
			min-width: 100px;
			font-size: 1.25rem;
		}

		@include break-mobile {
			margin-top: 0;
		}

		&.loading {
			@include placeholder( --color-neutral-20 );
			padding: 0.5rem;
			margin: 0 16px;
			width: 200px;
		}
	}

	.akismet-checkout-thank-you__footer-img {
		background-image: url(calypso/assets/images/akismet/akismet-thank-you-background-mobile.png);
		background-size: cover;

		width: 100%;
		height: 100vw;

		@include break-mobile {
			display: none;
		}
	}

	.akismet-checkout-thank-you__email-message-loading {
		@include placeholder( --color-neutral-20 );
	}
}

.jetpack-instruction-list {
	margin: 0;

	list-style: none;
	counter-reset: item;
}

.jetpack-instruction-list__item {
	display: flex;
	flex-direction: row;
	margin-bottom: 1.5rem;

	strong {
		font-weight: 700;
	}

	&::before {
		content: counter(item);
		counter-increment: item;

		display: inline-flex;
		justify-content: center;
		align-items: center;

		min-width: 1.75em;
		height: 1.75em;
		margin-inline-end: 0.75em;

		background-color: var(--studio-gray-5);
		border-radius: 50%;
		color: var(--color-text-black);

		font-weight: 700;
	}
}

.jetpack-instruction-list__item .gridicon {
	margin-bottom: -3px;
}

.failed-purchases-page {
	padding-top: 72px;
	background: #fff;
	height: calc(100vh - 72px);
}

main.checkout-thank-you__pending {
	.wpcom__loading {
		margin: 0 auto;
	}
	.wpcom__loading-title {
		height: auto;
	}

	.checkout__pending-content {
		&.wpcom__loading {
			margin: calc( 32vh - 19px ) auto 0;
		}
	}
}
