@use "@automattic/jetpack-base-styles/style";
@use "../../scss/mixins/ui";
@use "../../scss/variables/colors";
@use "../../scss/typography";
@use "../../scss/mixins/breakpoints";

.jp-recommendations-product-card-upsell {

	@include ui.card;

	position: relative;

	padding: 3.25rem 2rem 2rem;

	@include breakpoints.breakpoint( "<480px" ) {
		padding: 1rem;

		&.with-header {
			padding-top: 3rem;
		}
	}
}

.jp-recommendations-product-card-upsell__header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.jp-recommendations-product-card-upsell__heading {
	margin: 0;

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

	font-size: typography.$font-title-large;
	font-weight: typography.$bold;
}

.jp-recommendations-product-card-upsell__description {
	margin-bottom: 1.5rem;

	font-size: typography.$font-body-small;
}

.jp-recommendations-product-card-upsell__features {
	min-height: 7.5rem;
}

.jp-recommendations-product-card-upsell__price {
	display: flex;
	flex-wrap: wrap;
}

.jp-recommendations-product-card-upsell__final-price,
.jp-recommendations-product-card-upsell__raw-price {
	display: flex;

	margin: 0;
}

.jp-recommendations-product-card-upsell__raw-price {
	position: relative;

	margin-inline-end: 0.75rem;

	color: var(--jp-gray-20);

	&::before {
		content: "";

		position: absolute;
		top: 50%;

		display: block;

		width: 100%;
		height: 3px;

		background-color: var(--jp-pink);
	}
}

.jp-recommendations-product-card-upsell__final-price {
	margin-inline-end: 1rem;

	color: var(--jp-gray-100);
}

.jp-recommendations-product-card-upsell__currency-symbol {
	font-size: 1.5rem;
	margin-top: -0.25rem;
}

.jp-recommendations-product-card-upsell__price-integer {
	font-size: 3.375rem;
	font-weight: 700;
	line-height: 0.7;
}

.jp-recommendations-product-card-upsell__price-fraction {
	font-size: 0.75rem;
	margin-top: -0.25rem;
}

.jp-recommendations-product-card-upsell__discount {
	align-self: flex-end;

	margin-top: 1rem;
}

.jp-recommendations-product-card-upsell__billing-time-frame {
	margin-top: 0.5rem;

	color: var(--jp-gray-40);
}

.jp-recommendations-product-card-upsell__cta-button {
	margin-top: 2rem;
	padding-inline-start: 4rem !important;
	padding-inline-end: 4rem !important;

	font-size: typography.$font-body;

	.gridicons-external {
		margin-left: 0.25rem;
	}
}
