@import "@automattic/typography/styles/variables";
@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";

.upsell-product-card {
	&__features {
		list-style: none;
		margin: 0 0 24px;
	}

	&__features-item {
		margin-bottom: 12px;
		span {
			.is-placeholder & {
				@include placeholder( --studio-gray-5 );
			}
		}

		.gridicon {
			fill: var(--studio-jetpack-green-50);
			margin-right: 8px;
		}
	}

	&__price-container {
		display: flex;
	}

	&__discount-label {
		display: inline-block;
		align-self: flex-start;

		padding: 0.125rem 0.5rem;
		margin: 22px 0 0 16px;

		background-color: var(--studio-yellow-10);
		border-radius: 4px;

		font-size: $font-body-small;
		font-weight: 700;
		white-space: nowrap;

		sup {
			position: relative;
			top: -0.5em;
			font-size: 0.75em;
		}
	}

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

main.main.upsell-switch__loading.is_jetpackcom {
	max-width: 1040px;
}

.display-price.is-placeholder .plan-price {
	background: var(--studio-gray-5);
}

.display-price.is-placeholder .display-price__billing-time-frame {
	background: var(--studio-gray-5);
}
