@use "../../scss/functions/rem";
@use "../../scss/mixins/ui";
@use "../../scss/mixins/breakpoints";

.jp-apps-card {
	margin-top: rem.convert(24px);
	margin-bottom: 0;
}

.jp-apps-card__content {

	@include ui.dashboard-card-shadow;

	display: flex;
	justify-content: space-between;
	align-content: center;

	&.dops-card {
		padding: 48px 64px;
	}

	a:not(.dops-button) {
		font-style: italic;
	}

	&::after {
		content: none;
	}

	.jp-apps-card__description {
		margin-right: 20px;
	}

	.apps-badge {
		max-width: none;
		max-height: none;

		img {
			width: 210px;
			max-width: 100%;
		}
	}

	@include breakpoints.breakpoint( "<782px" ) {
		flex-direction: column;

		.jp-apps-card__description {
			margin-right: 0;
			margin-bottom: 20px;
		}
	}
}

.jp-apps-card__top_img {
	width: 102px;
}

.jp-apps-card__paragraph {
	margin: 14px 0 0 0;
	font-size: 17px;
	// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
	line-height: 145%;
	color: var(--gray-100);
	letter-spacing: -0.24px;

	a.jp-apps-card__link {
		color: #008710;
		font-style: normal;

		&:hover {
			text-decoration: underline;
		}
	}
}

.jp-apps-card__header {
	margin-top: 23px;
	margin-bottom: 0;
	color: var(--jp-gray-100);
	font-weight: 500;
	font-size: 28px;
	line-height: 32px;
}

.jp-apps-card__promo_subhead {
	margin-top: 0;
	font-style: italic;
}

.jp-apps-card__apps-qr-code {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.jp-apps-card__caption {
		font-size: 11px;
		margin: rem.convert(10px) 0 0;
		max-width: 220px;
	}

	a.jp-apps-card__link {
		color: var(--jp-green-primary);
		font-style: normal;
		font-weight: 700;
	}

	a.jp-apps-card__link:hover {
		color: var(--jp-green-secondary);
	}
}

.jp-apps-card__apps-badges {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	@include breakpoints.breakpoint( "<480px" ) {

		.apps-badge:first-child {
			margin-right: 0;
		}
	}
}

.jp-themes-card {
	margin-bottom: rem.convert(20px);
}
