@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/components/src/styles/typography";

.cancel-purchase-form__site-slug {
	margin-left: 0.25rem;
	background-color: var(--studio-gray-0);
	color: var(--studio-gray-70);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 4px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	text-align: center;

	@include break-small {
		max-width: calc(100vw - 400px);
		text-align: left;
	}
}

.cancel-purchase-form__feedback,
.cancel-purchase-form,
.cancel-purchase-form__remove-plan {
	.cancel-purchase-form__buttons {
		max-width: 350px;
		display: flex;
	}
}

.cancel-purchase-form__feedback,
.cancel-purchase-form__atomic-revert,
.cancel-purchase-form__remove-plan {
	max-width: 600px;
	margin: 0 auto 1.25rem;
}

.cancel-purchase-form__feedback, .cancel-purchase-form__remove-plan {
	margin-bottom: 0;
	max-width: 350px;
}

.blank-canvas .formatted-header .formatted-header__subtitle {
	font-family: $font-sf-pro-text;
	font-size: 0.875rem;
	font-weight: 400;
	margin: 0 auto;
	line-height: 20px;
	letter-spacing: -0.15px;
	color: var(--studio-gray-50);
}

.blank-canvas .cancel-purchase-form__feedback .formatted-header .formatted-header__subtitle {
	max-width: 320px;
}

.cancel-purchase-form__remove-plan .formatted-header__subtitle {
	margin: 0 auto;
}

.cancel-purchase-form__feedback-questions {
	font-family: $font-sf-pro-text;
	margin: 0 auto;
}

.cancel-purchase-form__feedback-question {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.31px;
	text-align: left;
}

.cancel-purchase-form__atomic-revert {
	.formatted-header {
		margin-bottom: 1.5rem;
	}

	> p {
		color: var(--studio-gray-60);
		font-size: 0.875rem;

		@include break-small {
			text-align: center;
		}
	}

	.components-base-control__field {
		font-family: $font-sf-pro-text;
		margin-bottom: 1.25rem;
		background-color: var(--studio-white);
		padding: 1.2rem;
		border-radius: 4px;
		border: 1px solid var(--studio-gray-5);
		display: flex;
		align-items: center;

		.components-checkbox-control__label {
			font-family: $font-sf-pro-text;
			line-height: 20px;
			font-size: 0.875rem;
			color: var(--studio-gray-100);
			text-wrap: pretty;
		}

		.components-checkbox-control__input-container,
		.components-checkbox-control__input[type="checkbox"],
		svg.components-checkbox-control__checked {
			width: 1rem;
			height: 1rem;
			margin-top: 0.125rem;
		}
	}

	.cancel-purchase-form__atomic-revert-checkbox-enabled {
		.components-base-control__field {
			border: 1px solid var(--color-accent);
			background: #f9fbfd;
		}
	}
}


.cancel-purchase-form__atomic-revert,
.cancel-purchase-form__remove-plan {
	strong.is-highlighted {
		font-size: 0.75rem;
		display: inline-block;
		background-color: var(--studio-yellow-20);
		padding: 0 0.625rem;
		border-radius: 4px;
		color: var(--studio-yellow-80);
	}
}

.info-popover.cancel-purchase-form__atomic-revert-more-info {
	vertical-align: middle;
}

.info-popover__tooltip.cancel-purchase-form__atomic-revert-more-info .popover__inner {
	max-width: 400px;
}

.cancel-purchase-form__backups {
	display: flex;
	gap: 1rem;
	align-items: center;
	border: 1px solid var(--studio-gray-5);
	padding: 12px 10px 12px 20px;
	font-size: 0.75rem;
	border-left: 3px solid var(--color-accent);

	h4 {
		color: var(--studio-gray-70);
		font-weight: 600;
		margin-bottom: 0;
		font-size: 0.875rem;
	}

	p {
		margin-bottom: 0;
	}

	a {
		font-size: 0.75rem;
		padding: 0.5rem;
		border-radius: 2px;
		height: 28px;
	}
}

.cancel-purchase-form__actions {
	font-family: $font-sf-pro-text;
	display: block;
	margin: 0 auto 2rem;
	text-align: center;
	overflow: hidden;
}

.cancel-purchase-form__buttons {
	position: relative;
	padding: 3px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;

	.components-button {
		font-size: 0.875rem;
		font-weight: 500;
		flex: 1;
		height: auto;
		padding: 0.625rem 1rem;
		border-radius: 4px;
		justify-content: center;
	}
}

