@import '@wordpress/base-styles/breakpoints';
@import '@automattic/onboarding/styles/mixins';

.plans {
	.step-container {
		padding: 0;

		.step-wrapper__header {
			.formatted-header {
				margin: 20px 0 40px 0;
				@include break-small {
					margin: 36px 0 58px 0;
				}

				h1.formatted-header__title {
					font-family: Recoleta, 'Noto Serif', Georgia, 'Times New Roman', Times, serif;
					font-size: 2.25rem;
					font-weight: 500;
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 2.5rem;
					padding: 0 20px;
					text-align: center;
					letter-spacing: 0.2px;

					@include break-mobile {
						font-size: 2.75rem;
						/* stylelint-disable-next-line declaration-property-unit-allowed-list */
						line-height: 3rem;
					}
				}

				.formatted-header__subtitle {
					text-align: center;
					font-size: 1rem;
				}
			}
		}

		.plans__loading-container {
			margin-top: 18em;
		}

		&.is-wide-layout {
			margin: auto;
			max-width: 1200px;
		}

		// 2023 has extra wide layout
		&.is-extra-wide-layout {
			max-width: 1480px;
		}

		.formatted-header.is-without-subhead {
			margin-bottom: 15px;
		}

		.step-wrapper {
			&.is-wide-layout {
				max-width: 1200px;
			}
		}

		.plan-features-comparison__table {
			.plan-features-comparison__actions {
				button.plan-features__actions-button {
					border-radius: 4px;
				}
			}

			.plan-features-comparison__row:last-child {
				.plan-features-comparison__table-item {
					border-bottom: none;
				}
			}
			.plan-features-comparison__table-item {
				border-left: none;
				background-color: transparent;

				&:last-of-type {
					border-right: none;
				}

				.plans-grid__plan-pill.is-in-signup {
					font-size: 0.75rem;
					font-weight: 500;
					letter-spacing: 0.2px;
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 1.25rem;
					padding: 0 8px;
					right: 50%;
					transform: translate( 50% );
					border-radius: 4px;
					background-color: var( --studio-green-5 );
					color: var( --studio-gray-80 );
				}

				.plan-features-comparison__item-annual-plan {
					color: var( --studio-orange-40 ) !important;
				}

				.plan-features-comparison__header {
					padding: 12px 15px;
					background-color: unset;

					.plan-features-comparison__header-title {
						margin: 0 0 6px 0;
					}
				}

				.plan-features-comparison__pricing .plan-price {
					margin-right: 0;
				}
			}
		}

		button.is-borderless {
			color: var( --studio-gray-90 );
			font-weight: 500;
			border: 0;
			box-shadow: none;
			font-size: inherit;
			line-height: inherit;
			padding: 0;
			text-decoration: underline;
		}

		.plans__loading {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}
	}
}

.domain-and-plan.plans {
	.signup-header h1 {
		display: none;
	}

	.step-wrapper__header,
	#step-header {
		margin-top: 0;
		margin-bottom: 24px;
	}

	button.button.navigation-link.is-borderless {
		background: none;
		border: none;
		color: var( --studio-gray-100 );
		font-size: 0.875rem;
		font-weight: 600;
		padding: 0;
		text-decoration: none;
	}
}

.start-writing {
	#step-header {
		margin: 0;
	}

	.plan-features-2023-grid__popular-badge.is-current-plan,
	.plan-features-2023-grid__popular-badge.is-business-plan {
		display: none;
	}
}

// Override styles for newsletter flow
.newsletter.plans,
.domain-and-plan.plans {
	.step-container {
		.step-wrapper__header {
			.formatted-header {
				h1.formatted-header__title {
					font-size: rem( 32px ); //typography-exception
					line-height: rem( 40px ); //typography-exception

					@include break-medium {
						font-size: rem( 44px ); //typography-exception
						line-height: rem( 52px ); //typography-exception
					}
				}
				.formatted-header__subtitle {
					font-size: rem( 16px );
					line-height: rem( 24px );
				}
			}
		}
	}
}
