@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";
@import "@automattic/plans-grid-next/src/media-queries";
@import "./media-queries";

$plan-features-header-banner-height: 20px;

:root {
	--scss-font-body-small: #{$font-body-small};
}

.plans-features-main__escape-hatch {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;

	button {
		text-decoration: underline;
		font-size: var(--scss-font-body-small);
	}
}

.is-plan-type-selector-visible .plans-features-main__features-grid,
.is-plan-type-selector-visible .plans-features-main__comparison-grid {
	margin-top: 50px;
}

.is-2023-pricing-grid {
	margin: 0 auto;

	.signup__steps & {
		width: auto;
	}

	.signup__steps .plans-features-main__group.is-scrollable & {
		max-width: 100%;
	}

	.plans-wrapper {
		margin: 0;
		padding: 0 0 10px;
		overflow-x: visible;
	}

	#site-plans & .plans-wrapper {
		margin: 0;
	}
}

.plans-features-main__comparison-grid-container {
	width: 100%;

	&.is-hidden {
		display: none;
	}

	.plans-features-main__plan-type-selector-layout {
		@include plan-type-selector-custom-mobile-breakpoint {
			// Overrides the plans-wrapper parent container margins
			margin: 0 -20px;
		}
	}
}

.calypso-notice.plan-features-main__notice {
	margin: 0 20px 24px;
	width: unset;

	@include plans-section-custom-mobile-breakpoint {
		margin: 0 0 24px;
		width: 100%;
	}
}

.plan-upgrade-credit-notice-compact {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 20px;
	background-color: #D6DDF966;
	border-radius: 3px;
	padding: 2px 10px;
	font-size: 13px;
	line-height: 20px;
	color: var(--gray-gray-90, #1d2327);
}

/*TODO: Remove the section below when the 2023 pricing grid is live to all locales */
.plans-features-main__group.is-scrollable:not(.is-2023-pricing-grid) {
	position: relative;

	.is-section-signup & {
		--approximate-viewport-scrollbar-width: 20px;

		width: calc(100vw - var(--approximate-viewport-scrollbar-width));
		margin-left: calc(50% - 50vw + var(--approximate-viewport-scrollbar-width) / 2);

		@media (min-width: 1600px) {
			max-width: 1600px;
			margin-left: -280px;
		}

		@include breakpoint-deprecated( "<1040px" ) {
			padding-top: 12px;
		}
	}

	.is-section-plans & {
		overflow: hidden;
		width: calc(100vw - 278px);
		margin-left: calc(50% - 50vw + 138px);

		@include breakpoint-deprecated( "<660px" ) {
			margin-left: 0;
			width: 100%;
		}

		@media (min-width: 1800px) {
			max-width: 1520px;
			margin-left: -240px;
		}
	}
}

/**
 * We auto-scroll to the plan comparison grid when it is shown.
 * However, on the /plans page, due to the presence of the masterbar on top,
 * we need to add a scroll offset.
 */
.is-section-plans .plans-features-main__comparison-grid-container {
	scroll-margin-top: $plan-features-header-banner-height + 24px;
	margin: auto;
}

.is-section-signup .plans-features-main__comparison-grid-container {
	margin: auto;
}

.is-section-stepper .plans-features-main__comparison-grid-container {
	margin: auto;
}

.is-2023-pricing-grid .plan-features-2023-grid__content {
	position: relative;
	margin: auto;
}

body.is-section-signup {
	.plans-features-main {
		.plan-faq {
			h1 {
				margin-top: 10px;
				margin-bottom: 30px;
			}
		}
	}
}

.plans-features-main__plan-type-selector-layout {
	display: flex;
	justify-content: center;

	.segmented-control.price-toggle {
		.is-section-signup &,
		.is-section-stepper & {
			border: solid 1px var(--studio-gray-5);
		}
	}

	/**
	 * Following styles are important for stretching the plan type selector to full width when sticky
	 *   - .is-sticky-plan-type-selector is the class added when the plan type selector is sticky
	 *   - 15px is the padding added by the layout overrides in modernized-layout.tsx
	 */
	.is-sticky-plan-type-selector & {
		.is-section-plans & {
			width: 100vw;
		}
		.is-section-plans #plans & {
			margin-left: -15px;
		}
		.is-section-plans #site-plans & {
			margin-left: -24px;
		}
	}
}

/**
 * Styles required for the 2023 pricing grid plan type dropdown, sticky behavior to work
 */
body.is-section-plans .layout__content .main {
	@include plan-type-selector-custom-mobile-breakpoint {
		padding: 0;
		.is-2023-pricing-grid .plans-wrapper {
			margin: 0;
		}
	}
}
body.is-section-plans .layout__content #plans .main {
	@include plan-type-selector-custom-mobile-breakpoint {
		.is-2023-pricing-grid .plans-wrapper {
			padding: 17px;
		}
	}
}

body.is-section-stepper,
body.is-section-signup {
	.step-wrapper__header {
		margin: 24px 20px 38px;
	}
}
