@pocketprep/ui-kit 3.4.52 → 3.4.54

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -0,0 +1,710 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-question-mobile-matrix-choices-container"
+    >
+        <div
+            class="uikit-question-mobile-matrix-choices-container__choices-container"
+            :class="{
+                'uikit-question-mobile-matrix-choices-container__choices-container--correct': 
+                    (showMatrixAnswers || reviewMode) && isMatrixQuestionCorrect,
+                'uikit-question-mobile-matrix-choices-container__choices-container--incorrect': 
+                    (showMatrixAnswers || reviewMode) && !isMatrixQuestionCorrect,
+                
+            }"
+            v-dark="isDarkMode"
+            v-breakpoint:questionEl="breakpoints"
+        >
+            <div 
+                class="uikit-question-mobile-matrix-choices-container__row-container"
+                v-for="(rowLabel, rowIndex) in matrixRowLabels"
+                :key="rowIndex"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+            >
+                <div
+                    class="uikit-question-mobile-matrix-choices-container__row"
+                    :class="{
+                        'uikit-question-mobile-matrix-choices-container__row--expanded':
+                            expandedRowNumbers.includes(rowIndex),
+                    }"
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    @click.stop="toggleChoiceDropdown(rowIndex)"
+                >
+                    <Icon
+                        v-if="(showMatrixAnswers || reviewMode) && correctRow(rowIndex)"
+                        class="uikit-question-mobile-matrix-choices-container__row-label-correct-icon"   
+                        type="check"
+                    />
+                    <Icon
+                        v-if="(showMatrixAnswers || reviewMode) && !correctRow(rowIndex)"
+                        class="uikit-question-mobile-matrix-choices-container__row-label-incorrect-icon"   
+                        type="incorrect"
+                    />
+                    <div 
+                        class="uikit-question-mobile-matrix-choices-container__row-label"
+                        v-dark="isDarkMode"
+                    >
+                        {{ stripText(rowLabel) }}
+                        <Icon
+                            class="uikit-question-mobile-matrix-choices-container__toggle-row-icon"
+                            :class="{
+                                'uikit-question-mobile-matrix-choices-container__toggle-row-icon--up':
+                                    expandedRowNumbers.includes(rowIndex),
+                            }"
+                            v-dark="isDarkMode"
+                            type="accordionArrow"
+                        />
+                    </div>
+                    <div
+                        class="uikit-question-mobile-matrix-choices-container__selected-choice-labels-container"
+                    >
+                        <div
+   
+                            v-dark="isDarkMode"
+                            v-for="(colHeader, colHeaderIndex) in selectedColumnHeaders"
+                            :key="colHeaderIndex"
+                        >
+                            <template v-if="
+                                selectedColumnHeaders && 
+                                    selectedColumnHeaders[rowIndex] && 
+                                    selectedColumnHeaders[rowIndex][colHeaderIndex]">
+                                <div
+                                    class="uikit-question-mobile-matrix-choices-container__selected-choice-labels"
+                                    v-dark="isDarkMode"
+                                    v-breakpoint:questionEl="breakpoints"
+                                >
+                                    {{ selectedColumnHeaders[rowIndex][colHeaderIndex] === 
+                                        selectedColumnHeaders[rowIndex][selectedColumnHeaders[rowIndex].length - 1] ?
+                                            stripText(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
+                                            `${stripText(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
+                                    }}
+
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <div 
+                    v-if="
+                        expandedRowNumbers.includes(rowIndex) &&
+                            question.type === 'Matrix Checkbox' &&
+                            matrixCheckboxGrid &&
+                            matrixCheckboxGrid[rowIndex]"
+                >
+                    <div
+                        class="uikit-question-mobile-matrix-choices-container__choice"
+                        v-dark="isDarkMode"
+                        v-for="(column, columnIndex) in matrixColumnLabels"
+                        :key="columnIndex"
+                    >
+                        <Checkbox
+                            v-if="(showMatrixAnswers || reviewMode) &&
+                                correctAnswerButNotSelected(rowIndex, columnIndex)"
+                            :model-value="true"
+                            :is-dark-mode="isDarkMode"
+                            :disabled="showMatrixAnswers || reviewMode"
+                            :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
+                        />
+                        <Checkbox
+                            v-else
+                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
+                            :is-dark-mode="isDarkMode"
+                            :disabled="showMatrixAnswers || reviewMode"
+                            :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
+                        />
+                        <div 
+                            class="uikit-question-mobile-matrix-choices-container__checkbox-label"
+                            :class="{
+                                'uikit-question-mobile-matrix-choices-container__checkbox-label--distractor':
+                                    (showMatrixAnswers || reviewMode) &&
+                                    matrixChoiceLayout[rowIndex] &&
+                                    matrixChoiceLayout[rowIndex][columnIndex]?.startsWith('d'),
+                            }"
+                        >
+                            {{ stripText(column) }}
+                        </div>
+                    </div>
+                </div>
+                <div 
+                    v-if="expandedRowNumbers.includes(rowIndex) && 
+                        question.type === 'Matrix Radio Button' && 
+                        matrixRadioGrid && matrixRadioGrid[rowIndex]"
+                >
+                    <MobileMatrixRadioGroup
+                        :modelValue="getRadioRowSelection(rowIndex)"
+                        :review-mode="reviewMode"
+                        :show-answers="showMatrixAnswers"
+                        class="uikit-question-mobile-matrix-choices-container__radio-btns"
+                        :choices="getRadioRowChoices(rowIndex)"
+                        :labels="matrixColumnLabels"
+                        :matrix-answer-keys="matrixAnswerKeys"
+                        :is-dark-mode="isDarkMode"
+                        :question-el="questionEl"
+                        :breakpoints="breakpoints"
+                        :disabled="false"
+                        @update:modelValue="updateRadioRowSelection(rowIndex, $event)"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit, Watch } from 'vue-facing-decorator'
+import Icon from '../../Icons/Icon.vue'
+import PocketButton from '../../Buttons/Button.vue'
+import Checkbox from '../../Forms/Checkbox.vue'
+import MobileMatrixRadioGroup from './MobileMatrixRadioGroup.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TBreakPointsObject, IRadioOptions, TMatrixChoiceKey  } from './../question'
+import type { Study } from '@pocketprep/types'
+import BrandColors from '../../../pocketprep-export.module.scss'
+
+@Component({
+    components: {
+        Icon,
+        Checkbox,
+        PocketButton,
+        MobileMatrixRadioGroup,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class MobileMatrixChoicesContainer extends Vue {
+    @Prop({ default: false }) reviewMode!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+    @Prop() question!: Study.Class.QuestionJSON
+    @Prop() matrixChoiceLayout!: string[][]
+    @Prop({ default: false }) showMatrixAnswers!: boolean
+    @Prop({ default: false }) isUnanswered!: boolean
+    @Prop({ default: false }) isMatrixQuestionCorrect!: boolean
+    @Prop() matrixAnswerKeys!: TMatrixChoiceKey[]
+    @Prop() matrixDistractorKeys!: TMatrixChoiceKey[]
+    @Prop() selectedMatrixChoices!: TMatrixChoiceKey[]
+    @Prop() matrixChoices!: TMatrixChoiceKey[]
+
+    matrixCheckboxGrid: boolean[][] | undefined = undefined
+    matrixRadioGrid: IRadioOptions[] | undefined = undefined
+    expandedRowNumbers: number[] = []
+    selectedColumnHeaders: string[][] = []
+    brandColors = BrandColors
+
+    stripText (string?: string) {
+        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    }
+
+    get defaultCheckboxGrid () {
+        return this.matrixChoiceLayout?.map(row => {
+            const choiceRow = row.map(() => false)
+            return choiceRow
+        })
+    }
+
+    get defaultRadioButtonGrid () {
+        return this.matrixChoiceLayout?.map(row => {
+            return {
+                choices: row as TMatrixChoiceKey[],
+                value: null,
+            }
+        })
+    }
+
+    get matrixRowLabels () {
+        return this.question.matrixLabels?.rows
+    }
+
+    get matrixColumnLabels () {
+        return this.question.matrixLabels?.columns
+    }
+
+    mounted () {
+        if (this.question.type === 'Matrix Checkbox') {
+            this.matrixCheckboxGrid = this.defaultCheckboxGrid
+        }
+
+        if (this.question.type === 'Matrix Radio Button') {
+            this.matrixRadioGrid = this.defaultRadioButtonGrid
+        }
+
+        this.question.matrixChoiceLayout?.forEach(() => {
+            this.selectedColumnHeaders.push([])
+        })
+    }
+
+    toggleChoiceDropdown (rowIndex: number) {
+        const includedRowNumberIndex = this.expandedRowNumbers.findIndex(row => row === rowIndex)
+        if (includedRowNumberIndex === -1) {
+            this.expandedRowNumbers.push(rowIndex)
+        } else {
+            this.expandedRowNumbers.splice(includedRowNumberIndex, 1)
+        }
+    }
+
+    selectedChoiceKey (rowIndex: number, colIndex: number) {
+        const row = rowIndex += 1
+        const column = colIndex += 1
+        if (this.selectedMatrixChoices.length && this.matrixAnswerKeys.length) {
+            const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
+                const substring = choice.substring(1)
+                return substring === `${row}_${column}`
+            })
+
+            return matrixSelectedChoiceKey
+        }
+        return undefined
+    }
+
+    getRadioRowSelection (rowIndex: number) {
+        return this.matrixRadioGrid?.[rowIndex]?.value
+    }
+
+    getRadioRowChoices (rowIndex: number) {
+        const choices = this.matrixRadioGrid?.[rowIndex]?.choices
+        return choices
+    }
+
+    updateRadioRowSelection (rowIndex: number, choiceKey: TMatrixChoiceKey) {
+        const row = this.matrixRadioGrid?.[rowIndex]
+        if (row) {
+            row.value = choiceKey
+
+            // update row header label
+            const choiceKeyIndex = row.choices.findIndex(choice => choice === choiceKey)
+            const rowHeader = this.question.matrixLabels?.columns[choiceKeyIndex]
+            if (rowHeader) {
+                this.selectedColumnHeaders[rowIndex]?.pop()
+                this.selectedColumnHeaders[rowIndex]?.push(rowHeader)
+            }
+        }
+    }
+
+    correctlySelectedChoice (rowIndex: number, colIndex: number) {
+        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
+            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
+                return true
+            }
+        }
+        return false
+    }
+
+    incorrectlySelectedChoice (rowIndex: number, colIndex: number) {
+        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
+            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            if (selectedChoice && selectedChoice.startsWith('d')) {
+                return true
+            }
+        }
+        return false
+    }
+                        
+    correctAnswerButNotSelected (rowIndex: number, colIndex: number) {
+        const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${colIndex + 1}`)
+        return answerKey && !selectedChoice
+    }
+
+    checkboxContainerStyling (rowIndex: number, columnIndex: number) {
+        const isReviewMode = this.showMatrixAnswers || this.reviewMode
+        const incorrectlySelectedChoice = this.incorrectlySelectedChoice(rowIndex, columnIndex)
+
+        // check box is correctlySelected
+        if (isReviewMode && this.correctlySelectedChoice(rowIndex, columnIndex)) {
+            const borderColor = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
+            return {
+                borderColor: `${borderColor} !important`,
+                background: `${borderColor} !important`,
+            }
+        }
+
+        if (isReviewMode && incorrectlySelectedChoice) {
+            return {
+                background: `${this.brandColors.steel} !important`,
+                border: `1px solid ${this.brandColors.steel} !important`,
+            }
+        }
+    }
+
+    checkboxCheckStyling (rowIndex: number, columnIndex: number) {
+        const isReviewMode = this.showMatrixAnswers || this.reviewMode
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            const color = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
+            return {
+                color: `${color} !important`,
+            }
+        }
+    }
+
+    correctRow (rowIndex: number) {
+        if (this.question?.matrixChoiceLayout && this.question?.matrixChoiceLayout[rowIndex]) {
+            if (
+                this.question?.type === 'Matrix Checkbox' && 
+                this.matrixCheckboxGrid &&
+                this.matrixCheckboxGrid[rowIndex]
+            ) {
+                const correctAnswerKeys = this.question?.matrixChoiceLayout[rowIndex].filter(choice => 
+                    choice.startsWith('a')
+                )
+                const selectedAnswerKeys = this.matrixCheckboxGrid[rowIndex].map((choice, choiceIndex) => {
+                    return this.selectedChoiceKey(rowIndex, choiceIndex)
+                })
+                const correctSelectedKeys = this.matrixCheckboxGrid[rowIndex].filter((choice, choiceIndex) => {
+                    const selectedChoice = this.selectedChoiceKey(rowIndex, choiceIndex)
+                    return selectedChoice?.startsWith('a')
+                })
+                return !selectedAnswerKeys.some(choice => choice?.startsWith('d')) && 
+                    (correctAnswerKeys.length === correctSelectedKeys.length)
+            }
+
+            if (
+                this.question?.type === 'Matrix Radio Button' && 
+                this.matrixRadioGrid &&
+                this.matrixRadioGrid[rowIndex]
+            ) {
+                if (this.matrixRadioGrid[rowIndex] && this.matrixRadioGrid[rowIndex].value) {
+                    return this.matrixRadioGrid[rowIndex].value.startsWith('a')
+                }
+                return false
+            }
+        }
+        return false
+    }
+
+    convertSelectedMatrixChoiceToCheckboxGrid () {
+        const checkboxGrid = this.defaultCheckboxGrid
+        this.selectedMatrixChoices.forEach(choice => {
+            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+            const colIndex = Number(choice.split('_').pop()) - 1
+            if (checkboxGrid && checkboxGrid[rowIndex]) {
+                checkboxGrid[rowIndex][colIndex] = true
+                if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
+                    const columnHeader = this.question.matrixLabels?.columns[colIndex]
+                    this.selectedColumnHeaders[rowIndex].push(columnHeader)
+                }
+            }
+        })
+        return checkboxGrid
+    }
+
+    convertSelectedMatrixChoiceToRadioBtnGrid () {
+        const radioBtnGrid = this.matrixRadioGrid
+        this.selectedMatrixChoices.forEach(choice => {
+            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+            const colIndex = Number(choice.split('_').pop()) - 1
+            if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
+                const columnHeader = this.question.matrixLabels?.columns[colIndex]
+                this.selectedColumnHeaders[rowIndex].push(columnHeader)
+            }
+            if (radioBtnGrid && radioBtnGrid[rowIndex]) {
+                radioBtnGrid[rowIndex].value = choice
+            }
+        })
+        return radioBtnGrid
+    }
+
+    @Emit('emitSelectedMatrixChoice')
+    emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
+        return matrixChoiceKeys
+    }
+
+    @Emit('emitAnsweredMatrixRowIndex')
+    emitAnsweredMatrixRowIndex (answeredRowIndexes: number[]) {
+        return answeredRowIndexes
+    }
+
+    @Watch('matrixCheckboxGrid', { deep: true })
+    matrixCheckboxGridChange () {
+        if (this.matrixChoiceLayout && this.matrixCheckboxGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
+            const selectedCheckboxChoices: TMatrixChoiceKey[] = []
+            const answeredCheckBoxRowIndexes: number[] = []
+
+            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
+                row.forEach((choice, choiceIndex) => {
+                    if (
+                        choice && 
+                            this.matrixChoiceLayout[rowIndex] && 
+                            this.matrixChoiceLayout[rowIndex][choiceIndex]
+                    ) {
+                        const choiceKey = this.matrixChoiceLayout[rowIndex][choiceIndex] as TMatrixChoiceKey
+                        selectedCheckboxChoices.push(choiceKey)
+                        if (!answeredCheckBoxRowIndexes.some(index => index === rowIndex)) {
+                            answeredCheckBoxRowIndexes.push(rowIndex)
+                        }
+                    }
+                })
+            })
+
+            this.emitSelectedMatrixChoice(selectedCheckboxChoices)
+            this.emitAnsweredMatrixRowIndex(answeredCheckBoxRowIndexes)
+        }
+    }
+
+    @Watch('matrixCheckboxGrid', { deep: true })
+    addRemoveCheckboxColumnHeaders () {
+        if (this.matrixCheckboxGrid) {
+            const selectedCheckboxColumnLabels: string[][] = []
+            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
+                selectedCheckboxColumnLabels.push([])
+                row.forEach((choice, choiceIndex) => {
+                    if (
+                        choice 
+                        && this.question.matrixLabels?.columns 
+                        && this.question.matrixLabels?.columns[choiceIndex]
+                    ) {
+                        const columnLabel = this.question.matrixLabels?.columns[choiceIndex]
+                        if (selectedCheckboxColumnLabels[rowIndex]) {
+                            selectedCheckboxColumnLabels[rowIndex].push(columnLabel)
+                        }
+                    }
+                })
+                this.selectedColumnHeaders = selectedCheckboxColumnLabels
+            })
+        }
+    }
+
+    @Watch('matrixRadioGrid', { deep: true })
+    matrixRadioGridChange () {
+        if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
+            const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
+            const answeredRadioBtnRowIndexes: number[] = []
+
+            this.matrixRadioGrid.forEach((row, index) => {
+                if (row.value) {
+                    selectedRadioButtonChoices.push(row.value)
+                    if (!answeredRadioBtnRowIndexes.some(rowIndex => rowIndex === index)) {
+                        answeredRadioBtnRowIndexes.push(index)
+                    }
+                }
+            })
+
+            this.emitSelectedMatrixChoice(selectedRadioButtonChoices)
+            this.emitAnsweredMatrixRowIndex(answeredRadioBtnRowIndexes)
+        }
+    }
+
+    @Watch('showMatrixAnswers')
+    closeRows () {
+        if (this.showMatrixAnswers) {
+            this.expandedRowNumbers = []
+        }
+    }
+
+    @Watch('selectedMatrixChoices')
+    selectedMatrixChoicesChange () {
+        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Checkbox') {
+            const selectedCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid() 
+            this.matrixCheckboxGrid = selectedCheckboxGrid ? selectedCheckboxGrid : this.defaultCheckboxGrid
+        }
+
+        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Radio Button') {
+            const selectedRadioBtnGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid() 
+            this.matrixRadioGrid = selectedRadioBtnGrid
+        }
+    }
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-mobile-matrix-choices-container {
+    width: 100%;
+    max-width: 325px;
+    &:not(&--mobile) {
+        display: none
+    }
+
+    &__choices-container {
+        cursor: default;
+        position: relative;
+        outline: none;
+        transition: 0.1s width ease;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: -8px;
+            bottom: -8px;
+            left: -8px;
+            right: -8px;
+            border-radius: 11px;
+            pointer-events: none;
+        }
+
+        &--incorrect {
+            &::after {
+                display: block;
+                border: 2px solid $pepper;
+            }
+
+            &--dark::after {
+                border-color: $rosa;
+            }
+        }
+
+        &--correct {
+            &::after {
+                display: block;
+                border: 2px solid $cadaverous;
+            }
+
+            &--dark::after {
+                border-color: $jungle-green;
+            }
+        }
+
+    }
+
+    &__row-container {
+        margin-bottom: 9px;
+        box-shadow: 0px 1px 4px 0px rgba(71, 89, 103, 0.30);
+        border: 0.5px solid ($pewter, 0.85);
+        border-radius: 5px;
+
+        &--dark {
+            border: 0.5px solid rgba($pewter, 0.85);
+            border-radius: 5px;
+            background: $brand-black;
+            box-shadow: 0px 1px 4px 0px $jet;
+        }
+    }
+
+    &__row {
+        cursor: pointer;
+        padding: 12px 36px 12px 15px;
+        align-items: center;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 0.5px solid rgba($pewter, 0.85);
+        background: $white;
+
+        &--dark {
+            background: $brand-black;
+        }
+
+        &--expanded {
+            border-radius: 5px 5px 0px 0px;
+        }
+    }
+
+    &__row-label-correct-icon,
+    &__row-label-incorrect-icon {
+        position: absolute;
+        right: 0;
+        margin-right: 12px;
+    }
+
+    &__row-label-correct-icon {
+        color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
+    }
+
+    &__row-label-incorrect-icon {
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    &__row-label {
+        color: $brand-black;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            color: $barely-background;
+        }
+    }
+
+    &__toggle-row-icon {
+        margin-left: 8px;
+        color: $brand-blue;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
+    &__selected-choice-labels-container {
+        display: flex;
+    }
+
+    &__selected-choice-labels {
+        color: $ash;
+        font-size: 14px;
+        font-weight: 500;
+        height: 19px;
+        margin-right: 4px;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__choice {
+        background: $white;
+        display: flex;
+        padding: 11px 15px 12px 15px;
+        align-items: flex-start;
+        gap: 12px;
+        align-self: stretch;
+        border: 0.5px solid rgba($pewter, 0.85);
+        border-top: none;
+        color: $brand-black;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &:last-child {
+            border-radius: 0px 0px 5px 5px;
+        }
+
+        &--dark {
+            background: $brand-black;
+            color: $barely-background;
+        }
+
+        .uikit-checkbox--disabled {
+            background: transparent;
+        }
+    }
+
+    &__checkbox-label {
+        &--distractor {
+            text-decoration: line-through;
+        }
+    }
+
+    &__radio-btns {
+        width: 100%;
+        max-width: 345px;
+    }
+}
+</style>