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

.jp-recommendations-sidebar-card {

	@include ui.card;

	width: 100%;
	margin-bottom: 1rem;

	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.05);

	&.with-illustration {
		background: linear-gradient(to bottom, #e6f2e8, 115px, var(--jp-white) 115px);
	}
}

.jp-recommendations-sidebar-card.underside {
	border-radius: 0;
	box-shadow: none;

	h2 {
		font-size: typography.$font-title-large;
		margin-bottom: 0.75rem;
	}

	p {
		font-size: typography.$font-body;
	}
}

.jp-recommendations-sidebar-card__content {
	padding: 0 1.5rem 1.5rem;

	&.is-compact {
		padding: 0 1.5rem;
	}

	h2 {
		margin-top: 1.75rem;

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

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

	.dops-button {
		width: 100%;
		margin-top: 1rem;
	}
}

.jp-recommendations-sidebar-card__illustration-container {
	text-align: center;
}

.jp-recommendations-sidebar-card__illustration {
	display: inline-flex;
	justify-content: center;
	width: 220px;
	height: 115px;
	margin-top: 24px;
	padding: 8px;
	background: colors.$white;
	border-radius: 3px;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.16);
}

.jp-recommendations-sidebar-card__features {

	@include ui.features-list;
}
