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

.featured-item-card {
	background: linear-gradient( 159.87deg, #f6f6f4 7.24%, #f7f4ea 64.73%, #ddedd5 116.53% );
	border-radius: 8px;
	color: var( --gray-100 );
	display: flex;
	flex-direction: column;
	font-size: $font-body-small;
	justify-content: space-between;
	line-height: 1;
	overflow: hidden;
	width: 100%;
	height: 100%;

	.multiple-choice-question {
		margin-block-start: 10px;
		margin-block-end: 10px;

		.form-legend {
			display: none;
		}

		.multiple-choice-question__answers {
			display: flex;
			gap: 24px;
		}

		.multiple-choice-question__answer-item-content {
			margin: 0;
		}

		.form-radio {
			margin: 0;
		}

		.form-label {
			font-size: $font-body-small;
			line-height: 1.2;
			margin: 0;
		}

		.form-radio:checked::before {
			background: var( --studio-green-50 );
		}
	}

	@include break-mobile {
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	&.featured-item-card--vertical {
		// horizontal
		flex-direction: column;
		justify-content: stretch;

		@media ( min-width: $break-small ) and ( max-width: $break-xlarge ) {
			// vertical
			flex-direction: row;
			justify-content: flex-start;
		}
	}
}

.featured-item-card--hero {
	min-height: 200px;
	position: relative;
	width: 100%;

	@include break-mobile {
		width: 33.6%;
	}

	@media ( max-width: $break-mobile ) {
		width: auto;
	}

	.featured-item-card--vertical & {
		// horizontal
		max-height: 200px;
		max-width: 100%;
		width: 100%;

		@media ( min-width: $break-small ) and ( max-width: $break-xlarge ) {
			// vertical
			height: 100%;
			max-height: 100%;
			max-width: 300px;
			min-width: 250px;
			flex: 0 0 300px; // set flex-basis to 300px to prevent cutting off icons for "complete"
		}
	}
}

.featured-item-card--body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
	width: 100%;

	@include break-mobile {
		padding: 24px;
		width: 66.6%;
	}

	@media ( max-width: $break-mobile ) {
		width: auto;
	}

	.featured-item-card--vertical & {
		// horizontal
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		@media ( min-width: $break-small ) and ( max-width: $break-xlarge ) {
			// vertical
			max-width: 400px;
		}
	}
}

.featured-item-card--title {
	color: var( --gray-100 );
	font-size: $font-title-medium;
	font-weight: 700;
	line-height: 1;

	@include break-medium {
		font-size: $font-title-large;
	}
}

.featured-item-card--price {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;

	.item-price > .display-price:not( .is-placeholder ) {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 0.5rem;
	}
}

.featured-item-card--desc {
	color: var( --gray-80 );
	line-height: 1.5;

	p {
		display: inline-block;
		max-width: 55ch; // stylelint-disable-line unit-allowed-list
		margin: 0;
		font-style: normal;
		font-weight: 400;
		font-size: $font-body-small;
		line-height: 24px;
	}
}

.featured-item-card--footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-top: 0.5rem;
}

.featured-item-card--cta {
	min-width: 5.7em;
	border-width: 0;
	margin-top: 1.5rem;

	.gridicon.gridicons-checkmark {
		transform: rotate( -8.37deg );
		margin-right: 11.46px;
		color: #008710;
	}
}
