@use "sass:math";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.jetpack-product-store {
	display: flex;
	flex-direction: column;

	.header {
		$sale-banner-height: 3.5rem;

		margin-bottom: 36px;
		margin-top: 8.5rem;

		&.has-sale-banner {
			$mobile-offset: 6rem;

			margin-top: 8.5rem + $sale-banner-height;

			// tablets
			@media (max-width: 900px) {
				margin-top: 8.5rem + $sale-banner-height + math.div($mobile-offset, 3);
			}
			// mobiles
			@media (max-width: 560px) {
				margin-top: 8.5rem + $sale-banner-height + $mobile-offset;
			}
		}
	}

	.header .formatted-header {
		margin: 0;
	}

	a.button {
		font-family: "SF Pro Text", $sans;
		font-size: $font-body;
		font-weight: 600;
	}

	.button:not([disabled], :disabled, .is-primary) {
		color: var(--color-neutral-100);
		border: 1px solid var(--color-neutral-100);
	}
	.button:focus {
		border-width: 1px;
	}

	.info-popover.owner-info__pop-over {
		line-height: inherit;
		pointer-events: all;
	}
}

:is(.product-lightbox__modal, .jetpack-product-store)
:is(.button[disabled], .button:disabled, .button.disabled) {
	pointer-events: none;
}

.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing
.jetpack-product-store
.header
.header__main-title
.formatted-header__title,
.is-group-jetpack-cloud.is-section-jetpack-cloud-manage-pricing
.jetpack-product-store
.header
.header__main-title
.formatted-header__title {
	margin: 0 auto;
	font-size: $font-title-large;
	line-height: rem(38px);

	@include break-large {
		font-size: $font-headline-small;
		line-height: rem(40px);
	}
}

/* Tabs */

@mixin jetpack-product-store__tab-focus {
	outline: solid 2px var(--color-text);
	outline-offset: 2px;
}

.jetpack-product-store__items-tabs [role="tablist"] {
	display: inline-flex;
	align-items: center;
	gap: 2px;

	width: 100%;
	margin: 0 auto;
	padding: 2px;

	background: var(--studio-gray-5);
	border-radius: calc(2 * 4px);

	@include break-medium {
		position: relative;
		left: 50%;
		transform: translateX(-50%);

		width: auto;
	}

	.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing & {
		background: var(--color-surface-backdrop);
	}
}

.jetpack-product-store__products-list {
	.item-price .display-price {
		&:not(.is-placeholder) {
			max-height: none;
		}
	}
}

.jetpack-product-store__items-tabs [role="tab"] {
	display: initial;
	flex-grow: 1;

	padding: 0.5rem 1rem;
	min-height: 44px;

	border-radius: inherit;
	color: var(--color-text);

	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;

	transition: background-color 0.1s;

	cursor: pointer;

	@include break-medium {
		min-width: 170px;
	}

	&:hover {
		color: var(--color-text);
	}

	&:focus {
		outline: none;

		@supports not selector( :focus-visible ) {
			/* Fallback for browsers without :focus-visible support */
			@include jetpack-product-store__tab-focus;
		}
	}

	&:focus-visible {
		@include jetpack-product-store__tab-focus;
	}

	&[aria-selected="true"] {
		background-color: var(--color-surface);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	&:not([aria-selected="true"]) {
		&:hover {
			text-decoration: underline;
		}

		&:focus {
			box-shadow: none;
		}

		&:active {
			background-color: var(--studio-gray-10);
			text-decoration: none;

			.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing & {
				background: var(--studio-gray-5);
			}
			.is-group-jetpack-cloud.is-section-jetpack-cloud-manage-pricing & {
				background: var(--studio-gray-5);
			}
		}
	}
}
