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

.promo-card {
	display: flex;
	flex-direction: column;
	@include breakpoint-deprecated( ">480px" ) {
		flex-direction: row;
	}

	.action-panel__figure {
		margin-top: 3px;

		@include breakpoint-deprecated( ">480px" ) {
			max-width: 24px;
			order: 1;

			&.align-left {
				order: -1;
			}
		}
	}

	.action-panel__title {
		display: flex;
		justify-content: space-between;
	}

	.action-panel__body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;

		p {
			flex-grow: 1;
		}
	}

	&.is-primary {
		align-items: center;

		.action-panel__title {
			@extend .wp-brand-font;
			font-size: $font-title-small;
			line-height: 28px;
			margin-bottom: 8px;
		}

		@include breakpoint-deprecated( ">480px" ) {
			.action-panel__figure {
				display: block;
				max-width: 120px;
				margin-bottom: 0;
			}

			.action-panel__title {
				font-size: $font-title-medium;
				line-height: 32px;
			}

			.action-panel__body {
				font-size: $font-body;
				line-height: 24px;
			}
		}

		.action-panel__body {
			justify-content: center;
			width: 100%;
			p {
				flex-grow: 0;
				margin-bottom: 8px;
			}
		}

		@include break-xlarge {
			padding-left: 64px;
			padding-right: 64px;
		}

		@include breakpoint-deprecated( ">660px" ) {
			// illustration is too small to fit between 660 and 800px
			.action-panel__figure {
				display: none;
			}
		}

		@include breakpoint-deprecated( ">800px" ) {
			.action-panel__figure {
				display: block;
			}
		}
	}

	&.compact {
		.action-panel__title {
			justify-content: flex-start;
			gap: 12px;
			align-items: center;
			font-size: $font-body;
			font-weight: 500;
		}
		.action-panel__cta {
			padding-top: 0;
		}
		.gridicon {
			fill: var(--studio-gray-30);
			width: 20px;
			height: 20px;
			background: var(--studio-gray-0);
			padding: 8px;
			border-radius: 3px;
		}
	}

	.action-panel__cta {
		.button {
			margin: 0 1em 4px 0;
		}
	}
	.promo-card__title-badge {
		background-color: var(--color-accent-60);
		color: var(--color-text-inverted);
		margin: auto 0 auto 8px;
	}

	.promo-card__price {
		.price__cost {
			font-size: $font-body-small;
			color: var(--studio-gray-80);

			span {
				font-size: $font-title-medium;
				color: var(--studio-gray-100);
			}
		}

		.price__discounted span {
			text-decoration: line-through;
		}
		.price__discount {
			font-size: $font-body-small;
			color: var(--studio-green-50);
			margin-left: 8px;
		}
	}
}
