$epub-questions: true !default;
@if $epub-questions {

    // Question formatting

    .question {
        line-height: $line-height-default;
        padding: 0;
        margin: $line-height-default 0;
        p {
            text-indent: 0;
        }
        .figure {
            padding-left: 0;
            padding-right: 0;
        }
    }

    // Check-answer button

    .question {
        .check-answer-button {
            display: none;
        }
    }

    .js-mcq {
        .question {
            .check-answer-button {
                display: inline-block;
                font-family: $font-text-secondary;
                line-height: $line-height-default;
                padding: $line-height-default/2 $line-height-default;
                background-color: $color-buttons;
                color: white;
                border: 0;
                border-radius: $button-border-radius;
                cursor: pointer;
            }
        }
    }

    // Quiz groups, quiz and question numbering.
    // Questions are gathered in quizzes,
    // and quizzes can be grouped together, e.g. as a single section or as a complete exam.

    .quiz-group {
        counter-reset: quiz-group 0 quiz 0;
    }
    .quiz {
        counter-reset: quiz; // question numbering restarts in each quiz...
        .quiz-group & {
            counter-reset: none; // ...except when quizzes are grouped together.
        }
        &:before {
            counter-increment: quiz-group;
            // content: counter(quiz-group); // Uncomment to number quizzes
        }
        // Don't number if there is only one quiz in the group
        &:only-child:before {
            content: normal;
        }
        .question {
            counter-reset: question;
            margin-left: $paragraph-indent; // with &:before margin-left, creates hanging indent
            &:before {
                counter-increment: quiz;
                content: counter(quiz) ".";
                float: left;
                margin-right: 0.25em;
                margin-left: -($paragraph-indent); // with parent's margin-left, creates hanging indent
            }
            &:only-of-type:before {
                content: normal;
            }
        }
        .question ol.sub-questions {
            list-style-type: none;
            margin-left: $paragraph-indent * 1.5; // with &:before margin-left, creates hanging indent
            text-indent: -($paragraph-indent * 1.5); // with parent's margin-left, creates hanging indent
            li {
                &:before {
                    counter-increment: question;
                    content: counter(quiz) "." counter(question) " ";
                    display: inline-block;
                    width: $line-height-default * 1.5;
                    text-indent: 0; // not to inherit from parent
                }
            }
        }
    }

    // Marks

    .quiz-group {
        .quiz-group-total-marks {
            font-family: $font-text-secondary;
            font-weight: bold;
            text-align: right;
        }
    }
    .quiz {
        .quiz-total-marks {
            font-family: $font-text-secondary;
            font-weight: bold;
            text-align: right;
        }
    }
    .question {
        li {
            // Avoid marks appearing beside wrong text
            clear: right;
        }
        em.marks, strong.marks {
            font-style: normal;
            font-weight: normal;
            float: right;
            margin-left: 1em;
            text-indent: 0; // don't inherit parent text-indent
        }
        .question-total-marks {
            font-family: $font-text-secondary;
            font-weight: bold;
            text-align: right;
            &:before {
                content: "[";
            }
            &:after {
                content: "]";
            }
        }
    }

    // Inputs

    .question {
        input.fill-in-blank {
            display: inline;
            width: 8em;
            padding: 0.2em;
            line-height: 1;
            margin: 0;
            border-width: 0 0 $rule-thickness 0;
        }
    }

    // Multiple-choice questions

    .mcq-options {
        margin-bottom: 0;
        list-style-type: circle;
        [type="checkbox"] {
            display: inline-block;
            width: auto;
            margin: 0 ($line-height-default / 2) 0 0;
            cursor: pointer;
        }
        label {
            display: block;
            cursor: pointer;
        }
    }

    .mcq-feedback {
        display: none;
    }

    .js-mcq {
        .mcq-options {
            list-style-type: none;
            margin-left: 0;
            li {
                margin-bottom: $line-height-default / 2;
                margin-left: -($line-height-default / 2);
                padding: 0 ($line-height-default / 2);
                border: $button-border-radius solid transparent;
                border-radius: $button-border-radius;
            }
            .selected {
                border-color: $color-accent;
            }
        }
    }

    .js-mcq {
        .mcq-feedback {
            display: block;
            position: relative;
            margin-top: $line-height-default;
            list-style-type: none;
            margin-left: 0;
            background-color: $color-light;
            border-radius: $box-border-radius;
            &:before {
                display: block;
                padding: ($line-height-default / 2) 0 ($line-height-default / 2) ($paragraph-indent * 2);
            }
            &:after {
                // position: absolute; // not valid in epub
                top: $line-height-default / 2;
                left: $paragraph-indent;
                position: absolute;
            }
            li {
                display: none;
                padding: 0 ($line-height-default/ 2) ($line-height-default / 2) ($line-height-default * 2);
            }
            .mcq-feedback-show {
                display: block;
            }
        }
        // Words hard-coded here need to be localised with Javascript in _includes/end-elements.html
        .mcq-incorrect {
            .mcq-feedback {
                &:before {
                    content: "Incorrect";
                }
                &:after {
                    content: "\2717";
                }
            }
        }
        .mcq-partially-correct {
            .mcq-feedback {
                &:before {
                    content: "Good so far but you haven't selected all the correct answers.";
                }
            }
        }
        .mcq-correct {
            .mcq-feedback {
                &:before {
                    content: "Correct!";
                }
                &:after {
                    content: "\2713";
                }
            }
        }
    }

}