.cancel-purchase-form__buttons.cancel-purchase-form__atomic_revert_step-buttons {
	justify-content: center;
	.components-button {
		flex: initial;
	}
}

.blank-canvas .formatted-header .formatted-header__title {
	font-size: 2rem;
}

.cancel-purchase-form__upsell {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	gap: 20px;

	.formatted-header.is-without-subhead {
		text-align: initial;
		margin: 20px 0;

		> .formatted-header__title {
			font-size: 2.25rem;
			line-height: 1.1;

			@include break-small {
				font-size: 2.75rem;
			}
		}
	}
}

.cancel-purchase-form__upsell-subheader {
	color: var(--studio-gray-70);
}

.cancel-purchase-form__upsell-content {
	display: flex;
	flex-direction: column;
	flex: 0 1 535px;
}

.cancel-purchase-form__upsell-text {
	line-height: 1.8;
}

.cancel-purchase-form__upsell-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
	margin: 2.2rem 0;

	> .components-button {
		flex-grow: 1;
		padding: 0 1.5rem;
		height: 40px;
		justify-content: center;

		@include break-small {
			flex-grow: 0;
		}
	}
}

.cancel-purchase-form__upsell-image-container {
	flex: 0 1 400px;
	text-align: center;
}

.blank-canvas.cancel-purchase-form {
	.precancellation-chat-button__main-button {
		color: var(--studio-gray-100);
		span {
			border-bottom: 1px solid var(--studio-gray-100);
		}
	}

	.blank-canvas__back {
		z-index: 1;
		font-size: 0.875rem;
	}

	.components-base-control__label {
		text-transform: none;
	}

	.components-base-control__field {
		.components-input-control__container {
			color: var(--studio-gray-70);
			border-radius: 4px;
		}

		.components-input-control__label {
			text-transform: initial;
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: -0.32px;
			white-space: break-spaces;
			color: var(--studio-gray-60);
		}
	}

	.blank-canvas__header {
		padding: 0 1rem;
		margin-bottom: 3rem;
		box-shadow: none;

		.wordpress-logo {
			display: none;

			@include break-small {
				display: block;
			}
		}
	}

	.blank-canvas__header-title {
		z-index: 0;
		top: 3rem;
		left: 1rem;

		@include break-small {
			top: unset;
			left: 0;
		}
	}

	.blank-canvas__content {
		padding: 0 1rem;
	}

	.blank-canvas__footer {
		padding: 0;
		position: static;
		box-shadow: none;
	}
}

.cancel-purchase-form__edu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	gap: 20px;
	max-width: 600px;

	.formatted-header.is-without-subhead {
		text-align: initial;
		margin: 0;

		> .formatted-header__title {
			font-size: 2.25rem;
			line-height: 1.1;
			margin: 0;

			@include break-small {
				font-size: 2.75rem;
			}
		}
	}
}

.cancel-purchase-form__edu-header-group {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 20px;
}

.cancel-purchase-form__edu-header-text-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cancel-purchase-form__edu-image-container {
	display: none;

	@include break-small {
		display: block;
		width: 138px;
		flex: 0 0 138px;
	}
}

.cancel-purchase-form__edu-buttons {
	border-top: 1px solid #f0f0f0;
	text-align: center;
	padding-top: 30px;
	margin-top: 30px;

	p {
		margin-bottom: 0.5em;
	}
}

.cancel-purchase-form__edu-icon-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;

	> li {
		display: flex;
		flex-direction: row;
		gap: 15px;
		margin: 0;
	}
}

.cancel-purchase-form__edu-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	background-color: #50575e;

	.material-icon {
		width: 24px;
		height: 24px;
		fill: #fff;
	}
}

.cancel-purchase-form__edu-text {
	.components-button.is-link {
		font-size: inherit;
	}

	ul {
		margin-left: 2rem;
	}

	li {
		margin: 0.75rem 0;
	}
}

.cancel-purchase-form__remove-plan-text {
	display: block;

	&:not(:last-child) {
		margin-bottom: 1rem;
	}
}

.cancel-purchase-form__notice-container {
	display: flex;
	justify-content: center;
}

.cancel-purchase-form__notice {
	margin-bottom: 24px;
	align-self: center;
	width: fit-content;
	max-width: 500px;
}
