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

body.ecommerce-trial-upgraded,
body.business-trial-upgraded {
	background-color: var(--color-surface);
	font-family: $font-sf-pro-text;

	&.is-section-plans .layout__content {
		padding-left: 0 !important;
	}

	.trial-upgrade-confirmation__header {
		text-align: center;
		padding: 20px 0;
		margin-top: 20px;

		@media (max-width: $break-mobile) {
			text-align: left;
		}

		.trial-upgrade-confirmation__title {
			font-size: $font-title-large;
			padding: 0 20px;

			@media (max-width: $break-mobile) {
				font-size: $font-title-medium;
				text-align: left;
			}
		}

		.trial-upgrade-confirmation__subtitle {
			padding: 20px;
			font-size: $font-body;

			@media (max-width: $break-mobile) {
				padding-bottom: 0;
			}

			.trial-upgrade-confirmation__subtitle-line {
				display: block;
				max-width: 595px;
				margin: auto;

				@media (max-width: $break-mobile) {
					display: inline;
					text-align: left;

					// Add space between sentences when they are inline
					&::after {
						content: " ";
					}
				}
			}
		}
	}

	.trial-upgrade-confirmation__tasks {
		display: grid;
		grid-template-columns: repeat(auto-fill, 320px);
		grid-column-gap: 32px;
		grid-row-gap: 32px;
		margin: 55px 0;
		justify-content: center;

		@media (max-width: $break-mobile) {
			margin-top: 10px;
			padding: 0 20px;
			grid-template-columns: repeat(1, auto);
		}
	}

	.trial-upgrade-confirmation__loading {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}
