@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.jetpack-product-card {
	position: relative;

	box-sizing: border-box;
	height: 100%;

	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: ( 2px * 4 );
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);

	&.is-featured.is-aligned {
		position: relative;
		z-index: 1;

		margin-left: -8px;
	}
}

// The anchor allow us to scroll into view exactly 100px on top of the
// card. We need this so that the card never appears behind the filter bar.
.jetpack-product-card__scroll-anchor {
	visibility: hidden;

	position: absolute;
	top: -105px;
}

.is-section-jetpack-cloud-pricing .jetpack-product-card__scroll-anchor {
	top: -90px;
}

.jetpack-product-card__header {
	display: flex;
	align-items: center;

	box-sizing: border-box;
	width: 100%;
	padding: 8px;

	background-color: var(--color-primary);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	color: var(--color-text-inverted);

	font-size: 0.875rem;
	font-weight: 700;

	.is-aligned & {
		position: absolute;
		bottom: 100%;
		left: 0;
	}
}

.jetpack-product-card__header-icon {
	margin-right: 8px;
}

.jetpack-product-card__body {
	padding: 24px 32px;

	.is-featured & {
		border: solid 2px var(--color-primary);
		border-top: none;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	.is-featured.is-aligned & {
		box-sizing: border-box;
		height: calc(100% + 8px);

		background-color: inherit;
	}
}

.jetpack-product-card__icon {
	width: 56px;
}

.jetpack-product-card__product-name {
	margin-right: 8px;

	color: var(--studio-gray-100);

	font-family: Inter, $sans;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.049rem;

	em {
		font-style: normal;
	}

	.is-disabled & {
		opacity: 0.4;
	}
}

.jetpack-product-card__product-subheader {
	margin: 12px 0 20px;

	color: var(--studio-gray-100);

	font-family: Inter, $sans;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;

	em {
		font-style: normal;
	}

	.is-disabled & {
		opacity: 0.4;
	}
}

.jetpack-product-card__description {
	color: var(--studio-gray-60);

	font-size: inherit;

	@include breakpoint-deprecated( ">660px" ) {
		min-height: 108px;
	}

	.is-disabled & {
		opacity: 0.4;
	}
}

.jetpack-product-card__above-button {
	position: relative;
	top: 4px;
	margin-bottom: calc(-0.875rem * 1.2);

	color: var(--studio-gray-40);
	font-size: 0.875rem;
	line-height: 1.2;
}

.jetpack-product-card__disabled-message {
	color: var(--color-accent);
	font-weight: 600;
	margin-block-start: 32px;
	margin-block-end: 0;
}

.jetpack-product-card__button {
	width: 100%;
	padding: 0.625rem 1rem;

	border-radius: ( 2px * 2 );
	margin-block-start: 32px;
	margin-block-end: 24px;

	font-size: 1rem;

	em {
		font-style: normal;
	}
	.info-popover.owner-info__pop-over {
		> .gridicon {
			color: var(--color-accent);
		}
	}
}

.jetpack-product-card__features {
	margin-bottom: 10px;

	.is-disabled & {
		opacity: 0.4;
	}
}

.jetpack-product-card__features-button {
	display: flex;
	align-content: center;

	margin-bottom: 1rem;

	color: var(--color-text-subtle);

	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;

	cursor: pointer;

	&:focus-visible {
		outline: 1px dotted;
		outline-offset: 2px;
	}

	.gridicon {
		margin: 1px 0 0 0.5rem;
	}

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

.jetpack-product-card__features-list {
	margin: 0 16px 12px;

	em {
		font-style: normal;
	}

	@include break-medium {
		margin-block-end: 2rem;
	}

	&.is-collapsed {
		display: none;

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

.jetpack-product-card__features-item {
	margin: 12px 0;
	padding-inline-start: 8px;
	color: var(--studio-gray-60);

	&.is-highlighted {
		font-weight: 700;

		.not-highlighted {
			font-weight: initial;
		}
	}
}

.jetpack-product-card__disclaimer {
	a {
		color: var(--studio-jetpack-green-30);
		text-decoration: underline;
	}
}
