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

.app-promo {
	.app-promo__icon {
		display: block;
		margin: 0 auto 6px;
	}

	.card-heading {
		text-align: center;
	}

	@include break-mobile {
		.app-promo__icon {
			margin: 0 0 6px;
		}
		.card-heading {
			text-align: left;
		}
	}

	.app-promo__title {
		margin-bottom: 20px;
		line-height: 1.3;
	}

	.app-promo__subheader {
		/* stylelint-disable-next-line scales/font-sizes */
		font-size: 0.9375rem; //typography-exception
		line-height: 1.3;
		color: var(--color-text-subtle);
	}

	.app-promo__app-badges {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	// Reset preexisting, global styles for store buttons.
	.app-promo__app-badges .get-apps__app-badge {
		max-height: none;
		max-width: none;
		width: auto;
		display: block;
	}

	.app-promo__app-badges .get-apps__app-badge img {
		max-width: 100%;
		vertical-align: top;
		width: 150px;
		display: block;
		margin: 0 auto;

		@include break-mobile {
			margin: 0 -7px 0;
		}
	}

	.app-promo__app-badges-text {
		text-align: center;
		color: var(--color-text-subtle);

		@include break-mobile {
			text-align: left;
		}
	}

	// These style replicate a preexisting approach for cropping the Google
	// Play button. Long term, it is likely more appropriate to resize this
	// image instead.
	.get-apps__app-badge.android-app-badge img {
		transform: scale(1.14) translate(-11px, -7px);
	}

	.app-promo__link-button.button {
		color: var(--studio-jetpack-green-50);
		margin-top: 0;
		text-decoration: underline;
		text-underline-offset: 3px;
		font-size: rem(15px); //typography-exception
		font-weight: 600;

		&:hover,
		&:focus,
		&:active,
		&.is-active {
			color: var(--studio-jetpack-green-60);
			box-shadow: none;
			text-decoration: none;
		}
	}
}

.app-promo__qr-code {
	// This is a hack to allow us to use a feature flag to hide this subpanel
	// without the parent card having a big ugly blank space at the bottom.
	margin-top: 50px;
	margin-bottom: 40px;
	display: flex;
	align-items: center;

	.get-apps__card-text {
		padding: 0 50px;
		margin-bottom: 0;
	}
}

.app-promo__qr-code-placeholder {
	background-color: var(--color-neutral-0);
}
