/** Interactive Quizzes
 * Multiple choice questions with answer checking
 */
.markdown-section .quiz {
    /* Colors */
    --quiz-title-color:                 var(--theme-color);

    --quiz-back-color:                  var(--theme-color-0);
    --quiz-border-color:                var(--color-mono-3);

    --quiz-border-color--bright:        var(--color-mono-5);
    --quiz-answered-border-color:       var(--theme-color-5);


    --quiz-question-back-color:         var(--color-mono-1);

    --quiz-answer-color:                var(--theme-color);
    --quiz-answer-back-color:           var(--color-mono-3);
    --quiz-answer-back-color--bright:   var(--theme-color-2);
    --quiz-answer-border-color:         var(--color-mono-3);
    --quiz-answer-border-color--bright: var(--theme-color);

    --quiz-border-width:                2px;

    --quiz-correct-color:               var(--color-good);
    --quiz-correct-back-color:          color-mix(in srgb, var(--quiz-correct-color), var(--color-mono-min) 75%);
    --quiz-correct-back-color--dark:    color-mix(in srgb, var(--quiz-correct-color), var(--color-mono-min) 90%);
    --quiz-wrong-color:                 var(--color-attention);
    --quiz-wrong-back-color:            color-mix(in srgb, var(--quiz-wrong-color),   var(--color-mono-min) 75%);
    --quiz-wrong-back-color--dark:      color-mix(in srgb, var(--quiz-wrong-color),   var(--color-mono-min) 90%);

    --quiz-star-color:                  var(--color-important);
    --quiz-stamp-color:                 var(--color-mono-8);

    --quiz-shadow:                      Var(--box-shadow-small);

    /* Layout */
    margin: var(--margin-block) 0 !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--quiz-back-color);
    border: var(--quiz-border-width) dashed var(--quiz-border-color);
    border-radius: calc(var(--border-radius) * 2.5);

    .question {
        position: relative;
        list-style: none;
        padding: 1em 1em 1.1em;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: var(--quiz-question-back-color);
        border: var(--quiz-border-width) solid var(--quiz-border-color);
        border-radius: calc(var(--border-radius) * 1);
        transition: all 150ms;

        &:hover {
            border-color: var(--quiz-border-color--bright);
        }

        > * {
            margin: 0;
        }

        > :first-child {
            font-size: 1.2em;
            color: var(--quiz-title-color);
            border: none;
        }

        > hr {
            display: none;
        }

        /* Answers */
        .answers {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
            padding: 0;
            margin: 0.5rem 0 0;
            list-style: none;

            /* 2 columns on larger screens */
            @media screen and (min-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }

            .answer {
                border: var(--quiz-border-width) solid var(--quiz-answer-border-color);
                background-color: var(--quiz-answer-back-color);
                border-radius: calc(var(--border-radius) * 0.5);
                box-shadow: var(--box-shadow-small);
                padding: 0.5em 2.5em 0.5em 0.75em;
                margin: 0;
                transition: all 150ms;
                position: relative;
                z-index: 2;

                &:hover {
                    cursor: pointer;
                }

                > :first-child {
                    margin-top: 0;
                }

                > :last-child {
                    margin-bottom: 0;
                }

                &.correct::before,
                &.wrong::before {
                    position: absolute;
                    top: 0.35em;
                    right: 0.3em;
                    z-index: 3;
                    font-size: 1.5em;
                    line-height: 1;
                }

                &.correct.revealed {
                    border-color: var(--quiz-correct-color);
                    background-color: var(--quiz-correct-back-color);

                    &::before {
                        content: '✔';
                        color: var(--quiz-correct-color);
                    }
                }

                &.wrong.revealed {
                    border-color: var(--quiz-wrong-color);
                    background-color: var(--quiz-wrong-back-color);

                    &::before {
                        content: '✘';
                        color: var(--quiz-wrong-color);
                    }
                }
            }

            &:not(.revealed) .answer:not(.revealed):hover {
                border-color: var(--quiz-answer-border-color--bright);
                background-color: var(--quiz-answer-back-color--bright);
                box-shadow: var(--box-shadow);
            }

            &.revealed {
                .answer {
                    pointer-events: none;

                    &.wrong {
                        opacity: 0.5;
                    }
                }
            }
        }

        &::after {
            color: var(--quiz-star-color);
            position: absolute;
            font-size: 1.2em;
            line-height: 1;
            top: 1rem;
            right: 1rem;
        }

        /* ★★★ - Correct on first try (no errors) */
        &:has(.answer.correct.revealed):not(:has(.answer.wrong.revealed)) {
            &::after {
                content: "★★★"
            }
        }

        /* ★★ - One error made */
        &:has(.answer.correct.revealed):has(.answer.wrong.revealed):not(:has(.answer.wrong.revealed ~ .answer.wrong.revealed)) {
            &::after {
                content: "★★"
            }
        }

        /* ★ - Two errors made */
        &:has(.answer.correct.revealed):has(.answer.wrong.revealed ~ .answer.wrong.revealed):not(:has(.answer.wrong.revealed ~ .answer.wrong.revealed ~ .answer.wrong.revealed)) {
            &::after {
                content: "★"
            }
        }

        &:has(.answers.revealed .answer.correct),
        &:has(.answers .answer.correct.revealed) {
            border-color: var(--quiz-answered-border-color);
        }

        /* --- FEEDBACK --- */
        .feedback {
            padding: 0;
            margin: 0.5rem 0 0;
            list-style: none;
            display: none;

            &:has(.feedback-item:not(.hidden)) {
                display: block;
            }

            .feedback-item {
                border: var(--quiz-border-width) solid var(--quiz-border-color);
                background-color: var(--quiz-answer-back-color);
                border-radius: calc(var(--border-radius) * 0.5);
                padding: 1em;
                margin: 0;
                position: relative;
                z-index: 2;

                & :first-child { margin-top: 0; }
                & :last-child  { margin-bottom: 0; }

                &.hidden {
                    display: none;
                }

                &.correct {
                    border-color: var(--quiz-correct-color);
                    background-color: var(--quiz-correct-back-color--dark);
                }

                &.wrong {
                    border-color: var(--quiz-wrong-color);
                    background-color: var(--quiz-wrong-back-color--dark);
                }
            }
        }
    }
}