@use '../components/icons' as icons;

/* Mooc-grader questionnaire */

/* Questionnaire uses also error-summary-class from "components/error_summary" */

$questionnaire-focus-bg: var(--bs-info-bg-subtle, #bce8f1);

.exercise .aplus-quiz1 {
	.question-area {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.question-area > label:first-of-type {
		display: inline;
	}

	.question-description {
		margin-bottom: 5px;
	}

	.question-description:has(.help-block) {
		margin-bottom: -5px;
	}

	.question-feedback {
		margin-top: 5px;
	}

	.question-hint {
		display: block;
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 5px;
		color: var(--bs-secondary-text-emphasis);
		font-style: normal;
		background-color: var(--bs-warning-bg-subtle);
	}

	.hint-checkbox {
		padding-left: 20px;
	}

	.option-checked {
		font-weight: bold;
	}

	.error-text {
		margin-top: 5px;
		margin-bottom: 5px;
		color: var(--bs-danger);
		font-weight: bold;
		margin-bottom: 0px;
	}

	.is-invalid .radio,
	.is-invalid .checkbox {
		color: #333;
	}

	/* Incorrectly answered question group with 'group_errors' grading. */
	fieldset.alert-danger {
		background-color: var(--bs-body-bg);
		border: 2px solid var(--bs-danger);
		font-weight: bold;
	}

	.quiz1-icon-correct {
		@include icons.bootstrap-icon;
		&:before {
			@extend .bi-check-circle-fill;
			color: #5cb85c;
		}
	}

	.quiz1-icon-neutral {
		@include icons.bootstrap-icon;
		&:before {
			@extend .bi-exclamation-circle-fill;
			color: #f5bc09;
		}
	}

	.quiz1-icon-incorrect {
		@include icons.bootstrap-icon;
		&:before {
			@extend .bi-x-circle-fill;
			color: #d9534f;
		}
	}

	/* Highlight the selected option with a background rectangle, and enlarge it on click */
	.checkbox,
	.radio {
		label {
			input + span {
				border-radius: 1px;
				margin-left: 5px;
			}

			input:checked + span {
				background-color: $questionnaire-focus-bg;
				box-shadow: 0 0 0 3px $questionnaire-focus-bg;
				font-weight: bold;
				color: var(--bs-info-text-emphasis, #055160);
			}

			&:active input + span {
				background-color: $questionnaire-focus-bg;
				box-shadow: 0 0 0 6px $questionnaire-focus-bg;
				font-weight: bold;
			}
		}
	}
}
