.question-block__title {
	@include headline;
	margin: 0 0 15px;
}

.question-block__notify {
	@include mainBodyText;
	margin: 0 0 25px;
}

.question-block__body {
	display: flex;
	align-items: flex-start;
}

.question-block__text {
	margin-right: 50px;
	min-width: calc(50% - 25px);
}

.question-block__image {
	flex: none;
	margin-top: -10px;
	margin-left: auto;
	width: calc(50% - 25px);
}

.question-block__image-wrapper {
	position: relative;
	padding-top: 59%;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #D1D1D1 125.35%);;
	border: 5px solid $bg-main;
	border-radius: 10px;
	overflow: hidden;
}

.question-block__image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.question-block__options {
	@include list-reset;
	margin-bottom: 42px;
}

.question-block__option {
	margin-bottom: 10px;
}

.question-block__option:last-child {
	margin-bottom: 0;
}

.picker-button {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 5px 0 0 50px;
	min-height: 39px;
	cursor: pointer;

	&__desc {
		@include bodyText;
		display: block;
	}

	&__indicator {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 30px;
		height: 30px;
		background-color: $bg-main;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 9px auto;
		border: 2px solid #C9C7C7;
		border-radius: 50%;
		transition: border-color 0.3s ease;

		&::after {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			width: 20px;
			height: 20px;
			background-color: $accent-main;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 9px auto;
			border-radius: 50%;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
	}

	&__field {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		white-space: nowrap;
		clip-path: inset(100%);
		clip: rect(0 0 0 0);
		overflow: hidden;

		&:checked + .picker-button__indicator {
			border-color: $accent-main;

			&::after {
				opacity: 1;
			}
		}
	}

	&__link {
		@include hover;
		transform: translateY(-5px);
		display: inline-block;
		vertical-align: top;
		margin-left: 15px;
		color: $accent-dark;
	}

	&--multiple {
		.picker-button__indicator {
			border-radius: 6px;

			&::after {
				border-radius: 3px;
			}
		}
	}

	&--disabled {
		cursor: default;
		pointer-events: none;

		.picker-button__desc {
			color: rgba(201, 199, 199, 0.5);
		}
	}

	&--correct {
		cursor: default;

		.picker-button__desc {
			color: $accent-main;
		}

		.picker-button__indicator {
			background-color: $accent-main;
			background-image: url("/uploads/images/correct.svg");
			border-color: $accent-main;
			cursor: default;

			&::after {
				opacity: 0;
			}
		}
	}

	&--incorrect {
		cursor: default;

		.picker-button__desc {
			color: $red;
			pointer-events: none;
		}

		.picker-button__indicator {
			background-color: $red;
			background-image: url("/uploads/images/incorrect.svg");
			border-color: $red;
			cursor: default;

			&::after {
				opacity: 0;
			}
		}
	}

	.picker-button__desc b {
		font-weight: 500;
		color: $text-main;
	}
}

