@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

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

@@ -0,0 +1,1121 @@
+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