// ============================================================================
// :: QUIZ
// ============================================================================
.m-quiz {
	position: relative;

	overflow: hidden;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-quiz__item {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.m-quiz__image {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;

	width: 100%;
	height: 100%;

	background-size: cover;

	@include respond-at($screen-large-base) {
		width: 60%;
	}
}

.m-quiz__content {
	width: 100%;
	padding: 2rem;

	@include respond-at($screen-large-base) {
		width: 40%;
	}
}

.m-quiz__options {
	position: relative;

	width: 100%;
	padding: 2rem 0 2rem 2rem;

	@include respond-at($screen-large-base) {
		width: 58%;
		padding: 9rem 9rem 9rem 0;
	}
}

.m-quiz__question-option {
	display: inline-flex;
	align-items: center;
	width: 100%;
	margin: 1rem 0;
	padding: 1rem;

	text-align: left;

	background-color: white;
	border: none;

	box-shadow: $box-shadow;
	border-radius: 10rem;

	@include respond-to($screen-large-base) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	@include respond-at($screen-large-base) {
		width: 80%;
	}

	&:hover {
		transform: scale(1.1);

		transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

		cursor: pointer;
	}
}

.m-quiz__question-input {
	display: inline-flex;
	align-items: center;
	width: 100%;
	margin: 1rem 0;

	background-color: white;
	border: none;

	box-shadow: $box-shadow;
	border-radius: 10rem;

	@include respond-to($screen-large-base) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	input {
		width: 100%;
		padding: 2rem;

		border: 0;
		border-radius: 10rem;
		outline: none;
	}
}

.m-quiz__question {
	font-family: $font-family-roboto;
	font-size: $font-size-2x-large;
	line-height: 1.5;
}

.m-quiz__button {
	margin-top: 2rem;
}

.m-quiz__label {
	display: inline-block;
	margin-bottom: 1rem;

	font-family: $font-family-beausans;
	font-weight: 700;
}

.m-quiz__question-option-number {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 5rem;
	height: 5rem;
	margin-right: 1.5rem;

	font-weight: bold;

	border-radius: 100%;

	background-color: $grey-light;
	color: $grey-extra-dark;
}

.m-quiz__intro-content {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-quiz__question-option--correct {
	color: $text-color-black;

	.m-quiz__question-option-number {
		background-color: $primary-color;
		color: $white;
	}
}

.m-quiz__question-option--wrong {
	color: $text-color-black;

	.m-quiz__question-option-number {
		background-color: $red;
		color: $white;
	}
}