ArticleTemplates/assets/scss/themes/darkMode/_darkModeQuiz.scss

@import "colours";

@mixin darkModeQuiz($p-kicker, $p-inverted, $dark-1, $dark-2, $dark-3) {
    .element-atom .quiz {
        .question__text {
            color: $whiteTwo;

            &::before {
                color: $warmGreyFour;
            }
        }

        .answer__text,
        .answer__message::before {
            color: $whiteTwo;
        }

        .question__wrapper {
            border-color: $blackTwo;
        }

        .answer__wrapper {
            color: $whiteTwo;
            background: $blackTwo;

            .answer__marker {
                border-color: $warmGreyFour;
            }
        }

        .question.answered .answer__wrapper {
            background: $blackTwo;
        }

        .question.is-wrong .wrong-answer .answer__wrapper,
        .question.is-wrong .wrong-answer .answer__message {
            background: $wrongQuizAnswer;
        }

        .question.is-correct .correct-answer .answer__wrapper,
        .question.is-correct .correct-answer .answer__message {
            background: $correctQuizAnswer;
        }

        .quiz-scores,
        .quiz-results {
            border-top: 2px solid $blackTwo;
        }

        .quiz-scores .quiz-scores__score {
            border-top: none;
            background: $whiteTwo;
            color: $blackThree;
        }

        .quiz-scores .quiz-scores__score::before {
            color: $blackThree;
        }

        .quiz-scores .quiz-scores__message {
            color: $whiteTwo;
        }
    }
}

@mixin darkModePersonalityQuiz($p-kicker, $p-inverted, $dark-1, $dark-2, $dark-3) {
    .element-atom .quiz {
        //editorial personality quiz
        &.personality-quiz {
            .question__wrapper .question__text {
                color: color(brightness-86);

                &::before {
                    color: color(brightness-86);
                }
            }

            .question__answer .answer__text {
                color: color(brightness-86);
            }

            .question__answer {
                &.highlight-answer.answer .answer__wrapper,
                &.highlight-answer.answer.has-image {
                    background-color: #707070;
                }

                &:not(.has-image) {
                    .answer__text {
                        color: color(brightness-86);
                    }

                    .answer__marker {
                        border: 1px solid color(brightness-60);

                        &::before {
                            content: '';
                        }
                    }
                }
            }

            .question__answer {
                &.highlight-answer.answer .answer__marker__inner {
                    opacity: 1;
                    background: color(brightness-96);
                }

                &.highlight-answer.answer .answer__marker {
                    border: 1px solid color(brightness-96);
                }

                &.highlight-answer.answer .answer__text {
                    color: color(brightness-96);
                }
            }

            .question.answered .answer__wrapper {
                background: color(brightness-20);
            }

            .quiz-results__title .quiz-results__description {
                color: color(brightness-86);
            }
        }
    }

    //labs personality quiz
    &.garnett--type-guardianlabs {
        .element-atom {
            .quiz {
                &.personality-quiz {
                    .question__wrapper .question__text {
                        color: color(brightness-86);

                        &::before {
                            color: color(brightness-86);
                        }
                    }

                    .question__answer .answer__text {
                        color: color(brightness-86);
                    }

                    .question__answer {
                        &.highlight-answer.answer .answer__wrapper,
                        &.highlight-answer.answer.has-image {
                            background-color: #707070;
                        }

                        &:not(.has-image) {
                            .answer__text {
                                color: color(brightness-86);
                            }

                            .answer__marker {
                                border: 1px solid color(brightness-60);

                                &::before {
                                    content: '';
                                }
                            }
                        }
                    }

                    .question__answer {
                        &.highlight-answer.answer .answer__marker__inner {
                            opacity: 1;
                            background: color(brightness-96);
                        }

                        &.highlight-answer.answer .answer__marker {
                            border: 1px solid color(brightness-96);
                        }

                        &.highlight-answer.answer .answer__text {
                            color: color(brightness-96);
                        }
                    }

                    .question.answered .answer__wrapper {
                        background: color(brightness-20);
                    }

                    .quiz-results__title .quiz-results__description {
                        color: color(brightness-86);
                    }
                }
            }
        }
    }
}