@use "../../mixin";
@use "../../../scss/mixins/breakpoints";
@use "../../../scss/variables/colors";

.jp-recommendations-question__content {
	display: flex;
	flex-direction: column;
}

.jp-recommendations-question__main--with-sidebar .jp-recommendations-question__content {

	@include breakpoints.breakpoint( ">660px" ) {
		padding-right: 48px;
	}
}

.jp-recommendations-question__progress-bar {

	.progress-bar {
		--spacing-base: 8px;
		width: 70px;

		.progress-bar__progress {
			background-color: #00a32a;
		}
	}
}

.jp-recommendations-question__progress-bar-wrap {
	display: flex;
	align-items: center;
	margin: 32px 32px 0 32px;

	@include breakpoints.breakpoint( "<480px" ) {
		margin: 16px 16px 32px 16px;
	}

	.jp-recommendations__new-badge {
		margin-right: 1rem;
	}
}

.jp-recommendations-question__question {
	color: var(--jp-gray-80);

	font-size: 1.5rem;
	margin: 2.5rem 2.5rem 1rem 2.5rem;

	@include breakpoints.breakpoint( "<480px" ) {
		margin: 0 1rem 2rem 1rem;
	}
}

.jp-recommendations-question__description {
	color: var(--jp-gray-100);

	font-size: 1rem;

	margin: 1rem 2rem 2rem 2.5rem;

	@include breakpoints.breakpoint( "<480px" ) {
		margin: 0 1rem 1rem 1rem;
	}

	.gridicons-external {
		margin-left: 0.25rem;
	}

	a {
		white-space: nowrap;
	}

	.components-external-link__contents {
		text-decoration: none;
	}
}

.jp-recommendations-question__description-list {
	color: var(--jp-gray-100);
	font-size: 1rem;
	margin: 0 2rem 2rem 2.5rem;

	list-style-type: none;
	padding: 0;

	li {
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVHcEwFnwUInggGnggGnggHnAcAnwUFnQcAnwcGnwkFnQgGnQgFnwcGnQYFnQcFnAcGnQkDnwdhiL0pAAAAEnRSTlMAMF//f2Aw7yBQ3+9gcIBgcED+HDbkAAAAZklEQVR4Ae3LNwICARDDQC0+cv7/Y8mwV9odSfWIcf/+VegnGkIvDaGXKvTTn/Gz+Uf5xTL0K1XotS7fs5H6GHvvaO8d7c3j7rdgHne/A/PYt/cO+R42oYdN6OEQetiFHo4A//6dAXqtBEkmtWutAAAAAElFTkSuQmCC) no-repeat;
		background-size: 1.25rem;
		padding-left: 1.75rem;
		margin-bottom: 0.5rem;
	}

	@include breakpoints.breakpoint( "<480px" ) {
		margin: 0 1rem 0 1rem;
	}
}

// When a description section follows the list, remove
// the extra margin from the top of the description.
.jp-recommendations-question__description-list + .jp-recommendations-question__description {
	margin-top: 0;
}

.jp-recommendations-question__main--with-sidebar .jp-recommendations-question__description {
	margin-right: 0;

	@include breakpoints.breakpoint( "<782px" ) {
		margin-right: 32px;
	}
}

.jp-recommendations-question__answer {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.jp-recommendations-question__illustration-container {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;

	@include breakpoints.breakpoint( "<1040px" ) {
		display: none;
	}
}

.jp-recommendations-question__illustration-picture {
	display: flex;
	justify-content: center;

	width: 100%;
}

.jp-recommendations-question__sidebar-card {
	width: 100%;
}

.jp-recommendations-question__illustration {
	flex: 1;

	max-width: 420px;
}

.jp-recommendations-question__checkmark {
	margin-right: 8px;
	display: flex;
	align-items: center;
	align-content: center;
}

.jp-recommendations-question__feature-enabled {
	display: flex;
	align-items: center;
	align-content: center;
	margin-bottom: 16px;

	.gridicons-checkmark-circle {
		fill: colors.$green-primary;
	}
}

.jp-recommendations-question__settings-button {

	.components-external-link {
		display: flex;
		align-items: center;

		&__icon {
			margin-left: 4px;
		}
	}
}

.jp-recommendations-question__install-section {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	button {
		margin-top: auto;
		margin-bottom: 16px;
		min-width: 172px;
	}

	a {
		margin-bottom: 32px;

		&.dops-button {
			margin-bottom: 16px;
			text-align: center;

			@include breakpoints.breakpoint( "<480px" ) {
				width: 100%;
			}
		}

		.components-external-link__contents {
			text-decoration: none;
		}
	}

	@include breakpoints.breakpoint( "<480px" ) {
		padding: 64px 16px 0 16px;
	}
}

.jp-recommendations-question__jump-nav {
	display: flex;
	justify-content: center;
}

.jp-recommendations-question__jump-nav-separator {
	margin: 0 8px;
}
