@cuemath/leap 3.0.6-rj-2 → 3.0.7-hg1

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.js

@@ -1,1121 +0,0 @@
-import n from "styled-components";
-import { ILLUSTRATIONS as l } from "../../../../assets/illustrations/illustrations.js";
-import e from "../../../ui/layout/flex-view.js";
-import { TOP_NAVIGATION_HEIGHT as d, QUESTIONS_GAP as a } from "../constants.js";
-import { getQuestionBackgroundImage as _, getQuestionBorderColor as m } from "../worksheet-helpers.js";
-const h = n.div(
-  ({ $isConceptIntro: t, $isTeacher: r }) => `
-  position: relative;
-  z-index: 1;
-  & > div:not(:first-child) {
-    display: none;
-  }
-
-  ${t ? `
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: ${r ? 140 : 180}px;
-      ` : ""}
-`
-), E = n(e)(
-  ({ $topOffset: t }) => `
-  scroll-margin-top: ${(t ?? 0) + d + a}px;
-`
-), g = (t) => t.startsWith("calc(") ? t.replace(")", " - 32px)") : t, $ = n(e)(
-  ({ theme: t, $minHeight: r, $paperColor: i, $isActive: p }) => `
-    position: relative;
-    padding: 15px 15px 55px 15px;
-    background-image: ${i && i !== "white" ? `url(${_(i)})` : "none"};
-    background-repeat: repeat;
-    min-height: ${typeof r == "number" ? `${r}px` : g(r)};
-    transition: opacity 0.15s;
-    border-radius: 12px;
-    border: 1px solid ${i ? t.colors[m(i, p)] : "transparent"};
-    ${i ? "" : "padding-right: 0;"}
-`
-), f = n.div(
-  ({ theme: { colors: t }, $dropzoneMinWidth: r, $dropzoneMinHeight: i }) => `
-  height: 100%;
-  min-height: inherit;
-
-  em {
-    font-style: italic;
-  }    
-        
-  & .lrn_widget {
-    font-size: 16px;
-    line-height: 1.6em;
-    color: ${t.BLACK};
-    font-family: "Noto Serif", serif;
-    margin-top: 6px;
-    padding-top: 0;
-    margin-bottom: 16px;
-
-    iframe {
-      max-width: 100%;
-    }
-
-    ul, ol {
-      list-style-type: initial;
-      padding-left: 32px;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
-    .lrn_response_wrapper {
-      margin-top: 0 !important;
-    }
-
-    .lrn_question {
-      margin-bottom: 16px;
-
-      .lrn_stimulus {
-        line-height: 1.6em;
-
-        .lrn_stimulus_content {
-          line-height: 1.6em;
-        }
-      }
-
-      & ~ .lrn_response_wrapper {
-        margin-top: 16px !important;
-      }
-    }
-
-    .lrn_response_input_wrapper {
-      border-color: ${t.GREY_3};
-    }
-
-    .lrn_possibilityList {
-      background-color: ${t.REAL_BLACK_10};
-    }
-
-    .lrn_dropzone {
-      margin: 0 !important;
-      margin: 0 !important;
-      border: 0 !important;
-      outline: 1px dashed ${t.BLACK};
-      height: inherit !important;
-      ${r > 0 ? `
-              min-width: ${r}px !important;
-              width: ${r}px !important;
-              max-width: ${r}px !important;
-            ` : ""}
-      ${i > 0 ? `
-              min-height: ${i}px !important;
-              height: ${i}px !important;
-            ` : ""}
-
-      &:not(.lrn_disabled):hover {
-        outline: 1px dashed ${t.BLUE_4};
-      }
-
-      &.lrn_highlight {
-        outline: 1px dashed ${t.BLUE_4};
-
-        &.lrn_over {
-          background-color: ${t.BLUE_1};
-
-          & .lrn_draggable {
-            opacity: 0.5;
-          }
-        }
-      }
-
-      & .lrn_draggable {
-        box-shadow: none;
-        margin: 0 !important;
-        border: 0 !important;
-        background-color: ${t.WHITE} !important;
-
-        &:after {
-          padding: 0 !important;
-          right: 10px !important;
-        }
-
-        &.lrn_correct:after {
-          color: ${t.GREEN_5} !important;
-        }
-
-        &.lrn_incorrect:after {
-          color: ${t.ORANGE_5} !important;
-        }
-      }
-
-      &.lrn_correct_marker {
-        outline: 2px solid ${t.GREEN_5} !important;
-      }
-
-      &.lrn_incorrect_marker {
-        outline: 2px solid ${t.ORANGE_5} !important;
-      }
-    }
-
-    .lrn_draggable {
-      margin: 4px !important;
-      padding: 8px !important;
-      box-shadow: inset 0 0 0 1px ${t.BLUE_4};
-      background-color: ${t.WHITE} !important;
-      cursor: grab;
-      color: ${t.BLACK} !important;
-
-      & .lrn_icon {
-        display: none;
-      }
-
-      & .lrn_item {
-        margin: 0 !important;
-        width: 100%;
-        text-align: left !important;
-      }
-
-      &.lrn_active,
-      &:not([disabled]):focus,
-      &:not([disabled]):hover {
-        box-shadow: inset 0 0 0 2px ${t.BLUE_4} !important;
-      }
-
-      &[disabled] {
-        inset 0 0 0 1px ${t.WHITE};
-      }
-
-      &.gu-mirror {
-        font-size: 99%;
-        transform: rotate(-6deg);
-      }
-    }
-
-    .lrn-response-validate-wrapper,
-    .lrn-response-validation-wrapper {
-      margin: 0 !important;
-      
-      &.lrn_correct {
-        border: 2px solid ${t.GREEN_5} !important;
-        border-radius: 4px;
-    
-        &::after {
-          background-color: ${t.GREEN_5} !important;
-        }
-      }
-
-      &.lrn_incorrect {
-        border: 2px solid ${t.ORANGE_5} !important;
-        border-radius: 4px;
-    
-        &::after {
-          background-color: ${t.ORANGE_5} !important;
-        }
-      }
-    }
-
-    .lrn_responseIndex {
-      position: absolute !important;
-      top: -12px !important;
-      left: -9px !important;
-      width: 18px !important;
-      height: 18px !important;
-      border-radius: 9px !important;
-      background-color: ${t.GREY_3} !important;
-      font-size: 11px !important;
-      font-weight: bold !important;
-      line-height: 16px !important;
-      padding: 0 !important;
-      text-align: center;
-    }
-
-    .lrn_correctAnswers {
-      margin-top: 24px;
-      padding: 16px 24px;
-      border: 1px solid ${t.GREY_3};
-      border-radius: 12px;
-      background-color: transparent;
-
-      & > :first-child {
-        color: ${t.BLACK};
-        text-transform: capitalize;
-        font-family: "UntitledSans-Medium";
-        font-size: 14px;
-        line-height: 20px;
-      }
-      
-      & .lrn_correctAnswerList {
-        margin-top: 24px;
-        li {
-          background-color: ${t.WHITE};
-          padding-left: 8px;
-          margin-right: 24px;
-          margin-bottom: 24px;
-          outline: 1px solid ${t.GREY_3};
-          cursor: auto;
-        }
-      }
-    }
-
-    .lrn_classification_table .lrn_dropzone {
-      overflow-x: visible !important;
-    }
-  }
-
-  &.attempting .lrn_widget {
-    .lrn-response-validate-wrapper,
-    .lrn-response-validation-wrapper {
-      &.lrn_correct,
-      &.lrn_incorrect {
-        border-color: transparent !important;
-
-        &::after {
-          background-color: transparent !important;
-          color: transparent !important;
-        }
-      }
-    }
-
-    .lrn_dropzone {
-      &.lrn_correct_marker,
-      &.lrn_incorrect_marker {
-        outline-color: ${t.BLUE_4};
-      }
-
-      & .lrn_draggable {
-        &.lrn_correct:after,
-        &.lrn_incorrect:after {
-          color: ${t.BLUE_4} !important;
-        }
-      }
-    }
-  }
-  
-  & .lrn_widget .lrn_textinput {
-    display: inline-flex;
-    vertical-align: middle;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-
-    &::after {
-      right: 4px !important;
-      padding-right: 0px !important;
-    }
-    
-    & .lrn_math_editable {
-      padding-right: 32px;
-    
-      &.lrn_bordered_mathinput {
-        border: none !important;
-        outline: 1px solid ${t.BLACK};
-        padding: 3px 24px 3px 8px;
-        text-align: left;
-        background-color: ${t.WHITE} !important;
-      }
-
-      & .lrn_bordered_mathinput {
-        min-height: 20px;
-        border: 1px solid ${t.BLACK};
-        border-radius: 2px !important;
-        background-color: ${t.WHITE} !important;
-      }
-
-      &.lrn_bordered_mathinput {
-        &.lrn_focused,
-        &:not(.lrn_hide_cursor):hover {
-          outline: 1px solid ${t.BLUE_4};
-        }
-
-        &.lrn_hide_cursor {
-          cursor: auto;
-        }
-      }
-      
-      &:not(.lrn_hide_cursor) .lrn_bordered_mathinput {
-        &.lrn_focused,
-        &:hover {
-          border: 1px solid ${t.BLUE_4};
-        }
-
-      }
-      
-      &.lrn_hide_cursor .lrn_bordered_mathinput {
-        cursor: auto;
-      }
-    }
-    
-    & input {
-      min-height: 40px;
-      padding: 0 32px 0 8px;
-      border: none !important;
-      background-color: ${t.WHITE} !important;
-      outline: 1px solid ${t.BLACK};
-      border-radius: 4px !important;
-
-      &:focus,
-      &:not(:disabled):hover {
-        outline: 1px solid ${t.BLUE_4};
-      }
-    }
-
-    &.lrn_correct {
-      background-color: ${t.GREEN_1} !important;
-      &::after {
-        color: ${t.GREEN_5};
-      }
-      & input {
-        outline: 2px solid ${t.GREEN_5};
-      }
-      & .lrn_bordered_mathinput {
-        &:not(.mq-inner-editable) {
-          outline: 2px solid ${t.GREEN_5};
-        }
-        &.mq-inner-editable {
-          border: 1px solid ${t.GREEN_5};
-        }
-      }
-    }
-    
-    &.lrn_incorrect {
-      background-color: ${t.ORANGE_1} !important;
-      &::after {
-        color: ${t.ORANGE_5};
-      }
-      & input {
-        outline: 2px solid ${t.ORANGE_5};
-      }
-      & .lrn_bordered_mathinput {
-        &:not(.mq-inner-editable) {
-          outline: 2px solid ${t.ORANGE_5};
-        }
-        &.mq-inner-editable {
-          border: 1px solid ${t.ORANGE_5};
-        }
-      }
-    }
-  }
-
-  &.attempting .lrn_widget .lrn_textinput {
-    &.lrn_correct,
-    &.lrn_incorrect {
-      background-color: ${t.WHITE} !important;
-
-      &::after {
-        color: ${t.BLUE_4} !important;
-      }
-
-      & input {
-        outline: 1px solid ${t.BLUE_4} !important;
-      }
-
-      & .lrn_bordered_mathinput {
-        &:not(.mq-inner-editable) {
-          outline: 2px solid ${t.BLUE_4} !important;
-        }
-        &.mq-inner-editable {
-          border: 1px solid ${t.BLUE_4} !important;
-        }
-      }
-    }
-  }
-
-  & .lrn_widget.lrn_mcq .lrn_response {
-    & .lrn_mcqgroup {
-      overflow-x: visible;
-      margin: 0 -8px !important;
-
-      & .lrn-mcq-option {
-        border: none !important;
-        margin-bottom: 12px;
-        padding: 0 6px !important;
-        background-color: transparent !important;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        & .lrn-label {
-          padding: 0;
-          background-color: ${t.GREY_1};
-          border-radius: 12px;
-          border: 0;
-          outline: 1px solid ${t.GREY_2};
-
-          &::before {
-            border: 0;
-            right: 10px;
-            padding: 0;
-            font-size: 14px;
-          }
-
-          & .lrn_choiceLabel {
-            border-radius: 12px 0 0 12px;
-            border-right: 1px solid ${t.GREY_2};
-          }
-
-          & .lrn_contentWrapper {
-            padding: 16px 32px 16px 16px;
-          }
-        }
-
-        & input {
-          visibility: hidden;
-
-          &:not(:disabled) + .lrn-label:hover {
-            outline: 1px solid ${t.BLUE_4};
-          }
-
-          &:disabled + .lrn-label {
-            cursor: not-allowed;
-          }
-        }
-
-        &.lrn_selected .lrn-label {
-          outline: 1px solid ${t.BLUE_4};
-          background-color: ${t.GREY_1};
-        }
-
-        &.lrn_correct .lrn-label {
-          outline: 2px solid ${t.GREEN_5};
-          background-color: ${t.GREEN_1};
-
-          &::before {
-            color: ${t.GREEN_5};
-          }
-        }
-        
-        &.lrn_incorrect .lrn-label {
-          outline: 2px solid ${t.ORANGE_5};
-          background-color: ${t.ORANGE_1};
-
-          &::before {
-            color: ${t.ORANGE_5};
-          }
-        }
-      }
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_mcq .lrn_response .lrn_mcqgroup .lrn-mcq-option {
-    &.lrn_incorrect .lrn-label,
-    &.lrn_correct .lrn-label {
-      outline: 1px solid ${t.BLUE_4};
-      background-color: ${t.GREY_1};
-
-      &::before {
-        color: ${t.BLUE_4};
-      }
-    }
-  }
-
-  & .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {
-    border: 0 !important;
-    border-radius: 0px;
-    padding: 0 2px !important;
-    outline: none !important;
-    margin: 0;
-    background-color: transparent !important;
-
-    &::after {
-      position: absolute !important;
-      font-size: 12px;
-      line-height: 16px;
-      top: -16px !important;
-      left: calc(50% - 6px);
-      margin: 0 !important;
-    }
-
-    &.lrn_tokenhighlight_hover,
-    &.lrn_tokenhighlight_highlight {
-      background-color: ${t.BLUE_1} !important;
-    }
-
-    &.lrn_correct {
-      background-color: ${t.GREEN_1} !important;;
-
-      &::after {
-        color: ${t.GREEN_5} !important;
-      }
-    }
-
-    &.lrn_incorrect {
-      background-color: ${t.ORANGE_1} !important;;
-
-      &::after {
-        color: ${t.ORANGE_5} !important;
-      }
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {
-    &.lrn_correct,
-    &.lrn_incorrect {
-      background-color: ${t.BLUE_1} !important;
-
-      &::after {
-        color: ${t.BLUE_4} !important;
-      }
-    }
-  }
-
-  & .lrn_widget.lrn_numberline {
-    .lrn_incorrect.lrn_btn_arrow {
-      background-color: ${t.ORANGE_1};
-      border: 1px solid ${t.ORANGE_5};
-
-      &::before {
-        color: ${t.ORANGE_5};
-      }
-      &::after {
-        border-color: ${t.ORANGE_5} transparent transparent;
-      }
-    }
-
-    .lrn_correct.lrn_btn_arrow {
-      background-color: ${t.GREEN_1};
-      border: 1px solid ${t.GREEN_5};
-
-      &::before {
-        color: ${t.GREEN_5};
-      }
-      &::after {
-        border-color: ${t.GREEN_5} transparent transparent;
-      }
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_numberline {
-    .lrn_correct.lrn_btn_arrow,
-    .lrn_incorrect.lrn_btn_arrow {
-      background-color: ${t.BLUE_1} !important;
-      border: 1px solid ${t.BLUE_4} !important;
-
-      &::before {
-        color: ${t.BLUE_4} !important;
-      }
-      &::after {
-        border-color: ${t.BLUE_4} transparent transparent !important;
-      }
-    }
-  }
-
-  & .lrn_widget .lrn_combobox {
-    margin: 0 3px !important;
-
-    & .lrn_clozedropdown_answer {
-      position: relative !important;
-      display: inline-flex !important;
-      line-height: 28px !important;
-    }
-
-    &.lrn_not_attempted .lrn_clozedropdown_answer {
-      position: relative !important;
-      border: none !important;
-      background: transparent !important;
-      width: 100px;
-
-      &:after {
-        content: '';
-        position: absolute !important;
-        top: -5px;
-        left: 0;
-        width: 100%;
-        height: 28px;
-        background-color: ${t.WHITE};
-        outline: 1px solid ${t.BLACK};
-        border-radius: 4px;
-        margin: 0 !important;
-      }
-    }
-    
-    & .lrn-cloze-select, &:not(.lrn_not_attempted) .lrn_clozedropdown_answer {
-      background-color: ${t.WHITE} !important;
-      border: 0 !important;
-      padding: 0 32px 0 8px !important;
-      outline: 1px solid ${t.BLACK};
-      border-radius: 4px !important;
-      min-height: 28px;
-      min-width: 100px;
-      height: 28px !important;
-
-      &:after {
-        position: absolute !important;
-        right: 10px !important;
-        padding: 0px !important;
-        margin: 0px !important;
-      }
-    }
-  
-    &.lrn_correct .lrn_clozedropdown_answer {
-      outline: 2px solid ${t.GREEN_5};
-      &:after {
-        color: ${t.GREEN_5} !important;
-      }
-    }
-    &.lrn_incorrect .lrn_clozedropdown_answer {
-      outline: 2px solid ${t.ORANGE_5};
-      &:after {
-        color: ${t.ORANGE_5} !important;
-      }
-    }
-    
-  }
-
-  &.attempting .lrn_widget .lrn_combobox {
-    &.lrn_correct .lrn_clozedropdown_answer,
-    &.lrn_incorrect .lrn_clozedropdown_answer {
-      outline: 2px solid ${t.BLUE_4} !important;
-      &::after {
-        color: ${t.BLUE_4} !important;
-      }
-    }
-  }
-
-  & .lrn_widget.lrn_hotspot .lrn-polygons {
-    .lrn-focused polygon {
-      outline-color: ${t.BLUE_4};
-    }
-
-    .lrn-selected polygon {
-      stroke: ${t.BLUE_4} !important;
-    }
-
-    .lrn_correct polygon {
-      stroke: ${t.GREEN_5} !important;
-    }
-    
-    .lrn_incorrect polygon {
-      stroke: ${t.ORANGE_5} !important;
-    }
-
-    .lrn-polygons-labels li {
-      &.lrn_valid {
-        background: ${t.GREY_3};
-      }
-      &.lrn_correct {
-        background: ${t.GREEN_5};
-      }
-      &.lrn_incorrect {
-        background: ${t.ORANGE_5};
-      }
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_hotspot .lrn-polygons {
-    .lrn_correct polygon,
-    .lrn_incorrect polygon {
-      stroke: ${t.BLUE_4} !important;
-    }
-
-    .lrn-polygons-labels li {
-      &.lrn_correct,
-      &.lrn_incorrect {
-        background: ${t.BLUE_4};
-      }
-    }
-  }
-
-  & .lrn_widget.lrn_choicematrix {
-    .lrn_option {
-      &:: before {
-        display: none;
-      }
-      &::after {
-        position: absolute !important;
-        top: calc(50% - 9px) !important;
-        right: 7px !important;
-      }
-      &.lrn_correct {
-        background-color: ${t.GREEN_1};
-
-        &::after {
-          color: ${t.GREEN_5} !important;
-        }
-      }
-
-      &.lrn_incorrect {
-        background-color: ${t.ORANGE_1};
-
-        &::after {
-          color: ${t.ORANGE_5} !important;
-        }
-      }
-    }
-
-    .lrn_response_input {
-      border-width: 2px !important;
-      margin: 0 !important;
-
-      &.lrn_correct {
-        border-color: ${t.GREEN_5};
-
-        &::after {
-          background-color: ${t.GREEN_5};
-        }
-      }
-
-      &.lrn_incorrect {
-        border-color: ${t.ORANGE_5};
-
-        &::after {
-          background-color: ${t.ORANGE_5};
-        }
-      }
-    } 
-  }
-
-  &.attempting .lrn_widget.lrn_choicematrix {
-    .lrn_option {
-      &.lrn_correct,
-      &.lrn_incorrect {
-        background-color: ${t.BLUE_1};
-
-        &::after {
-          color: ${t.BLUE_4} !important;
-        }
-      }
-    }
-    
-    .lrn_response_input {
-      &.lrn_correct,
-      &.lrn_incorrect {
-        border-color: ${t.BLUE_4};
-
-        &::after {
-          background-color: ${t.BLUE_4};
-        }
-      }
-    }
-  }
-
-  .lrn_widget.lrn_classification {
-    .lrn_response_container {
-      border: 0 !important;
-      vertical-align: bottom !important;
-    }
-
-    .lrn_dropzone {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 8px;
-      height: unset !important;
-    }
-
-    .lrn_dropzone .lrn_draggable {
-      display: inline-flex;
-      align-items: center;
-      padding: 8px 30px 8px 8px !important;
-      margin-bottom: 4px !important;
-      outline: 1px solid ${t.BLUE_4} !important;
-      background-color: transparent !important;
-
-      &.lrn_incorrect {
-        outline: 1px solid ${t.ORANGE_5} !important;
-      }
-
-      &.lrn_correct {
-        outline: 1px solid ${t.GREEN_5} !important;
-      }
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_classification {
-    .lrn_dropzone .lrn_draggable {
-      &.lrn_correct,
-      &.lrn_incorrect {
-        outline: 1px solid ${t.BLUE_4} !important;
-      }
-    }
-  }
-
-  .lrn_widget.lrn_association {
-    .lrn_dropzone .lrn_draggable {
-      display: flex;
-      align-items: center;
-      background-color: transparent !important;
-    }
-  }
-
-  &.attempting .lrn_widget.lrn_association {
-    .lrn_dropzone .lrn_draggable {
-      background-color: ${t.WHITE} !important;
-    }
-  }
-
-  .lrn_widget.lrn_clozeassociation {
-    .lrn_dropzone .lrn_draggable {
-      display: flex;
-      align-items: center;
-      background-color: transparent !important;
-    }
-
-    .lrn_response_input {
-      padding-bottom: 2px !important;
-    }
-  }
-  
-  &.attempting .lrn_widget.lrn_clozeassociation {
-    .lrn_dropzone .lrn_draggable {
-      background-color: ${t.WHITE} !important;
-    }
-  }
-
-  .lrn_widget.lrn_drawing {
-    .lrn-label span,
-    .lrn_toolbar_small_label {
-      display: none !important;
-    }
-  }
-
-  &.hidden {
-    visibility: hidden;
-  }
-
-  &.correct-answers-hidden {
-    .lrn_correctAnswers {
-      display: none !important;
-    }
-  }
-  
-
-  &.response-hidden .lrn_response_wrapper {
-    display: none;
-  }
-  
-  &.response-code-hidden .lrn_response_wrapper {
-    width: 75%;
-    margin: 0 auto;
-    .lrn_display_correct_answer_enabled {
-      >:not(:first-child) {
-        display: none;
-      }
-        
-      :first-child {
-        font-family: 'UntitledSans-Regular';
-        font-size: 16px !important;
-        line-height: 24px !important;
-        text-align: center;
-        text-wrap: balance;
-      }
-
-      .lrn_textinput {
-        display: none !important;
-      }
-    }
-    
-    :first-child {
-      font-family: 'UntitledSans-Regular';
-      font-size: 16px !important;
-      line-height: 24px !important;
-      text-align: center;
-      text-wrap: balance;
-    }
-      
-    .lrn_correctAnswers {
-      display: none;
-    }
-  }
-
-  &.lesson-overview {
-    .lrn_widget .lrn_question {
-      table {
-        width: calc(100% - 48px) !important;
-        margin-left: 24px !important;
-        border: 0px !important;
-        
-        td {
-          border: 0px !important;
-          width: 100% !important;
-          background-color: transparent !important;
-
-          p {
-            display: flex !important;
-            justify-content: center !important;
-            font-family: "Athletics-Medium" !important;
-            font-size: 28px !important;
-            margin-bottom: 32px !important;
-          }
-
-          ul {
-            list-style-type: none;
-            padding-left: 0;
-
-            li {
-              position: relative !important;
-              font-family: "UntitledSans-Regular" !important;
-              font-size: 16px !important;
-              margin: 12px 0 !important;
-
-              &::before {
-                content: "A";
-                display: inline-block;
-                width: 24px;
-                height: 24px;
-                margin-right: 12px;
-                color: transparent;
-                background-image: url(${l.BULLET_YELLOW});
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.concept-intro {
-    .lrn_widget .lrn_question {
-      .lrn_stimulus {
-        display: flex !important;
-        justify-content: center !important;
-      }
-      .lrn_stimulus_content {
-        width: 75% !important;
-        font-family: "Athletics-Light" !important;
-        font-size: 48px !important;
-        line-height: 52px !important;
-        text-align: center;
-        text-wrap: balance;
-
-        * {
-          font-size: 48px !important;
-        }
-      }
-    }
-  }
-
-  &.system-intro .lrn_widget {
-    display: none;
-  }
-`
-), w = n(e)`
-  position: relative;
-  z-index: 2;
-  padding-right: 8px;
-`, R = n(e)(
-  ({
-    theme: {
-      layout: { gutter: t },
-      colors: r
-    }
-  }) => `
-  position: relative;
-  padding: ${t * 1}px ${t * 1}px ${t * 0.75}px;
-  border-top-left-radius: ${t * 0.375}px;
-  border-top-right-radius: ${t * 0.5}px;
-  background-color: ${r.YELLOW_2};
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: calc(100% - 1px);
-    border-bottom: 44px solid ${r.YELLOW_2};
-    border-right: 24px solid transparent;
-  }
-`
-), k = n(e)(
-  ({ $topOffset: t }) => `
-  position: sticky;
-  top: ${t + a / 2}px;
-  z-index: 2;
-`
-), G = n.div`
-  position: absolute;
-  top: -16px;
-  right: -16px;
-  width: 40px;
-  height: 40px;
-`, L = n.img`
-  display: block;
-  transform: translate(-15px, -15px);
-  width: calc(100% + 30px);
-  border-radius: 12px 12px 0 0;
-  margin-bottom: 18px;
-`, o = n.div(
-  ({ theme: { colors: t } }) => `
-  color: ${t.BLACK};
-  font-size: 16px;
-  line-height: 1.6em;
-  font-family: 'Noto Serif', serif;
-
-  & > *:not(:last-child) {
-    margin-bottom: 1em;
-  }
-
-  & strong {
-    font-weight: bold;
-  }
-
-  & i {
-    font-style: italic;
-  }
-
-  & ul, ol {
-    list-style-type: initial;
-    padding-left: 1.5em;
-
-    & li:not(:last-child) {
-      margin-bottom: 8px;
-    }
-  }
-
-  & ol {
-    list-style-type: decimal;
-  }
-
-  & ul ul {
-    list-style-type: circle;
-  }
-
-  & img {
-    max-width: 100%;
-    height: inherit;
-  }
-
-  & table {
-    td {
-      padding: 8px;
-    }
-    &:not(.table-no-border) td {
-      border: 1px solid ${t.REAL_BLACK};
-    }
-  }
-`
-), y = n(o)`
-  margin: 8px 0;
-`, N = o, A = n(o)(
-  ({ theme: { colors: t } }) => `
-  width: 50%;
-  padding-right: 16px;
-  margin-top: 16px;
-  border-right: 1px solid ${t.GREY_2};
-  min-height: 100%;
-  align-self: stretch;
-`
-), B = n(e)(
-  ({ $canScribble: t, theme: r }) => `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: ${t ? r.zIndex.CANVAS_SCRIBBLING : 1};
-  pointer-events: ${t ? "auto" : "none"};
-`
-);
-export {
-  B as CueCanvasWrapper,
-  o as CustomElement,
-  y as Hint,
-  w as ItemHeader,
-  R as ItemHeaderTag,
-  h as LearnosityQuestionContainer,
-  L as LessonOverviewBanner,
-  $ as QuestionContainer,
-  E as QuestionContainerWrapper,
-  k as QuestionHeaderWrapper,
-  G as QuestionValidationAnimationWrapper,
-  f as QuestionWrapper,
-  N as Solution,
-  A as StimulusReview
-};
-//# sourceMappingURL=worksheet-question-styled.js.map