@pocketprep/ui-kit 3.4.6 → 3.4.8

package/lib/components/Quiz/Question.vue

@@ -147,273 +147,69 @@
                         type="incorrect"
                     />
                 </div>
-                <div
-                    v-for="(choice, index) in choices"
-                    :key="choice.key"
-                    class="uikit-question__choices-container"
+                <ChoicesContainer
+                    ref="uikit-question__choices-container"
+                    :question="question"
+                    :choices="choices"
+                    :show-answers="showAnswers"
+                    :show-explanation="showExplanation"
+                    :is-MCR="isMCR"
+                    :is-unanswered="isUnanswered"
+                    :answer-keys="answerKeys"
+                    :hover-choice-key="hoverChoiceKey"
+                    :focus-choice-key="focusChoiceKey"
+                    :selected-choices="selectedChoices"
+                    :distractor-keys="distractorKeys"
+                    :choice-strikes="choiceStrikes"
+                    :choice-scores="choiceScores"
+                    :passage-image-url="passageImageUrl"
+                    :is-correct="isCorrect"
+                    :global-metrics="globalMetrics"
+                    :reviewMode="reviewMode"
+                    :show-explanation-image-long-alt="showExplanationImageLongAlt"
+                    :explanation-image-url="explanationImageUrl"
+                    :explanation-image-alt="explanationImageAlt"
+                    :explanation-image-long-alt="explanationImageLongAlt"
+                    :reference="reference"
+                    :hide-references="hideReferences"
+                    :is-dark-mode="isDarkMode"
+                    :question-el="questionEl"
+                    :breakpoints="breakpoints"
+                    @emitChoiceMouseOver="choiceMouseOver"
+                    @emitChoiceMouseleave="choiceMouseLeave"
+                    @emitChoiceFocusIn="choiceFocusIn"
+                    @emitChoiceFocusOut="choiceFocusOut"
+                    @emitHandleTouchStart="handleTouchStart"
+                    @emitHandleTouchMove="handleTouchMove"
+                    @emitHandleTouchEnd="handleTouchEnd"
+                    @emitSelectedChoice="selectChoice"
+                    @emitClickChoiceStrike="clickChoiceStrike"
+                    @toggleChoiceExplanation="toggleExplanation"
+                    @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 >
-                    <div
-                        ref="choices"
-                        v-dark="isDarkMode"
-                        class="uikit-question__choice-container"
-                        :class="{
-                            'uikit-question__choice-container--hover': !showAnswers && hoverChoiceKey === choice.key,
-                            'uikit-question__choice-container--focus': !showAnswers && focusChoiceKey === choice.key,
-                            'uikit-question__choice-container--selected': !showAnswers
-                                && selectedChoices.includes(choice.key),
-                            'uikit-question__choice-container--correct': !isMCR && showAnswers && !isUnanswered
-                                && answerKeys.includes(choice.key),
-                            'uikit-question__choice-container--incorrect': !isMCR && showAnswers
-                                && selectedChoices.includes(choice.key)
-                                && distractorKeys.includes(choice.key),
-                            'uikit-question__choice-container--big': !isMCR && !globalMetrics && (
-                                showAnswers && !isUnanswered
-                                    ? answerKeys.includes(choice.key)
-                                    : selectedChoices.includes(choice.key)
-                            ),
-                        }"
-                        @mousedown.prevent
-                        @mouseover="hoverChoiceKey = choice.key"
-                        @mouseleave="hoverChoiceKey = null"
-                        @focusin="focusChoiceKey = choice.key"
-                        @focusout="choiceFocusOut"
-                        @click.stop="selectChoice(choice.key)"
-                        @keydown.enter.stop="selectChoice(choice.key)"
-                        @touchstart="handleTouchStart"
-                        @touchmove="handleTouchMove"
-                        @touchend="handleTouchEnd(choice.key, $event)"
-                    >
-                        <div
-                            v-if="!reviewMode"
-                            v-breakpoint:questionEl="breakpoints"
-                            v-dark="isDarkMode"
-                            class="uikit-question__choice-letter"
-                            :class="!isMCR && {
-                                'uikit-question__choice-letter--selected': selectedChoices.includes(choice.key),
-                                'uikit-question__choice-letter--correct': showAnswers
-                                    && answerKeys.includes(choice.key),
-                                'uikit-question__choice-letter--incorrect': showAnswers
-                                    && selectedChoices.includes(choice.key)
-                                    && distractorKeys.includes(choice.key),
-                                'uikit-question__choice-letter--big': !globalMetrics && (showAnswers
-                                    ? answerKeys.includes(choice.key)
-                                    : selectedChoices.includes(choice.key)),
-                            }"
-                        >
-                            {{ String.fromCharCode(index + 65) }}
-                        </div>
-                        <div
-                            :ref="`choice-${choice.key}`"
-                            v-dark="isDarkMode"
-                            v-breakpoint:questionEl="breakpoints"
-                            class="uikit-question__choice"
-                            :class="{
-                                'uikit-question__choice--strike': showAnswers
-                                    ? isMCR
-                                        ? distractorKeys.includes(choice.key)
-                                        : choiceStrikes.includes(choice.key) && !answerKeys.includes(choice.key)
-                                    : choiceStrikes.includes(choice.key),
-                                'uikit-question__choice--big': !isMCR && !globalMetrics && (
-                                    showAnswers && !isUnanswered
-                                        ? answerKeys.includes(choice.key)
-                                        : selectedChoices.includes(choice.key)
-                                ),
-                                'uikit-question__choice--mcr': isMCR,
-                                'uikit-question__choice--selected': !showAnswers &&
-                                    selectedChoices.includes(choice.key),
-                                'uikit-question__choice--distractor': showAnswers
-                                    && distractorKeys.includes(choice.key),
-                                'uikit-question__choice--show-stats': globalMetrics,
-                                'uikit-question__choice--review-mode': reviewMode,
-                            }"
-                        >
-                            <div
-                                v-if="isMCR"
-                                v-dark="isDarkMode"
-                                class="uikit-question__mcr-checkbox"
-                                :class="{
-                                    'uikit-question__mcr-checkbox--selected': selectedChoices.includes(choice.key),
-                                    'uikit-question__mcr-checkbox--answer': showAnswers
-                                        && answerKeys.includes(choice.key),
-                                    'uikit-question__mcr-checkbox--distractor': showAnswers
-                                        && distractorKeys.includes(choice.key),
-                                    'uikit-question__mcr-checkbox--strike': !showAnswers
-                                        && choiceStrikes.includes(choice.key),
-                                }"
-                            >
-                                <Icon
-                                    v-if="selectedChoices.includes(choice.key) || (
-                                        showAnswers && answerKeys.includes(choice.key)
-                                    )"
-                                    class="uikit-question__mcr-check"
-                                    type="check"
-                                />
-                            </div>
-                            <div
-                                class="uikit-question__choice-text"
-                                :tabindex="showAnswers ? -1 : 0"
-                                :role="isMCR
-                                    ? 'checkbox'
-                                    : 'radio'
-                                "
-                                :aria-checked="selectedChoices.includes(choice.key) ? 'true' : 'false'"
-                                :aria-label="`${
-                                    showAnswers
-                                        ? answerKeys.includes(choice.key)
-                                            ? 'Correct Answer, '
-                                            : 'Incorrect Answer, '
-                                        : ''
-                                }${ stripText(choice.text) }`"
-                                v-html="choice.text"
-                            />
-                            <PocketButton
-                                v-if="!isMCR && showAnswers && answerKeys.includes(choice.key)"
-                                v-breakpoint:questionEl="breakpoints"
-                                type="tertiary-small"
-                                class="uikit-question__toggle-explanation"
-                                :class="{ 'uikit-question__toggle-explanation--review-mode': reviewMode }"
-                                :is-dark-mode="isDarkMode"
-                                :aria-expanded="showExplanation ? 'true' : 'false'"
-                                @click.stop="toggleExplanation"
-                                @mousedown.prevent
-                            >
-                                <span
-                                    ref="uikit-question__toggle-explanation-text"
-                                    class="uikit-question__toggle-explanation-text"
-                                    tabindex="-1"
-                                >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
-                                <Icon
-                                    v-breakpoint:questionEl="breakpoints"
-                                    class="uikit-question__toggle-explanation-icon"
-                                    :class="{
-                                        'uikit-question__toggle-explanation-icon--up': showExplanation,
-                                    }"
-                                    type="accordionArrow"
-                                />
-                            </PocketButton>
-                            <DropdownExplanation
-                                v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
-                                ref="uikit-question__dropdown-explanation"
-                                class="uikit-question__dropdown-explanation"
-                                :question="question"
-                                :answer-keys="answerKeys"
-                                :choice="choice"
-                                :global-metrics="globalMetrics"
-                                :show-answers="showAnswers"
-                                :is-MCR="isMCR"
-                                :show-explanation-image-long-alt="showExplanationImageLongAlt"
-                                :explanation-image-url="explanationImageUrl"
-                                :explanation-image-alt="explanationImageAlt"
-                                :explanation-image-long-alt="explanationImageLongAlt"
-                                :reference="reference"
-                                :hide-references="hideReferences"
-                                :is-dark-mode="isDarkMode"
-                                :question-el="questionEl"
-                                :breakpoints="breakpoints"
-                                @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
-                            />
-                        </div>
-                        <template v-if="!globalMetrics">
-                            <div
-                                v-if="!showAnswers"
-                                v-breakpoint:questionEl="breakpoints"
-                                v-dark="isDarkMode"
-                                :tabindex="showAnswers ? -1 : 0"
-                                class="uikit-question__strikethrough"
-                                aria-label="Strikethrough"
-                                role="switch"
-                                :aria-checked="choiceStrikes.includes(choice.key) ? 'true' : 'false'"
-                                :class="{
-                                    'uikit-question__strikethrough--visible': !showAnswers
-                                        && [ hoverChoiceKey, focusChoiceKey ].includes(choice.key),
-                                    'uikit-question__strikethrough--active': choiceStrikes.includes(choice.key),
-                                }"
-                                @mousedown.prevent
-                                @click.stop="clickChoiceStrike(choice.key)"
-                                @keydown.enter.stop="clickChoiceStrike(choice.key)"
-                            >
-                                <Icon type="strike" />
-                            </div>
-                            <Icon
-                                v-if="!isMCR
-                                    && showAnswers
-                                    && answerKeys.includes(choice.key)
-                                    && (isCorrect || isUnanswered)
-                                "
-                                v-dark="isDarkMode"
-                                type="correct"
-                                class="uikit-question__correct-icon"
-                                :class="{
-                                    'uikit-question__correct-icon--review-mode': reviewMode,
-                                }"
-                            />
-                            <Icon
-                                v-if="showAnswers && (
-                                    (
-                                        selectedChoices.includes(choice.key)
-                                        && distractorKeys.includes(choice.key)
-                                    ) || (
-                                        isMCR
-                                        && !selectedChoices.includes(choice.key)
-                                        && answerKeys.includes(choice.key)
-                                    )
-                                )"
-                                v-dark="isDarkMode"
-                                type="incorrect"
-                                class="uikit-question__incorrect-icon"
-                                :class="{
-                                    'uikit-question__incorrect-icon--mcr': isMCR,
-                                }"
-                            />
-                        </template>
-                        <template v-else>
-                            <div
-                                v-dark="isDarkMode"
-                                class="uikit-question__choice-stats-pct"
-                            >
-                                {{ choiceScores[choice.key] }} %
-                            </div>
-                            <div v-dark="isDarkMode" class="uikit-question__choice-stats-bar">
-                                <div
-                                    v-dark="isDarkMode"
-                                    class="uikit-question__choice-stats-bar-fill"
-                                    :class="{
-                                        'uikit-question__choice-stats-bar-fill--correct': showAnswers
-                                            && answerKeys.includes(choice.key),
-                                        'uikit-question__choice-stats-bar-fill--incorrect': showAnswers
-                                            && distractorKeys.includes(choice.key)
-                                            && selectedChoices.includes(choice.key),
-                                    }"
-                                    :style="{
-                                        'width': `${(choiceScores[choice.key]) || 0}%`
-                                    }"
-                                />
-                            </div>
-                        </template>
-                        <div
-                            v-breakpoint:questionEl="breakpoints"
-                            class="uikit-question__motivational-moment"
-                            :class="{
-                                'uikit-question__motivational-moment--mcr': isMCR,
-                                'uikit-question__motivational-moment--explanation': showExplanation,
-                                'uikit-question__motivational-moment--passage-and-image': question.passage
-                                    || passageImageUrl,
-                            }"
-                        >
-                            <slot
-                                name="motivationalMoment"
-                                :showAnswers="showAnswers"
-                                :answerKeys="answerKeys"
-                                :choiceKey="choice.key"
-                                :isCorrect="isCorrect"
-                            />
-                        </div>
-                    </div>
-                    <slot
-                        name="showNamesTable"
-                        :choice-key="choice.key"
-                    />
-                </div>
+                    <template #motivationalMoment="{
+                        isCorrect,
+                        choiceKey,
+                        showAnswers,
+                        answerKeys,
+                    }">
+                        <slot 
+                            name="motivationalMoment"
+                            :showAnswers="showAnswers"
+                            :answerKeys="answerKeys"
+                            :choiceKey="choiceKey"
+                            :isCorrect="isCorrect"
+                        />
+                    </template>
+                    <template #showNamesTable="{
+                        choiceKey,
+                    }" >
+                        <slot 
+                            name="showNamesTable"
+                            :choiceKey="choiceKey"
+                        />
+                    </template>
+                </ChoicesContainer>
                 <slot name="unansweredFlaggedNamesTable" />
             </div>
             <Summary
@@ -688,6 +484,7 @@ import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vu
 import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
 import Paywall from '../Quiz/Question/Paywall.vue'
 import Summary from '../Quiz/Question/Summary.vue'
+import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { studyModes } from '../../utils'
@@ -704,6 +501,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         Paywall,
         DropdownExplanation,
         Summary,
+        ChoicesContainer,
     },
     directives: {
         breakpoint,
@@ -1025,10 +823,6 @@ export default class Question extends Vue {
         }, 0)
     }
 
-    stripText (string?: string) {
-        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
-    }
-
     startReviewMode () {
         this.showAnswers = true
         this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
@@ -1077,13 +871,25 @@ export default class Question extends Vue {
         ) {
             const classesString = relatedTarget.getAttribute('class') || ''
             const classes = classesString.split(' ')
-            if (classes.includes('uikit-question__strikethrough')) {
+            if (classes.includes('uikit-question-choices-container__strikethrough')) {
                 return  // Don't set focusChoiceKey = null
             }
         }
         this.focusChoiceKey = null
     }
 
+    choiceFocusIn (choiceKey: TChoiceKey) {
+        this.focusChoiceKey = choiceKey
+    }
+
+    choiceMouseOver (choiceKey: TChoiceKey) {
+        this.hoverChoiceKey = choiceKey
+    }
+
+    choiceMouseLeave () {
+        this.hoverChoiceKey = null
+    }
+
     handleTouchStart (event: TouchEvent) {
         this.swipeStart = {
             x: event?.touches[0]?.clientX || null,
@@ -1108,7 +914,9 @@ export default class Question extends Vue {
         }
     }
 
-    handleTouchEnd (choiceKey: TChoiceKey, event: TouchEvent) {
+    handleTouchEnd (option: {choiceKey: TChoiceKey; event: TouchEvent}) {
+        const choiceKey = option.choiceKey
+        const event = option.event
         const targetEl = event.target as Ref
         const swipeEnd = {
             x: event?.changedTouches[0]?.clientX || null,
@@ -1167,7 +975,6 @@ export default class Question extends Vue {
         if (this.showAnswers) {
             return
         }
-
         const selectedChoices = this.selectedChoices
         const indexOfSelectedChoice = selectedChoices.indexOf(choiceKey)
         if (indexOfSelectedChoice !== -1) {
@@ -1191,7 +998,9 @@ export default class Question extends Vue {
         }
 
         if (focusChoice) {
-            const choiceEl = this.$refs[`choice-${choiceKey}`] as HTMLElement | HTMLElement[];
+            const choiceContainerComp = 
+                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
+            const choiceEl = choiceContainerComp?.$refs[`choice-${choiceKey}`] as HTMLElement | HTMLElement[];
             ('length' in choiceEl)
                 ? choiceEl[0]?.focus()
                 : choiceEl.focus()
@@ -1230,17 +1039,21 @@ export default class Question extends Vue {
                     // eslint-disable-next-line max-len
                     mcrLongAltComp?.$refs['uikit-question-summary__summary-dropdown-explanation-img-description'] as HTMLElement | undefined
 
-                const mobileDropdownExplanation = 
-                    this.$refs['uikit-question__dropdown-explanation'] as Ref[]
-                if (mobileDropdownExplanation) {
-                    const mobileDropdownExplanationComp = 
-                    mobileDropdownExplanation[0] as ComponentPublicInstance | undefined
-                    const mobileImgDropdownImgDescription = 
-                    // eslint-disable-next-line max-len
-                    mobileDropdownExplanationComp?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
-
-                    if (mobileImgDropdownImgDescription?.offsetParent) {
-                        mobileImgDropdownImgDescription.focus()
+                const choiceContainerComp = 
+                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
+                if (choiceContainerComp) {
+                    const dropdownExplanationComp = 
+                        // eslint-disable-next-line max-len
+                        choiceContainerComp.$refs['uikit-question-choices-container__dropdown-explanation'] as Ref[]
+                    if (dropdownExplanationComp) {
+                        const dropdownEl = dropdownExplanationComp[0] as ComponentPublicInstance | undefined 
+                        const mobileImgDropdownImgDescription = 
+                            // eslint-disable-next-line max-len
+                            dropdownEl?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
+
+                        if (mobileImgDropdownImgDescription?.offsetParent) {
+                            mobileImgDropdownImgDescription.focus()
+                        }
                     }
                 }
 
@@ -2026,341 +1839,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__choices-container {
-        display: contents;
-
-        &:not(:last-child) .uikit-question__choice-container {
-            margin-bottom: 9px;
-        }
-    }
-
-    &__choice-container {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        border-radius: 6px;
-        cursor: default;
-        position: relative;
-        outline: none;
-        transition: 0.1s width ease;
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: -1px;
-            bottom: -1px;
-            left: -1px;
-            right: -1px;
-            border: 1px solid rgba($pewter, 0.85);
-            box-shadow: 0 1px 4px 0 rgba($ash, 0.3);
-            border-radius: 6px;
-            pointer-events: none;
-        }
-
-        &--dark {
-            &::after {
-                border-color: $slate;
-                box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
-            }
-        }
-
-        &--big {
-            width: calc(100% + 10px);
-        }
-
-        &--hover {
-            cursor: pointer;
-
-            &::after {
-                display: block;
-                top: -2px;
-                bottom: -2px;
-                left: -2px;
-                right: -2px;
-                border: 2px solid $slate;
-                border-radius: 7px;
-            }
-
-            &--dark::after {
-                border-color: rgba($white, 0.6);
-            }
-        }
-
-        &--focus {
-            &::after {
-                display: block;
-                border: 1px solid $brand-blue;
-            }
-
-            &--dark::after {
-                border-color: $banana-bread;
-            }
-        }
-
-        &--selected {
-            &::after {
-                display: block;
-                border: 2px solid $brand-blue;
-            }
-
-            &:focus::before {
-                content: '';
-                position: absolute;
-                top: -3px;
-                bottom: -3px;
-                left: -3px;
-                right: -3px;
-                border-radius: 7px;
-                border: 1px solid $brand-blue;
-                pointer-events: none;
-            }
-
-            &--dark::after {
-                border-color: $banana-bread;
-            }
-
-            &--dark:hover::after {
-                border-color: $butterscotch;
-            }
-
-            &--dark:focus::before {
-                border-color: $banana-bread;
-            }
-        }
-
-        &--incorrect {
-            &::after {
-                display: block;
-                border: 1px solid $pepper;
-            }
-
-            &--dark::after {
-                border-color: $rosa;
-            }
-        }
-
-        &--correct {
-            &::after {
-                display: block;
-                border: 2px solid $cadaverous;
-            }
-
-            &--dark::after {
-                border-color: $jungle-green;
-            }
-
-            .uikit-question__choice--big.uikit-question__choice--tablet-portrait {
-                padding: 11px 38px 11px 17px;
-            }
-
-            .uikit-question__choice--big.uikit-question__choice--mobile {
-                padding: 11px 21px 9px;
-            }
-        }
-    }
-
-    &__choice-letter {
-        position: absolute;
-        left: -26px;
-        top: 50%;
-        transform: translateY(calc(-50% + 2px));
-        color: $slate-01;
-        font-size: 14px;
-        line-height: 17px;
-        transition: 0.1s left ease;
-
-        &--dark {
-            color: rgba($white, 0.6);
-        }
-
-        &--selected {
-            color: $brand-blue;
-
-            &--dark {
-                color: $banana-bread;
-            }
-        }
-
-        &--correct {
-            color: $victoria-green;
-
-            &--dark {
-                color: $jungle-green;
-            }
-        }
-
-        &--incorrect {
-            color: $lust;
-
-            &--dark {
-                color: $rosa;
-            }
-        }
-
-        &--big {
-            left: -21px;
-        }
-
-        &--mobile {
-            display: none;
-        }
-    }
-
-    &__choice {
-        width: 100%;
-        background-color: $white;
-        border-radius: 5px;
-        padding: 11px 46px 11px 15px;
-        font-size: 16.5px;
-        font-weight: 500;
-        letter-spacing: -0.1px;
-        line-height: 23px;
-        position: relative;
-        transition: 0.1s padding ease;
-
-        &--tablet-portrait {
-            font-size: 16px;
-            font-weight: 500;
-            letter-spacing: -0.1px;
-            line-height: 23px;
-        }
-
-        &--review-mode#{&}--distractor {
-            color: $slate;
-
-            &--dark {
-                color: $fog;
-            }
-        }
-
-        &--strike {
-            text-decoration: line-through;
-
-            &--dark:not(&--mcr) {
-                color: #c5cbd1 !important;
-            }
-        }
-
-        &--strike:not(&--mcr) {
-            color: $pewter;
-        }
-
-        &--strike#{&}--distractor#{&}--mcr {
-            background-color: rgba($barely-background, 0.5);
-            color: $ash;
-            box-shadow: 0 1px 4px 0 rgba($fog, 0.4);
-
-            &--dark {
-                background-color: rgba($moonlit-ocean, 0.5);
-                box-shadow: 0 1px 4px 0 rgba($charcoal, 0.2);
-            }
-        }
-
-        &--selected {
-            box-shadow: 0 1px 4px 0 rgba($brand-black, 0.12);
-        }
-
-        &--big {
-            padding: 11px 51px 11px 20px;
-        }
-
-        &--mcr {
-            padding: 13px 46px 15px 50px;
-        }
-
-        &--show-stats {
-            padding-bottom: 23px;
-            padding-right: 66px;
-        }
-
-        &--dark {
-            background-color: $brand-black;
-            color: $gray-background;
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__mcr-checkbox {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        top: 15px;
-        left: 15px;
-        width: 21px;
-        height: 21px;
-        border: 1px solid rgba($slate-01, 0.5);
-        border-radius: 2px;
-        box-sizing: border-box;
-
-        &--dark {
-            background: $barely-background;
-            border-color: $barely-background;
-        }
-
-        &--distractor--dark {
-            background: transparent;
-            border: 1px solid $pewter;
-        }
-
-        &--selected {
-            background-color: $brand-black;
-            color: $white;
-
-            &--dark {
-                background: $barely-background;
-                color: $brand-black;
-            }
-        }
-
-        &--selected#{&}--distractor {
-            background-color: rgba($slate-01, 0.5);
-            color: $white;
-            border: none;
-
-            &--dark {
-                background-color: rgba($barely-background, 0.4);
-                color: $brand-black;
-            }
-        }
-
-        &--selected#{&}--answer {
-            background-color: $cadaverous;
-            color: $white;
-            border: none;
-
-            &--dark {
-                background: $jungle-green;
-            }
-        }
-
-        &--answer:not(&--selected) {
-            color: $cadaverous;
-        }
-
-        &--answer--dark:not(&--selected) {
-            color: $jungle-green;
-            background: transparent;
-            border: 1px solid $pewter;
-        }
-
-        &--strike {
-            border-color: $pewter;
-        }
-    }
-
-    &__mcr-check {
-        width: 13px;
-        height: 11px;
-    }
-
-    &__choice-text {
-        outline: none;
-    }
-
     &__toggle-explanation {
         margin-top: 8px;
         margin-bottom: 8px;