@citolab/qti-components 7.0.5 → 7.0.6-beta.0

package/cdn/qti-test/index.js

@@ -1,3598 +0,0 @@
-var xt=Object.defineProperty;var wt=Object.getOwnPropertyDescriptor;var a=(i,o,t,e)=>{for(var r=e>1?void 0:e?wt(o,t):o,n=i.length-1,d;n>=0;n--)(d=i[n])&&(r=(e?d(o,t,r):d(r))||r);return e&&r&&xt(o,t,r),r};import{html as Lt}from"lit";import{customElement as Tt}from"lit/decorators.js";var kt=String.raw,Ct=kt`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" />
-  <xsl:template match="@*|node()">
-    <xsl:copy>
-      <xsl:apply-templates select="@*|node()"/>
-    </xsl:copy>
-  </xsl:template>
-
-  <!-- remove existing namespaces -->
-  <xsl:template match="*">
-    <!-- remove element prefix -->
-    <xsl:element name="{local-name()}">
-      <!-- process attributes -->
-      <xsl:for-each select="@*">
-        <!-- remove attribute prefix -->
-        <xsl:attribute name="{local-name()}">
-          <xsl:value-of select="."/>
-        </xsl:attribute>
-      </xsl:for-each>
-    <xsl:apply-templates/>
-  </xsl:element>
-</xsl:template>
-</xsl:stylesheet>`;function j(i,o,t){i.querySelectorAll(o).forEach(e=>{let r=`${o}-${t}`,n=P(e,r);e.replaceWith(n)})}function W(i,o){i.querySelectorAll("*").forEach(t=>{let e=t.classList;e&&e.forEach(r=>{if(r.startsWith(`${o}:`)){let n=r.slice(`${o}:`.length),d=`${t.nodeName}-${n}`,s=P(t,d);t.replaceWith(s)}})})}function P(i,o){let t=document.createElement(o);for(let e of i.attributes)t.setAttribute(e.name,e.value);for(;i.firstChild;)t.appendChild(i.firstChild);return t}function K(i){let o=[];return i.querySelectorAll("qti-assessment-item-ref").forEach(t=>{let e=t.getAttribute("identifier"),r=t.getAttribute("href"),n=t.getAttribute("category");o.push({identifier:e,href:r,category:n})}),o}var X=null;function I(i,o=!1){return o&&X!==null&&X.abort(),new Promise((t,e)=>{let r=new XMLHttpRequest;X=r,r.open("GET",i,!0),r.responseType="document",r.onload=()=>{r.status>=200&&r.status<300?t(r.responseXML):e(r.statusText)},r.onerror=()=>{e(r.statusText)},r.send()})}function M(i){return new DOMParser().parseFromString(i,"text/xml")}function w(i){let o=new XSLTProcessor,t=new DOMParser().parseFromString(Ct,"text/xml");return o.importStylesheet(t),o.transformToFragment(i,document)}function F(i,o){o.endsWith("/")||(o+="/"),i.querySelectorAll("[src],[href],[primary-path]").forEach(t=>{let e="";t.getAttribute("src")&&(e="src"),t.getAttribute("href")&&(e="href"),t.getAttribute("primary-path")&&(e="primary-path");let r=t.getAttribute(e)?.trim();if(!r.startsWith("data:")&&!r.startsWith("http")){let n=o+encodeURI(r);t.setAttribute(e,n)}})}function G(i){i.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value').forEach(t=>{let e=document.createComment(t.textContent);t.replaceChild(e,t.firstChild)})}function J(i){i.querySelectorAll("qti-stylesheet").forEach(o=>o.remove())}var Y=()=>{let i,o={async load(t,e=!1){return new Promise(r=>{I(t,e).then(n=>(i=n,o.path(t.substring(0,t.lastIndexOf("/"))),r(o)))})},parse(t){return i=M(t),o},path:t=>(F(i,t),o),fn(t){return t(i),o},pciHooks(t){let e=["hook","module"],r=t.substring(0,t.lastIndexOf("/"));for(let n of e)i.querySelectorAll("["+n+"]").forEach(s=>{let p=s.getAttribute(n);!p.startsWith("data:")&&!p.startsWith("http")&&(s.setAttribute("base-url",t),s.setAttribute("module",r+"/"+encodeURI(p+(p.endsWith(".js")?"":".js"))))});return o},extendElementName:(t,e)=>(j(i,t,e),o),extendElementsWithClass:(t="extend")=>(W(i,t),o),customInteraction(t,e){let r=i.querySelector("qti-custom-interaction"),n=r.querySelector("object");return r.setAttribute("data-base-ref",t),r.setAttribute("data-base-item",t+e),r.setAttribute("data",n.getAttribute("data")),r.setAttribute("width",n.getAttribute("width")),r.setAttribute("height",n.getAttribute("height")),r.removeChild(n),o},convertCDATAtoComment(){return G(i),o},stripStyleSheets(){return J(i),o},html(){return new XMLSerializer().serializeToString(w(i))},xml(){return new XMLSerializer().serializeToString(i)},htmlDoc(){return w(i)},xmlDoc(){return i}};return o};var N=()=>{let i,o={async load(t){return new Promise((e,r)=>{I(t).then(n=>(i=n,o.path(t.substring(0,t.lastIndexOf("/"))),e(o)))})},parse(t){return i=M(t),o},path:t=>(F(i,t),o),fn(t){return t(i),o},items(){return K(i)},html(){return new XMLSerializer().serializeToString(w(i))},xml(){return new XMLSerializer().serializeToString(i)},htmlDoc(){return w(i)},xmlDoc(){return i}};return o};var Z=i=>{class o extends i{constructor(...e){super(...e),this.addEventListener("qti-assessment-test-connected",()=>{}),this.addEventListener("qti-load-item-request",({detail:r})=>{r.promise=(async()=>(await Y().load(`${r.href}`,r.cancelPreviousRequest)).htmlDoc())()}),this.addEventListener("qti-interaction-changed",r=>{}),this.addEventListener("qti-outcome-changed",()=>{})}}return o};var Q=i=>{class o extends i{constructor(...e){super(...e),this.addEventListener("qti-request-test-item",({detail:r})=>{if(!r)return;this._clearLoadedItems();let n=this.testElement.el.querySelector(`qti-assessment-item-ref[identifier="${r}"]`),d=this._loadItemRequest(n.href,!1),s=n.closest("qti-test-part").identifier,p=n.closest("qti-assessment-section").identifier;this._testContext={...this._testContext,navPartId:s,navSectionId:p,navItemId:r,navItemLoading:!0},d?d.then(c=>{n.xmlDoc=c,requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("qti-item-connected",{bubbles:!0,composed:!0}))),this._testContext={...this._testContext,navItemLoading:!1}}).catch(c=>console.error("Failed to load item:",c)):console.info("Load item request was not handled:",n.href)}),this.addEventListener("qti-assessment-test-connected",()=>{let r=this._testContext.navItemId;r||(r=this.testElement.el.querySelector("qti-assessment-item-ref").identifier),this.dispatchEvent(new CustomEvent("qti-request-test-item",{detail:r,bubbles:!0,composed:!0}))})}_clearLoadedItems(){let e=this.testElement.el.querySelectorAll("qti-assessment-test qti-assessment-item-ref");Array.from(e).forEach(r=>{r.xmlDoc=null})}_loadItemRequest(e,r=!0){let n=new CustomEvent("qti-load-item-request",{bubbles:!0,composed:!0,detail:{href:e,promise:null,cancelPreviousRequest:r}});return this.dispatchEvent(n),n.detail.promise}}return o};var tt=i=>{class o extends i{constructor(...e){super(...e),this._testContext={...this._testContext,view:"candidate"},this.addEventListener("on-test-switch-view",r=>{this._testContext={...this._testContext,view:r.detail},this._updateElementView()}),this.addEventListener("qti-assessment-test-connected",()=>{this._updateElementView()}),this.addEventListener("qti-assessment-item-connected",r=>{this._updateElementView(),this._setCorrectResponseVisibility(r.detail)})}willUpdate(e){super.willUpdate(e),e.has("_testContext")&&this._updateElementView()}_updateElementView(){if(this.testElement&&this.testElement.el){Array.from(this.testElement.el.querySelectorAll("[view]")).forEach(n=>{n.classList.toggle("show",n.getAttribute("view")===this._testContext.view)});let r=this.testElement.el.querySelector(`qti-assessment-item[identifier="${this._testContext.navItemId}"]`);r&&r.showCorrectResponse(this._testContext.view==="scorer")}}_setCorrectResponseVisibility(e){e.showCorrectResponse(this._testContext.view==="scorer")}}return o};import{provide as rt}from"@lit/context";import{LitElement as Et}from"lit";import{state as it}from"lit/decorators.js";import{createContext as et}from"@lit/context";var g=et(Symbol("test")),U=et(Symbol("testElement"));var k=class extends Et{constructor(){super();this._testContext={items:[],testOutcomeVariables:[]};this.testElement={el:null};this._updateItemInTestContext=t=>{let{identifier:e,variables:r}=t,n=this._testContext.items.find(d=>d?.identifier===e);if(!n){console.warn(`Item IDs between assessment.xml and item.xml should match: ${e} is not found!`);return}n.variables?.length===1?this._updateItemVariablesInTestContext(e,r):t.variables=[...n.variables||[]]};this.addEventListener("qti-assessment-test-connected",t=>{let e=t.detail,r=Array.from(e.querySelectorAll("qti-assessment-item-ref")).map(n=>({href:n.href,identifier:n.identifier,category:n.category,variables:[{identifier:"completionStatus",value:"not_attempted",type:"outcome"}]}));this.testElement={el:e},this._testContext={...this._testContext,items:r}}),this.addEventListener("qti-assessment-item-connected",t=>{this._updateItemInTestContext(t.detail)}),this.addEventListener("qti-outcome-changed",t=>{let e=t.composedPath()[0];this._updateItemVariablesInTestContext(e.identifier,e.variables)})}get context(){return this._testContext}set context(t){t!=null&&(this._testContext={...t},t.items?.forEach(e=>{let r=this._testContext.items.find(n=>n.identifier===e.identifier);r?r.variables=e.variables:this._testContext.items.push(e)}))}_updateItemVariablesInTestContext(t,e){this._testContext={...this._testContext,items:this._testContext.items.map(r=>r.identifier!==t?r:{...r,variables:e.map(n=>{let d=r.variables.find(s=>s.identifier===n.identifier);return d?{...d,...n}:n})})}}connectedCallback(){super.connectedCallback(),this.setAttribute("qti-test","")}};a([it(),rt({context:g})],k.prototype,"_testContext",2),a([it(),rt({context:U})],k.prototype,"testElement",2);var O=class extends Z(Q(tt(k))){render(){return Lt`<slot></slot>`}};O=a([Tt("qti-test")],O);import{consume as zt}from"@lit/context";import{html as At,LitElement as It}from"lit";import{property as C}from"lit/decorators.js";var ot={fromAttribute(i){return i==="true"},toAttribute(i){return i?"true":"false"}},h=class extends It{constructor(){super(...arguments);this.weigths=new Map}createRenderRoot(){return this}get assessmentItem(){return this.renderRoot?.querySelector("qti-assessment-item")}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.dispatchEvent(new CustomEvent("qti-assessment-item-ref-connected",{bubbles:!0,composed:!0,detail:{identifier:this.identifier,href:this.href,category:this.category}}))}render(){return At`${this.xmlDoc}`}};a([C({type:String})],h.prototype,"category",2),a([C({type:String})],h.prototype,"identifier",2),a([C({type:Boolean,converter:ot})],h.prototype,"required",2),a([C({type:Boolean,converter:ot})],h.prototype,"fixed",2),a([C({type:String})],h.prototype,"href",2),a([zt({context:g,subscribe:!0})],h.prototype,"_testContext",2),a([C({type:Object,attribute:!1})],h.prototype,"xmlDoc",2);customElements.get("qti-assessment-item-ref")||customElements.define("qti-assessment-item-ref",h);import{consume as Mt}from"@lit/context";import{html as _t,LitElement as St}from"lit";import{property as E}from"lit/decorators.js";var V={fromAttribute(i){return i==="true"},toAttribute(i){return i?"true":"false"}},b=class extends St{async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.dispatchEvent(new Event("qti-assessment-section-connected",{bubbles:!0,composed:!0}))}render(){return _t`<slot name="qti-rubric-block"></slot><slot></slot>`}};a([E({type:String})],b.prototype,"identifier",2),a([E({type:String})],b.prototype,"required",2),a([E({type:Boolean,converter:V})],b.prototype,"fixed",2),a([E({type:String})],b.prototype,"title",2),a([E({type:Boolean,converter:V})],b.prototype,"visible",2),a([E({type:Boolean,converter:V,attribute:"keep-together"})],b.prototype,"keepTogether",2),a([Mt({context:g,subscribe:!0})],b.prototype,"_testContext",2);customElements.get("qti-assessment-section")||customElements.define("qti-assessment-section",b);import{consume as Dt}from"@lit/context";import{html as Ft,LitElement as Ut}from"lit";import{customElement as Ot,property as at}from"lit/decorators.js";var v=class extends Ut{async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.dispatchEvent(new CustomEvent("qti-assessment-test-connected",{detail:this,bubbles:!0,composed:!0}))}render(){return Ft` <slot></slot>`}};a([at({type:String})],v.prototype,"identifier",2),a([at({type:String})],v.prototype,"title",2),a([Dt({context:g,subscribe:!0})],v.prototype,"_testContext",2),v=a([Ot("qti-assessment-test")],v);import{html as Rt,LitElement as Ht}from"lit";import{customElement as Xt,property as _}from"lit/decorators.js";var u=class extends Ht{constructor(){super(...arguments);this.identifier="";this.title="";this.class="";this.NavigationMode="nonlinear";this.submissionMode="individual"}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.dispatchEvent(new Event("qti-test-part-connected",{bubbles:!0,composed:!0}))}render(){return Rt` <slot></slot>`}};a([_({type:String})],u.prototype,"identifier",2),a([_({type:String})],u.prototype,"title",2),a([_({type:String})],u.prototype,"class",2),a([_({type:String,attribute:"navigation-mode"})],u.prototype,"NavigationMode",2),a([_({type:String,attribute:"submission-mode"})],u.prototype,"submissionMode",2),u=a([Xt("qti-test-part")],u);customElements.get("qti-test-part")||customElements.define("qti-test-part",u);import{consume as st}from"@lit/context";import{LitElement as Vt}from"lit";import{state as dt}from"lit/decorators.js";function f(i,o){let t={waitUntilFirstUpdate:!1,...o};return(e,r)=>{let{update:n}=e,d=Array.isArray(i)?i:[i];e.update=function(s){d.forEach(p=>{let c=p;if(s.has(c)){let y=s.get(c),x=this[c];y!==x&&(!t.waitUntilFirstUpdate||this.hasUpdated)&&this[r](y,x)}}),n.call(this,s)}}}import{property as Nt}from"lit/decorators.js";function nt(i){return(o,t)=>{Nt(i)(o,t);let e=`__${t}`;Object.defineProperty(o,t,{get(){return this[e]},set(r){let n=this[e];if(this[e]=r,n!==r){if(this._internals?.states){let d=t.toLowerCase();r?this._internals.states.add(`--${d}`):this._internals.states.delete(`--${d}`)}if(i.aria&&this._internals){let d=i.aria;r?this._internals[d]="true":this._internals[d]=null}this.requestUpdate(t,n)}},configurable:!0,enumerable:!0})}}var l=class extends Vt{constructor(){super();this.disabled=!0;this._internals=this.attachInternals()}_handleTestElementChange(t,e){e.el&&(this.disabled=!1)}willUpdate(t){if(t.has("_testContext")){let{items:e=[],navItemId:r}=this._testContext??{};this.itemIndex=e.findIndex(n=>n.identifier===r),this.items=e,this.view=this._testContext?.view}}_switchView(t){this.dispatchEvent(new CustomEvent("on-test-switch-view",{composed:!0,bubbles:!0,detail:t}))}_requestItem(t){this.dispatchEvent(new CustomEvent("qti-request-test-item",{composed:!0,bubbles:!0,detail:t}))}};a([nt({type:Boolean,reflect:!0,aria:"ariaDisabled"})],l.prototype,"disabled",2),a([dt(),st({context:g,subscribe:!0})],l.prototype,"_testContext",2),a([dt(),st({context:U,subscribe:!0})],l.prototype,"_testElement",2),a([f("_testElement")],l.prototype,"_handleTestElementChange",1);import{css as $t,html as Bt}from"lit";import{customElement as jt}from"lit/decorators.js";import{css as R}from"lit";var lt=R`
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  user-select: none;
-`,L=R`
-  background-color: lightgray;
-  ${lt};
-`,T=R`
-  cursor: not-allowed;
-  opacity: 0.5;
-`,$r=R`
-  ${lt};
-  border: 1px solid gray;
-`;var S=class extends l{constructor(){super(),this._internals.role="button",this._internals.ariaLabel="Next item",this.addEventListener("click",o=>{o.preventDefault(),this.disabled||this._requestItem(this.items[this.itemIndex+1].identifier)})}willUpdate(o){super.willUpdate(o),o.has("_testContext")&&(this.disabled=!this._testElement?.el||this.itemIndex<0||this.itemIndex>=this.items.length-1)}render(){return Bt`<slot></slot>`}};S.styles=$t`
-    :host {
-      ${L};
-    }
-    :host([disabled]) {
-      ${T};
-    }
-  `,S=a([jt("test-next")],S);import{css as Wt,html as Pt}from"lit";import{customElement as Kt}from"lit/decorators.js";var D=class extends l{constructor(){super(),this._internals.role="button",this._internals.ariaLabel="Next item",this.addEventListener("click",o=>{o.preventDefault(),this.disabled||this._requestItem(this.items[this.itemIndex-1].identifier)})}willUpdate(o){super.willUpdate(o),o.has("_testContext")&&(this.disabled=!this._testElement?.el||this.itemIndex===0||this.itemIndex===-1)}render(){return Pt`<slot></slot>`}};D.styles=Wt`
-    :host {
-      ${L};
-    }
-    :host([disabled]) {
-      ${T};
-    }
-  `,D=a([Kt("test-prev")],D);import{html as ct}from"lit";import{customElement as Gt,property as pt,state as Jt}from"lit/decorators.js";var m=class extends l{constructor(){super(...arguments);this.label="view";this._handleViewOptionsChange=()=>{this.updateViewOptions()};this._viewOptions=m.DEFAULT_VIEW_OPTIONS}connectedCallback(){super.connectedCallback(),this.updateViewOptions()}updateViewOptions(){if(this.viewOptions){let t=this.viewOptions.split(",").map(e=>e.trim());this._viewOptions=t.filter(e=>m.DEFAULT_VIEW_OPTIONS.includes(e))}else this._viewOptions=m.DEFAULT_VIEW_OPTIONS}render(){return ct`
-      <label part="label" for="viewSelect">${this.label}</label>
-      <select
-        part="select"
-        id="viewSelect"
-        .disabled=${this.disabled}
-        @change=${t=>{let e=t.target;this._switchView(e.value)}}
-      >
-        ${this._viewOptions.map(t=>ct`<option value="${t}" ?selected=${t===this.view}>${t}</option>`)}
-      </select>
-    `}};m.DEFAULT_VIEW_OPTIONS=["author","candidate","proctor","scorer","testConstructor","tutor"],a([pt({type:String})],m.prototype,"label",2),a([pt({type:String,attribute:"view-options"})],m.prototype,"viewOptions",2),a([f("viewOptions",{waitUntilFirstUpdate:!0})],m.prototype,"_handleViewOptionsChange",2),a([Jt()],m.prototype,"_viewOptions",2),m=a([Gt("test-view")],m);import{css as Yt,html as Zt}from"lit";import{customElement as Qt,property as te}from"lit/decorators.js";var z=class extends l{constructor(){super();this.itemId=null;this.addEventListener("click",()=>this._requestItem(this.itemId))}render(){return Zt` <slot></slot> `}};z.styles=Yt`
-    :host {
-      ${L};
-    }
-    :host([disabled]) {
-      ${T};
-    }
-  `,a([te({type:String,attribute:"item-id"})],z.prototype,"itemId",2),z=a([Qt("test-item-link")],z);import{LitElement as re,html as B}from"lit";import{customElement as ie,property as oe,state as gt}from"lit/decorators.js";import{until as ae}from"lit/directives/until.js";var mt=`@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
-
-:root,
-:host {
-  /* Active colors */
-  --qti-bg-active: #ffecec;
-  --qti-border-active: #f86d70;
-
-  /* Gap size */
-  --qti-gap-size: 1rem;
-
-  /* Background colors */
-  --qti-bg: white;
-  --qti-hover-bg: #f9fafb;
-
-  /* Light theme colors */
-  --qti-light-bg-active: #f0f0f0; /* Light gray */
-  --qti-light-border-active: #d0d0d0; /* Medium gray */
-
-  /* Dark theme colors */
-  --qti-dark-bg-active: #1f2937; /* Dark gray */
-  --qti-dark-border-active: #64748b; /* Medium gray */
-
-  /* Disabled colors */
-  --qti-disabled-bg: #f3f4f6;
-  --qti-disabled-color: #45484f;
-
-  /* Border properties */
-  --qti-border-thickness: 2px;
-  --qti-border-style: solid;
-  --qti-border-color: #c6cad0;
-  --qti-border-radius: 0.3rem;
-  --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
-
-  /* Focus & active states */
-  --qti-focus-border-width: 5px;
-  --qti-focus-color: #bddcff7e;
-
-  /* Class-specific variables */
-
-  /* Form elements */
-  --qti-form-size: 1rem;
-
-  /* Point elements */
-  --qti-point-size: 2rem;
-
-  /* Order buttons */
-  --qti-order-size: 2rem;
-
-  /* Generic padding for all elements */
-  --qti-padding-vertical: 0.5rem; /* py-2 */
-  --qti-padding-horizontal: 0.5rem; /* px-2 */
-}
-
-/* SVG masks and backgrounds */
-
-.chevron {
-  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px;
-}
-
-.handle {
-  background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-  background-repeat: repeat-y;
-  background-position: left center;
-  background-size: 14px 8px;
-}
-
-.check-mask {
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-}
-
-/* 
-  Following are classes that can be applied to elements and element states, so they are not used directly 
-  The @apply directive is used to apply these classes to elements
-*/
-
-/* Apply .bordered to an element */
-
-.bordered {
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .form rules for checkbox and radiobutton */
-
-.form {
-
-  display: grid;
-  place-content: center;
-  width: var(--qti-form-size);
-  height: var(--qti-form-size);
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .button rules for button-like elements, such as drags and buttons */
-
-.button {
-
-  border-radius: var(--qti-border-radius);
-  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .select for the select dropdown element */
-
-.select {
-
-  border-radius: var(--qti-border-radius);
-  position: relative;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px;
-}
-
-/* Apply .text for the input text and textarea */
-
-.text {
-
-  border-radius: 0;
-  cursor: text;
-  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  background: unset;
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .spot for hotspot shapes */
-
-.spot {
-
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  padding: 0;
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .point for circular small hotspots */
-
-.point {
-
-  border-radius: 100%;
-  width: var(--qti-point-size);
-  height: var(--qti-point-size);
-  background-color: transparent;
-  padding: 0;
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .drag for draggable elements */
-
-.drag {
-
-  transition:
-    transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-  cursor: grab;
-  background-color: var(--qti-bg);
-  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  border-radius: var(--qti-border-radius);
-  padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
-}
-
-/* Apply .dragging for the dragging state of a draggable element */
-
-.dragging {
-  pointer-events: none;
-  rotate: -2deg;
-  box-shadow:
-    0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-}
-
-/* Apply .drop for an element where you can drop the draggable */
-
-.drop {
-
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
-    center no-repeat;
-  border-radius: var(--qti-border-radius);
-  position: relative;
-  background-color: var(--qti-bg);
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .dropping for an indicator where you can drop the draggable */
-
-.dropping {
-  background-color: var(--qti-bg-active);
-}
-
-/* Apply .order for a small circular button */
-
-.order {
-
-  display: grid;
-  place-content: center;
-
-  /* background-color: var(--qti-bg-active); */
-  border-radius: 100%;
-  width: var(--qti-order-size);
-  height: var(--qti-order-size);
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .check-size for radio and checkbox size */
-
-.check-size {
-  width: calc(var(--qti-form-size) - 6px);
-  height: calc(var(--qti-form-size) - 6px);
-}
-
-/* Apply .check for checkbox */
-
-.check {
-  gap: 0.5rem;
-  border-radius: var(--qti-border-radius);
-  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  outline: none;
-  cursor: pointer;
-}
-
-/* Apply .check-radio for outer circle of the radio buttons */
-
-.check-radio {
-
-  border-radius: 100%;
-
-  display: grid;
-
-  place-content: center;
-
-  width: var(--qti-form-size);
-
-  height: var(--qti-form-size);
-
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-  outline: none;
-}
-
-/* Apply .check-radio-checked for the inner checked radio */
-
-.check-radio-checked {
-  background-color: var(--qti-border-active);
-  border-radius: 100%;
-}
-
-/* Apply .check-checkbox for outer square of the checkbox */
-
-.check-checkbox {
-
-  display: flex;
-  place-items: center;
-  border-radius: var(--qti-border-radius);
-  display: grid;
-  place-content: center;
-  width: var(--qti-form-size);
-  height: var(--qti-form-size);
-  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-  outline: none;
-}
-
-/* Apply .check-checkbox-checked for the inner checkmark */
-
-.check-checkbox-checked {
-  background-color: var(--qti-border-active);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-}
-
-/* Apply .hov for hover state */
-
-.hov {
-  background-color: var(--qti-hover-bg);
-}
-
-/* Apply .foc for focus state */
-
-.foc {
-  box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-}
-
-/* Apply .act for active state */
-
-.act {
-  border-color: var(--qti-border-active);
-  background-color: var(--qti-bg-active);
-}
-
-.act-bg {
-  background-color: var(--qti-bg-active);
-}
-
-.act-bor {
-  border-color: var(--qti-border-active);
-}
-
-/* Apply .rdo for readonly state */
-
-.rdo {
-  cursor: pointer;
-  background-color: var(--qti-bg);
-  outline: 0;
-  border: none;
-}
-
-/* Apply .dis for disabled state */
-
-.dis {
-  cursor: not-allowed;
-  background-color: var(--qti-disabled-bg);
-  color: var(--qti-disabled-color);
-  border-color: var(--qti-border-color);
-  outline: 4px solid var(--qti-disabled-bg);
-}
-
-/* base */
-
-/* ============================
-   QTI 3 shared css
-   1.  Display
-   2.  Special Flex styles
-   3.  Margin
-   4.  Padding
-   5.  Horizontal Alignment styles
-   6.  Vertical Alignment styles
-   7.  Height
-   8.  Width
-   9.  Text-Indent
-   10. List Style
-   11. Layout
-   12. Other QTI 3 presentation utilities
-   ============================ */
-
-/* ==========
-  Display css
-  =========== */
-
-.qti-display-inline {
-  display: inline;
-}
-
-.qti-display-inline-block {
-  display: inline-block;
-}
-
-.qti-display-block {
-  display: block;
-}
-
-.qti-display-flex {
-  display: flexbox;
-  display: flex;
-}
-
-.qti-display-inline-flex {
-  display: inline-flex;
-}
-
-.qti-display-grid {
-  display: grid;
-}
-
-.qti-display-inline-grid {
-  display: inline-grid;
-}
-
-.qti-display-table {
-  display: table;
-}
-
-.qti-display-table-cell {
-  display: table-cell;
-}
-
-.qti-display-table-row {
-  display: table-row;
-}
-
-.qti-display-list-item {
-  display: list-item;
-}
-
-.qti-display-inherit {
-  display: inherit;
-}
-
-/* 
-   * hidden to screen readers and sighted
-   */
-
-.qti-hidden {
-  display: none;
-}
-
-/*
-  * visible to screen readers, hidden to sighted
-   */
-
-.qti-visually-hidden {
-  position: fixed !important;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  height: 1px;
-  width: 1px;
-  border: 0;
-  margin: -1px;
-}
-
-/* =============================
-     Special flex styles
-     ============================= */
-
-.qti-flex-direction-column {
-  flex-direction: column;
-}
-
-.qti-flex-direction-row {
-  flex-direction: row;
-}
-
-.qti-flex-grow-1 {
-  flex-grow: 1;
-}
-
-.qti-flex-grow-0 {
-  flex-grow: 0;
-}
-
-/* =========
-    Margin css
-    ========== */
-
-/**
-   * For margin Top and Bottom and Left and Right
-   */
-
-.qti-margin-0 {
-  margin: 0 !important;
-}
-
-.qti-margin-1 {
-  margin: 0.25rem !important;
-}
-
-.qti-margin-2 {
-  margin: 0.5rem !important;
-}
-
-.qti-margin-3 {
-  margin: 1rem !important;
-}
-
-.qti-margin-4 {
-  margin: 1.5rem !important;
-}
-
-.qti-margin-5 {
-  margin: 3rem !important;
-}
-
-.qti-margin-auto {
-  margin: auto !important;
-}
-
-/*
-   For margin Left and Right
-   */
-
-.qti-margin-x-0 {
-  margin-right: 0 !important;
-  margin-left: 0 !important;
-}
-
-.qti-margin-x-1 {
-  margin-right: 0.25rem !important;
-  margin-left: 0.25rem !important;
-}
-
-.qti-margin-x-2 {
-  margin-right: 0.5rem !important;
-  margin-left: 0.5rem !important;
-}
-
-.qti-margin-x-3 {
-  margin-right: 1rem !important;
-  margin-left: 1rem !important;
-}
-
-.qti-margin-x-4 {
-  margin-right: 1.5rem !important;
-  margin-left: 1.5rem !important;
-}
-
-.qti-margin-x-5 {
-  margin-right: 3rem !important;
-  margin-left: 3rem !important;
-}
-
-.qti-margin-x-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
-
-/*
-   For margin Top and Bottom
-   */
-
-.qti-margin-y-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.qti-margin-y-1 {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-}
-
-.qti-margin-y-2 {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
-}
-
-.qti-margin-y-3 {
-  margin-top: 1rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.qti-margin-y-4 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.qti-margin-y-5 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important;
-}
-
-.qti-margin-y-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-
-/*
-   For margin Top
-   */
-
-.qti-margin-t-0 {
-  margin-top: 0 !important;
-}
-
-.qti-margin-t-1 {
-  margin-top: 0.25rem !important;
-}
-
-.qti-margin-t-2 {
-  margin-top: 0.5rem !important;
-}
-
-.qti-margin-t-3 {
-  margin-top: 1rem !important;
-}
-
-.qti-margin-t-4 {
-  margin-top: 1.5rem !important;
-}
-
-.qti-margin-t-5 {
-  margin-top: 3rem !important;
-}
-
-.qti-margin-t-auto {
-  margin-top: auto !important;
-}
-
-/* 
-  For margin Bottom
-   */
-
-.qti-margin-b-0 {
-  margin-bottom: 0 !important;
-}
-
-.qti-margin-b-1 {
-  margin-bottom: 0.25rem !important;
-}
-
-.qti-margin-b-2 {
-  margin-bottom: 0.5rem !important;
-}
-
-.qti-margin-b-3 {
-  margin-bottom: 1rem !important;
-}
-
-.qti-margin-b-4 {
-  margin-bottom: 1.5rem !important;
-}
-
-.qti-margin-b-5 {
-  margin-bottom: 3rem !important;
-}
-
-.qti-margin-b-auto {
-  margin-bottom: auto !important;
-}
-
-/*
-   For margin Start LTR
-   */
-
-.qti-margin-s-0 {
-  margin-left: 0 !important;
-}
-
-.qti-margin-s-1 {
-  margin-left: 0.25rem !important;
-}
-
-.qti-margin-s-2 {
-  margin-left: 0.5rem !important;
-}
-
-.qti-margin-s-3 {
-  margin-left: 1rem !important;
-}
-
-.qti-margin-s-4 {
-  margin-left: 1.5rem !important;
-}
-
-.qti-margin-s-5 {
-  margin-left: 3rem !important;
-}
-
-.qti-margin-s-auto {
-  margin-left: auto !important;
-}
-
-/* 
-  For margin End LTR
-   */
-
-.qti-margin-e-0 {
-  margin-right: 0 !important;
-}
-
-.qti-margin-e-1 {
-  margin-right: 0.25rem !important;
-}
-
-.qti-margin-e-2 {
-  margin-right: 0.5rem !important;
-}
-
-.qti-margin-e-3 {
-  margin-right: 1rem !important;
-}
-
-.qti-margin-e-4 {
-  margin-right: 1.5rem !important;
-}
-
-.qti-margin-e-5 {
-  margin-right: 3rem !important;
-}
-
-.qti-margin-e-auto {
-  margin-right: auto !important;
-}
-
-/* =========
-    Padding css
-    ========== */
-
-/*
-  For padding Top and Bottom and Left and Right
-   */
-
-.qti-padding-0 {
-  padding: 0 !important;
-}
-
-.qti-padding-1 {
-  padding: 0.25rem !important;
-}
-
-.qti-padding-2 {
-  padding: 0.5rem !important;
-}
-
-.qti-padding-3 {
-  padding: 1rem !important;
-}
-
-.qti-padding-4 {
-  padding: 1.5rem !important;
-}
-
-.qti-padding-5 {
-  padding: 3rem !important;
-}
-
-/*
-   For padding Left and Right
-   */
-
-.qti-padding-x-0 {
-  padding-right: 0 !important;
-  padding-left: 0 !important;
-}
-
-.qti-padding-x-1 {
-  padding-right: 0.25rem !important;
-  padding-left: 0.25rem !important;
-}
-
-.qti-padding-x-2 {
-  padding-right: 0.5rem !important;
-  padding-left: 0.5rem !important;
-}
-
-.qti-padding-x-3 {
-  padding-right: 1rem !important;
-  padding-left: 1rem !important;
-}
-
-.qti-padding-x-4 {
-  padding-right: 1.5rem !important;
-  padding-left: 1.5rem !important;
-}
-
-.qti-padding-x-5 {
-  padding-right: 3rem !important;
-  padding-left: 3rem !important;
-}
-
-/*
-    For padding Top and Bottom
-   */
-
-.qti-padding-y-0 {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.qti-padding-y-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-.qti-padding-y-2 {
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important;
-}
-
-.qti-padding-y-3 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
-}
-
-.qti-padding-y-4 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
-}
-
-.qti-padding-y-5 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important;
-}
-
-/*
-   For padding Top
-   */
-
-.qti-padding-t-0 {
-  padding-top: 0 !important;
-}
-
-.qti-padding-t-1 {
-  padding-top: 0.25rem !important;
-}
-
-.qti-padding-t-2 {
-  padding-top: 0.5rem !important;
-}
-
-.qti-padding-t-3 {
-  padding-top: 1rem !important;
-}
-
-.qti-padding-t-4 {
-  padding-top: 1.5rem !important;
-}
-
-.qti-padding-t-5 {
-  padding-top: 3rem !important;
-}
-
-/*
-   For padding Bottom
-   */
-
-.qti-padding-b-0 {
-  padding-bottom: 0 !important;
-}
-
-.qti-padding-b-1 {
-  padding-bottom: 0.25rem !important;
-}
-
-.qti-padding-b-2 {
-  padding-bottom: 0.5rem !important;
-}
-
-.qti-padding-b-3 {
-  padding-bottom: 1rem !important;
-}
-
-.qti-padding-b-4 {
-  padding-bottom: 1.5rem !important;
-}
-
-.qti-padding-b-5 {
-  padding-bottom: 3rem !important;
-}
-
-/*
-    For padding Start LTR
-   */
-
-.qti-padding-s-0 {
-  padding-left: 0 !important;
-}
-
-.qti-padding-s-1 {
-  padding-left: 0.25rem !important;
-}
-
-.qti-padding-s-2 {
-  padding-left: 0.5rem !important;
-}
-
-.qti-padding-s-3 {
-  padding-left: 1rem !important;
-}
-
-.qti-padding-s-4 {
-  padding-left: 1.5rem !important;
-}
-
-.qti-padding-s-5 {
-  padding-left: 3rem !important;
-}
-
-/*
-   For padding End LTR
-   */
-
-.qti-padding-e-0 {
-  padding-right: 0 !important;
-}
-
-.qti-padding-e-1 {
-  padding-right: 0.25rem !important;
-}
-
-.qti-padding-e-2 {
-  padding-right: 0.5rem !important;
-}
-
-.qti-padding-e-3 {
-  padding-right: 1rem !important;
-}
-
-.qti-padding-e-4 {
-  padding-right: 1.5rem !important;
-}
-
-.qti-padding-e-5 {
-  padding-right: 3rem !important;
-}
-
-/* ====================
-     Horizontal alignment
-     ==================== */
-
-.qti-align-left {
-  text-align: left;
-}
-
-.qti-align-center {
-  text-align: center;
-}
-
-.qti-align-right {
-  text-align: right;
-}
-
-/* ==================
-     Vertical alignment
-     ================== */
-
-.qti-valign-top {
-  vertical-align: top;
-}
-
-.qti-valign-middle {
-  vertical-align: middle;
-}
-
-.qti-valign-baseline {
-  vertical-align: baseline;
-}
-
-.qti-valign-bottom {
-  vertical-align: bottom;
-}
-
-/* =============
-     Height styles
-     ============= */
-
-.qti-height-0 {
-  height: 0;
-}
-
-.qti-height-px {
-  height: 1px;
-}
-
-.qti-height-0p5 {
-  height: 0.125rem;
-}
-
-.qti-height-1 {
-  height: 0.25rem;
-}
-
-.qti-height-1p5 {
-  height: 0.375rem;
-}
-
-.qti-height-2 {
-  height: 0.5rem;
-}
-
-.qti-height-2p5 {
-  height: 0.625rem;
-}
-
-.qti-height-3 {
-  height: 0.75rem;
-}
-
-.qti-height-3p5 {
-  height: 0.875rem;
-}
-
-.qti-height-4 {
-  height: 1rem;
-}
-
-.qti-height-5 {
-  height: 1.25rem;
-}
-
-.qti-height-6 {
-  height: 1.5rem;
-}
-
-.qti-height-7 {
-  height: 1.75rem;
-}
-
-.qti-height-8 {
-  height: 2rem;
-}
-
-.qti-height-9 {
-  height: 2.25rem;
-}
-
-.qti-height-10 {
-  height: 2.5rem;
-}
-
-.qti-height-11 {
-  height: 2.75rem;
-}
-
-.qti-height-12 {
-  height: 3rem;
-}
-
-.qti-height-14 {
-  height: 3.5rem;
-}
-
-.qti-height-16 {
-  height: 4rem;
-}
-
-.qti-height-20 {
-  height: 5rem;
-}
-
-.qti-height-24 {
-  height: 6rem;
-}
-
-.qti-height-28 {
-  height: 7rem;
-}
-
-.qti-height-32 {
-  height: 8rem;
-}
-
-.qti-height-36 {
-  height: 9rem;
-}
-
-.qti-height-40 {
-  height: 10rem;
-}
-
-.qti-height-44 {
-  height: 11rem;
-}
-
-.qti-height-48 {
-  height: 12rem;
-}
-
-.qti-height-52 {
-  height: 13rem;
-}
-
-.qti-height-56 {
-  height: 14rem;
-}
-
-.qti-height-60 {
-  height: 15rem;
-}
-
-.qti-height-64 {
-  height: 16rem;
-}
-
-.qti-height-72 {
-  height: 18rem;
-}
-
-.qti-height-80 {
-  height: 20rem;
-}
-
-.qti-height-96 {
-  height: 24rem;
-}
-
-.qti-height-1-2 {
-  height: 50%;
-}
-
-.qti-height-1-3 {
-  height: 33.3333%;
-}
-
-.qti-height-2-3 {
-  height: 66.6667%;
-}
-
-.qti-height-1-4 {
-  height: 25%;
-}
-
-.qti-height-2-4 {
-  height: 50%;
-}
-
-.qti-height-3-4 {
-  height: 75%;
-}
-
-.qti-height-1-5 {
-  height: 20%;
-}
-
-.qti-height-2-5 {
-  height: 40%;
-}
-
-.qti-height-3-5 {
-  height: 60%;
-}
-
-.qti-height-4-5 {
-  height: 80%;
-}
-
-.qti-height-1-6 {
-  height: 16.6667%;
-}
-
-.qti-height-2-6 {
-  height: 33.3333%;
-}
-
-.qti-height-3-6 {
-  height: 50%;
-}
-
-.qti-height-4-6 {
-  height: 66.6667%;
-}
-
-.qti-height-5-6 {
-  height: 83.3333%;
-}
-
-.qti-height-auto {
-  height: auto;
-}
-
-.qti-height-full {
-  height: 100%;
-}
-
-/* ============
-     Width styles
-     ============ */
-
-.qti-width-0 {
-  width: 0;
-}
-
-.qti-width-px {
-  width: 1px;
-}
-
-.qti-width-0p5 {
-  width: 0.125rem;
-}
-
-.qti-width-1 {
-  width: 0.25rem;
-}
-
-.qti-width-1p5 {
-  width: 0.375rem;
-}
-
-.qti-width-2 {
-  width: 0.5rem;
-}
-
-.qti-width-2p5 {
-  width: 0.625rem;
-}
-
-.qti-width-3 {
-  width: 0.75rem;
-}
-
-.qti-width-3p5 {
-  width: 0.875rem;
-}
-
-.qti-width-4 {
-  width: 1rem;
-}
-
-.qti-width-5 {
-  width: 1.25rem;
-}
-
-.qti-width-6 {
-  width: 1.5rem;
-}
-
-.qti-width-7 {
-  width: 1.75rem;
-}
-
-.qti-width-8 {
-  width: 2rem;
-}
-
-.qti-width-9 {
-  width: 2.25rem;
-}
-
-.qti-width-10 {
-  width: 2.5rem;
-}
-
-.qti-width-11 {
-  width: 2.75rem;
-}
-
-.qti-width-12 {
-  width: 3rem;
-}
-
-.qti-width-14 {
-  width: 3.5rem;
-}
-
-.qti-width-16 {
-  width: 4rem;
-}
-
-.qti-width-20 {
-  width: 5rem;
-}
-
-.qti-width-24 {
-  width: 6rem;
-}
-
-.qti-width-28 {
-  width: 7rem;
-}
-
-.qti-width-32 {
-  width: 8rem;
-}
-
-.qti-width-36 {
-  width: 9rem;
-}
-
-.qti-width-40 {
-  width: 10rem;
-}
-
-.qti-width-44 {
-  width: 11rem;
-}
-
-.qti-width-48 {
-  width: 12rem;
-}
-
-.qti-width-52 {
-  width: 13rem;
-}
-
-.qti-width-56 {
-  width: 14rem;
-}
-
-.qti-width-60 {
-  width: 15rem;
-}
-
-.qti-width-64 {
-  width: 16rem;
-}
-
-.qti-width-72 {
-  width: 18rem;
-}
-
-.qti-width-80 {
-  width: 20rem;
-}
-
-.qti-width-96 {
-  width: 24rem;
-}
-
-.qti-width-auto {
-  width: auto;
-}
-
-.qti-width-1-2 {
-  width: 50%;
-}
-
-.qti-width-1-3 {
-  width: 33.3333%;
-}
-
-.qti-width-2-3 {
-  width: 66.6667%;
-}
-
-.qti-width-1-4 {
-  width: 25%;
-}
-
-.qti-width-2-4 {
-  width: 50%;
-}
-
-.qti-width-3-4 {
-  width: 75%;
-}
-
-.qti-width-1-5 {
-  width: 20%;
-}
-
-.qti-width-2-5 {
-  width: 40%;
-}
-
-.qti-width-3-5 {
-  width: 60%;
-}
-
-.qti-width-4-5 {
-  width: 80%;
-}
-
-.qti-width-1-6 {
-  width: 16.6667%;
-}
-
-.qti-width-2-6 {
-  width: 33.3333%;
-}
-
-.qti-width-3-6 {
-  width: 50%;
-}
-
-.qti-width-4-6 {
-  width: 66.6667%;
-}
-
-.qti-width-5-6 {
-  width: 83.3333%;
-}
-
-.qti-width-1-12 {
-  width: 8.3333%;
-}
-
-.qti-width-2-12 {
-  width: 16.6667%;
-}
-
-.qti-width-3-12 {
-  width: 25%;
-}
-
-.qti-width-4-12 {
-  width: 33.3333%;
-}
-
-.qti-width-5-12 {
-  width: 41.6667%;
-}
-
-.qti-width-6-12 {
-  width: 50%;
-}
-
-.qti-width-7-12 {
-  width: 58.3333%;
-}
-
-.qti-width-8-12 {
-  width: 66.6667%;
-}
-
-.qti-width-9-12 {
-  width: 75%;
-}
-
-.qti-width-10-12 {
-  width: 83.3333%;
-}
-
-.qti-width-11-12 {
-  width: 91.6667%;
-}
-
-.qti-width-full,
-.qti-fullwidth {
-  width: 100%;
-}
-
-/* ==================
-     Text Indent styles
-     ================== */
-
-.qti-text-indent-0 {
-  text-indent: 0;
-}
-
-.qti-text-indent-px {
-  text-indent: 1px;
-}
-
-.qti-text-indent-0p5 {
-  text-indent: 0.125rem;
-}
-
-.qti-text-indent-1 {
-  text-indent: 0.25rem;
-}
-
-.qti-text-indent-1p5 {
-  text-indent: 0.375rem;
-}
-
-.qti-text-indent-2 {
-  text-indent: 0.5rem;
-}
-
-.qti-text-indent-2p5 {
-  text-indent: 0.625rem;
-}
-
-.qti-text-indent-3 {
-  text-indent: 0.75rem;
-}
-
-.qti-text-indent-3p5 {
-  text-indent: 0.875rem;
-}
-
-.qti-text-indent-4 {
-  text-indent: 1rem;
-}
-
-.qti-text-indent-5 {
-  text-indent: 1.25rem;
-}
-
-.qti-text-indent-6 {
-  text-indent: 1.5rem;
-}
-
-.qti-text-indent-7 {
-  text-indent: 1.75rem;
-}
-
-.qti-text-indent-8 {
-  text-indent: 2rem;
-}
-
-.qti-text-indent-12 {
-  text-indent: 3rem;
-}
-
-.qti-text-indent-16 {
-  text-indent: 4rem;
-}
-
-.qti-text-indent-20 {
-  text-indent: 5rem;
-}
-
-.qti-text-indent-24 {
-  text-indent: 6rem;
-}
-
-.qti-text-indent-28 {
-  text-indent: 7rem;
-}
-
-.qti-text-indent-32 {
-  text-indent: 8rem;
-}
-
-/* =================
-     List Style styles
-     ================= */
-
-.qti-list-style-type-none {
-  list-style-type: none;
-}
-
-.qti-list-style-type-disc {
-  list-style-type: disc;
-}
-
-.qti-list-style-type-circle {
-  list-style-type: circle;
-}
-
-.qti-list-style-type-square {
-  list-style-type: square;
-}
-
-.qti-list-style-type-decimal {
-  list-style-type: decimal;
-}
-
-.qti-list-style-type-decimal-leading-zero {
-  list-style-type: decimal-leading-zero;
-}
-
-.qti-list-style-type-lower-alpha {
-  list-style-type: lower-alpha;
-}
-
-.qti-list-style-type-upper-alpha {
-  list-style-type: upper-alpha;
-}
-
-.qti-list-style-type-lower-roman {
-  list-style-type: lower-roman;
-}
-
-.qti-list-style-type-upper-roman {
-  list-style-type: upper-roman;
-}
-
-.qti-list-style-type-lower-latin {
-  list-style-type: lower-latin;
-}
-
-.qti-list-style-type-upper-latin {
-  list-style-type: upper-latin;
-}
-
-.qti-list-style-type-lower-greek {
-  list-style-type: lower-greek;
-}
-
-.qti-list-style-type-arabic-indic {
-  list-style-type: arabic-indic;
-}
-
-.qti-list-style-type-armenian {
-  list-style-type: armenian;
-}
-
-.qti-list-style-type-lower-armenian {
-  list-style-type: lower-armenian;
-}
-
-.qti-list-style-type-upper-armenian {
-  list-style-type: upper-armenian;
-}
-
-.qti-list-style-type-bengali {
-  list-style-type: bengali;
-}
-
-.qti-list-style-type-cambodian {
-  list-style-type: cambodian;
-}
-
-.qti-list-style-type-simp-chinese-formal {
-  list-style-type: simp-chinese-formal;
-}
-
-.qti-list-style-type-simp-chinese-informal {
-  list-style-type: simp-chinese-informal;
-}
-
-.qti-list-style-type-trad-chinese-formal {
-  list-style-type: trad-chinese-formal;
-}
-
-.qti-list-style-type-trad-chinese-informal {
-  list-style-type: trad-chinese-informal;
-}
-
-.qti-list-style-type-cjk-ideographic {
-  list-style-type: cjk-ideographic;
-}
-
-.qti-list-style-type-cjk-heavenly-stem {
-  list-style-type: cjk-heavenly-stem;
-}
-
-.qti-list-style-type-cjk-earthly-branch {
-  list-style-type: cjk-earthly-branch;
-}
-
-.qti-list-style-type-devanagari {
-  list-style-type: devanagari;
-}
-
-.qti-list-style-type-ethiopic-halehame-ti-er {
-  list-style-type: ethiopic-halehame-ti-er;
-}
-
-.qti-list-style-type-ethiopic-halehame-ti-et {
-  list-style-type: ethiopic-halehame-ti-et;
-}
-
-.qti-list-style-type-ethiopic-halehame-am {
-  list-style-type: ethiopic-halehame-am;
-}
-
-.qti-list-style-type-ethiopic-halehame {
-  list-style-type: ethiopic-halehame;
-}
-
-.qti-list-style-type-georgian {
-  list-style-type: georgian;
-}
-
-.qti-list-style-type-gujarati {
-  list-style-type: gujarati;
-}
-
-.qti-list-style-type-gurmukhi {
-  list-style-type: gurmukhi;
-}
-
-.qti-list-style-type-hangul {
-  list-style-type: hangul;
-}
-
-.qti-list-style-type-hangul-consonant {
-  list-style-type: hangul-consonant;
-}
-
-.qti-list-style-type-hebrew {
-  list-style-type: hebrew;
-}
-
-.qti-list-style-type-hiragana {
-  list-style-type: hiragana;
-}
-
-.qti-list-style-type-hiragana-iroha {
-  list-style-type: hiragana-iroha;
-}
-
-.qti-list-style-type-khmer {
-  list-style-type: khmer;
-}
-
-.qti-list-style-type-korean-hangul-formal {
-  list-style-type: korean-hangul-formal;
-}
-
-.qti-list-style-type-korean-hanja-formal {
-  list-style-type: korean-hanja-formal;
-}
-
-.qti-list-style-type-korean-hanja-informal {
-  list-style-type: korean-hanja-informal;
-}
-
-.qti-list-style-type-lao {
-  list-style-type: lao;
-}
-
-.qti-list-style-type-malayalam {
-  list-style-type: malayalam;
-}
-
-.qti-list-style-type-mongolian {
-  list-style-type: mongolian;
-}
-
-.qti-list-style-type-myanmar {
-  list-style-type: myanmar;
-}
-
-.qti-list-style-type-oriya {
-  list-style-type: oriya;
-}
-
-.qti-list-style-type-persian {
-  list-style-type: persian;
-}
-
-.qti-list-style-type-thai {
-  list-style-type: thai;
-}
-
-.qti-list-style-type-tibetan {
-  list-style-type: tibetan;
-}
-
-.qti-list-style-type-telugu {
-  list-style-type: telugu;
-}
-
-.qti-list-style-type-urdu {
-  list-style-type: urdu;
-}
-
-/* =========================
-     Other QTI 3 Presentation Utilities
-     ========================= */
-
-.qti-bordered {
-  border: 1px solid var(--table-border-color);
-}
-
-.qti-underline {
-  text-decoration: underline;
-  text-decoration-color: var(--foreground);
-}
-
-.qti-italic {
-  font-style: italic;
-}
-
-.qti-well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: var(--well-bg);
-  border: var(--well-border);
-  border-radius: 4px;
-  box-shadow: var(--well-box-shadow);
-}
-
-/* Set writing-mode to vertical-rl 
-     Typical for CJK vertical text */
-
-.qti-writing-mode-vertical-rl {
-  writing-mode: vertical-rl;
-}
-
-/* Set writing-mode to vertical-lr
-     Typical for Mongolian vertical text  */
-
-.qti-writing-mode-vertical-lr {
-  writing-mode: vertical-lr;
-}
-
-/* Set writing-mode to horizontal-tb 
-     Browser default */
-
-.qti-writing-mode-horizontal-tb {
-  writing-mode: horizontal-tb;
-}
-
-/* Float an element left */
-
-.qti-float-left {
-  float: left;
-}
-
-/* Float an element right */
-
-.qti-float-right {
-  float: right;
-}
-
-/* Remove a float */
-
-.qti-float-none {
-  float: none;
-}
-
-/* Clearfix Hack to apply to a container of 
-   floated content that overflows the container. */
-
-.qti-float-clearfix::after {
-  content: '';
-  clear: both;
-  display: table;
-}
-
-.qti-float-clear-left
-  .qti-float-clear-right
-  .qti-float-clear-both
-  
-  /* Set text-orientation to upright */
-  .qti-text-orientation-upright {
-  text-orientation: upright;
-}
-
-/* stylelint-disable number-max-precision */
-
-@layer qti-base {
-  .qti-layout-row {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    gap: 2.1276595745%;
-  }
-
-  .qti-layout-row [class*='qti-layout-col']:not(:empty) {
-    box-sizing: border-box;
-  }
-
-  .qti-layout-row [class*='qti-layout-col']:empty {
-    width: 0;
-    overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
-  }
-
-  .qti-layout-col1 {
-    width: 6.3829787234%;
-  }
-
-  .qti-layout-col2 {
-    width: 14.8936170213%;
-  }
-
-  .qti-layout-col3 {
-    width: 23.4042553191%;
-  }
-
-  .qti-layout-col4 {
-    width: 31.914893617%;
-  }
-
-  .qti-layout-col5 {
-    width: 40.4255319149%;
-  }
-
-  .qti-layout-col6 {
-    width: 48.9361702128%;
-  }
-
-  .qti-layout-col7 {
-    width: 57.4468085106%;
-  }
-
-  .qti-layout-col8 {
-    width: 65.9574468085%;
-  }
-
-  .qti-layout-col9 {
-    width: 74.4680851064%;
-  }
-
-  .qti-layout-col10 {
-    width: 82.9787234043%;
-  }
-
-  .qti-layout-col11 {
-    width: 91.4893617021%;
-  }
-
-  .qti-layout-col12 {
-    width: 100%;
-  }
-
-  .qti-layout-offset1 {
-    margin-left: 8.5106382979%;
-  }
-
-  .qti-layout-offset2 {
-    margin-left: 17.0212765957%;
-  }
-
-  .qti-layout-offset3 {
-    margin-left: 25.5319148936%;
-  }
-
-  .qti-layout-offset4 {
-    margin-left: 34.0425531915%;
-  }
-
-  .qti-layout-offset5 {
-    margin-left: 42.5531914894%;
-  }
-
-  .qti-layout-offset6 {
-    margin-left: 51.0638297872%;
-  }
-
-  .qti-layout-offset7 {
-    margin-left: 59.5744680851%;
-  }
-
-  .qti-layout-offset8 {
-    margin-left: 68.085106383%;
-  }
-
-  .qti-layout-offset9 {
-    margin-left: 76.5957446809%;
-  }
-
-  .qti-layout-offset10 {
-    margin-left: 85.1063829787%;
-  }
-
-  .qti-layout-offset11 {
-    margin-left: 93.6170212766%;
-  }
-
-  .qti-layout-offset12 {
-    margin-left: 102.1276595745%;
-  }
-
-  @media (width <= 767px) {
-    [class*='qti-layout-col'] {
-      width: 100%;
-    }
-  }
-}
-
-[view],
-qti-outcome-declaration,
-qti-response-declaration {
-  display: none;
-}
-
-[view].show {
-  display: block;
-}
-
-:host {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-/* components */
-
-@layer qti-components {
-  qti-choice-interaction {
-    &.qti-input-control-hidden {
-      & qti-simple-choice {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &::part(ch) {
-          display: none;
-        }
-
-        &:state(--checked),
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &:state(readonly),
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &:state(disabled),
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        border-radius: var(--qti-border-radius);
-
-        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-    }
-
-    &:not(.qti-input-control-hidden) {
-      & qti-simple-choice {
-
-        &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &:state(--checked),
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &:state(readonly),
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &:state(disabled),
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        &::part(cha) {
-          width: calc(var(--qti-form-size) - 6px);
-          height: calc(var(--qti-form-size) - 6px);
-        }
-
-        &:state(radio)::part(ch) {
-          border-radius: 100%;
-          display: grid;
-          place-content: center;
-          width: var(--qti-form-size);
-          height: var(--qti-form-size);
-          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-          outline: none;
-        }
-
-        &:state(radio):state(--checked)::part(cha) {
-          background-color: var(--qti-border-active);
-          border-radius: 100%;
-        }
-
-        &:state(checkbox)::part(ch) {
-          display: flex;
-          place-items: center;
-          border-radius: var(--qti-border-radius);
-          display: grid;
-          place-content: center;
-          width: var(--qti-form-size);
-          height: var(--qti-form-size);
-          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-          outline: none;
-        }
-
-        &:state(checkbox):state(--checked)::part(cha) {
-          background-color: var(--qti-border-active);
-          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-                  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-        }
-
-        gap: 0.5rem;
-
-        border-radius: var(--qti-border-radius);
-
-        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-        outline: none;
-
-        cursor: pointer
-      }
-    }
-
-    & qti-simple-choice {
-      width: -moz-fit-content;
-      width: fit-content;
-      cursor: pointer;
-
-      &:state(correct-response),
-      &[data-correct-response='true'] {
-        &::after {
-          content: '\\02714';
-          color: #16a34a; /* text-green-600 */
-        }
-      }
-    }
-
-    & qti-simple-choice > p {
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-  }
-
-  .hover-border {
-    border: 2px solid #000; /* Adjust the border style and color as needed */
-  }
-
-  qti-graphic-gap-match-interaction {
-    position: relative;
-
-    &.qti-selections-light {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-        border-color: var(--qti-light-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-      }
-    }
-
-    &.qti-selections-dark {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-        border-color: var(--qti-dark-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-      }
-    }
-
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active)::part(drags) {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-enabled)::part(drags) {
-      background-color: var(--qti-bg-active);
-    }
-
-    & qti-gap-img,
-    qti-gap-text {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: grab;
-    }
-
-    & qti-associable-hotspot {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 2px solid transparent;
-
-      &[enabled] {
-
-        /* Light theme override */
-        .qti-selections-light {
-          background-color: var(--qti-light-bg-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark {
-          background-color: var(--qti-dark-bg-active);
-        }
-        background-color: var(--qti-bg-active)
-      }
-
-      &[active] {
-
-        /* Light theme override */
-        .qti-selections-light {
-          background-color: var(--qti-light-bg-active);
-          border-color: var(--qti-light-border-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark {
-          background-color: var(--qti-dark-bg-active);
-          border-color: var(--qti-dark-border-active);
-        }
-        border-color: var(--qti-border-active);
-        background-color: var(--qti-bg-active)
-      }
-
-      &[disabled] {
-
-        &:not(:empty) {
-          cursor: default !important;
-        }
-
-        cursor: not-allowed;
-
-        background-color: var(--qti-disabled-bg);
-
-        color: var(--qti-disabled-color);
-
-        border-color: var(--qti-border-color);
-
-        outline: 4px solid var(--qti-disabled-bg)
-      }
-
-      &:empty::after {
-        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
-        content: '\\0000a0'; /* when empty, put a space in it */
-      }
-
-      &:not(:empty) {
-        padding: 0;
-        width: auto;
-      }
-
-      &:not(:empty) > * {
-        flex: 1;
-        transform: rotate(0); /* rotate-0 */
-        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
-      }
-    }
-
-    & img {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  qti-text-entry-interaction {
-    &::part(input) {
-      border-radius: 0;
-      cursor: text;
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-      background: unset;
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--qti-hover-bg);
-    }
-
-    &:focus-within {
-      &::part(input) {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        border-color: var(--qti-border-active);
-      }
-    }
-  }
-
-  qti-extended-text-interaction {
-    &::part(textarea) {
-      border-radius: 0;
-      cursor: text;
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-      background: unset;
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--qti-hover-bg);
-    }
-
-    &:focus-within {
-      &::part(textarea) {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        border-color: var(--qti-border-active);
-      }
-    }
-  }
-
-  qti-gap-match-interaction {
-    &.qti-selections-light {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-        border-color: var(--qti-light-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-      }
-    }
-
-    &.qti-selections-dark {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-        border-color: var(--qti-dark-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-      }
-    }
-
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active)::part(drags) {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-enabled)::part(drags) {
-      background-color: var(--qti-bg-active);
-    }
-
-    & qti-gap-text {
-
-      &[dragging] {
-        pointer-events: none;
-        rotate: -2deg;
-        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-      }
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
-      cursor: grab;
-
-      background-color: var(--qti-bg);
-
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-      border-radius: var(--qti-border-radius);
-
-      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-      background-repeat: repeat-y;
-
-      background-position: left center;
-
-      background-size: 14px 8px
-    }
-
-    & qti-gap {
-
-      &[disabled] {
-
-        &:not(:empty) {
-          cursor: default !important;
-        }
-
-        cursor: not-allowed;
-
-        background-color: var(--qti-disabled-bg);
-
-        color: var(--qti-disabled-color);
-
-        border-color: var(--qti-border-color);
-
-        outline: 4px solid var(--qti-disabled-bg)
-      }
-
-      &[enabled] {
-
-        /* Light theme override */
-        .qti-selections-light {
-          border-color: var(--qti-light-border-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark {
-          border-color: var(--qti-dark-border-active);
-        }
-        background-color: var(--qti-bg-active)
-      }
-
-      &[active] {
-
-        /* Light theme override */
-        .qti-selections-light {
-          background-color: var(--qti-light-bg-active);
-          border-color: var(--qti-light-border-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark {
-          background-color: var(--qti-dark-bg-active);
-          border-color: var(--qti-dark-border-active);
-        }
-        border-color: var(--qti-border-active);
-        background-color: var(--qti-bg-active)
-      }
-
-      display: inline-flex;
-      align-items: center;
-
-      &:empty::after {
-        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
-        content: '\\0000a0'; /* when empty, put a space in it */
-      }
-
-      &:not(:empty) {
-        display: inline-flex;
-        padding: 0;
-        width: auto;
-      }
-
-      &:not(:empty) > * {
-        flex: 1;
-        transform: rotate(0); /* rotate-0 */
-        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
-      }
-
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
-    center no-repeat;
-
-      border-radius: var(--qti-border-radius);
-
-      position: relative;
-
-      background-color: var(--qti-bg);
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none
-    }
-  }
-
-  qti-hotspot-interaction {
-    & qti-hotspot-choice {
-      &[shape='circle'] {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &:state(--checked),
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-        }
-
-        &:state(--readonly),
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &:state(--disabled),
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      &[shape='rect'] {
-
-        /* &:hover {
-          @apply hov;
-        } */
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &:state(--checked),
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      &[shape='poly'] {
-        &:hover::after {
-          content: '';
-          width: 100%;
-          height: 100%;
-          background: repeating-linear-gradient(
-            45deg,
-            var(--qti-border-active),
-            var(--qti-border-active) 5px,
-            transparent 5px,
-            transparent 10px
-          );
-          display: block;
-        }
-
-        &:state(--checked)::after,
-        &[aria-checked='true']::after {
-          content: '';
-          width: 100%;
-          height: 100%;
-          background: repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 5px,
-            var(--qti-border-active) 5px,
-            var(--qti-border-active) 10px
-          );
-          display: block;
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-      }
-    }
-  }
-
-  qti-hottext-interaction {
-    /* &:not(.qti-input-control-hidden),
-    &:not(.qti-unselected-hidden) { */
-    qti-hottext {
-      display: inline-flex;
-      align-items: center;
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      &::part(cha) {
-        width: calc(var(--qti-form-size) - 6px);
-        height: calc(var(--qti-form-size) - 6px);
-      }
-
-      &:state(radio)::part(ch) {
-        border-radius: 100%;
-        display: grid;
-        place-content: center;
-        width: var(--qti-form-size);
-        height: var(--qti-form-size);
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-        outline: none;
-      }
-
-      &:state(radio):state(--checked)::part(cha) {
-        background-color: var(--qti-border-active);
-        border-radius: 100%;
-      }
-
-      &:state(checkbox)::part(ch) {
-        display: flex;
-        place-items: center;
-        border-radius: var(--qti-border-radius);
-        display: grid;
-        place-content: center;
-        width: var(--qti-form-size);
-        height: var(--qti-form-size);
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-        outline: none;
-      }
-
-      &:state(checkbox):state(--checked)::part(cha) {
-        background-color: var(--qti-border-active);
-        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-      }
-
-      gap: 0.5rem;
-
-      border-radius: var(--qti-border-radius);
-
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-      outline: none;
-
-      cursor: pointer
-    }
-
-    /* } */
-
-    &.qti-input-control-hidden {
-      qti-hottext {
-        /* --qti-padding-md: 0.1rem;
-        --qti-padding-lg: 0.2rem;
-        --qti-border-radius-md: 0.3rem;
-        --qti-border-thickness: 1px;
-        --qti-font-weight-semibold: 400; */
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        /* @layer qti-variants { */
-        &::part(ch) {
-          display: none;
-        }
-
-        &:state(--checked) {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        border-radius: var(--qti-border-radius);
-
-        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      /* } */
-    }
-
-    &.qti-unselected-hidden {
-      qti-hottext {
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        cursor: pointer;
-
-        &::part(ch) {
-          display: none;
-        }
-
-        &:state(--checked) {
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-      }
-    }
-  }
-
-  qti-inline-choice-interaction {
-    &::part(select) {
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      border-radius: var(--qti-border-radius);
-
-      position: relative;
-
-      -webkit-appearance: none;
-
-         -moz-appearance: none;
-
-              appearance: none;
-
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-      padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none;
-
-      background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px
-    }
-  }
-
-  qti-match-interaction:not(.qti-match-tabular) {
-    &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-active) qti-simple-match-set:first-of-type {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    /* The draggables */
-    & qti-simple-match-set:first-of-type {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start; /* Prevents children from stretching */
-      gap: var(--qti-gap-size);
-      border: 2px solid transparent;
-
-      & qti-simple-associable-choice {
-
-        &[dragging] {
-          pointer-events: none;
-          rotate: -2deg;
-          box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-        }
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
-        cursor: grab;
-
-        background-color: var(--qti-bg);
-
-        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-        border-radius: var(--qti-border-radius);
-
-        padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none;
-
-        background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-        background-repeat: repeat-y;
-
-        background-position: left center;
-
-        background-size: 14px 8px
-      }
-    }
-
-    /* The droppables */
-    & qti-simple-match-set:last-of-type {
-      display: grid;
-      grid-auto-columns: 1fr; /* auto-cols-fr */
-      grid-auto-flow: column; /* grid-flow-col */
-      gap: var(--qti-gap-size); /* gap-2 */
-      width: 100%; /* w-full */
-
-      & qti-simple-associable-choice {
-        display: flex;
-        flex-direction: column;
-      }
-
-      & > qti-simple-associable-choice {
-        /* a droppable qti-simple-associable-choice */
-        box-sizing: border-box;
-        display: grid;
-        grid-row: 2 / 4;
-        grid-template-rows: subgrid;
-
-        & img {
-          max-width: 100%;
-          height: auto;
-        }
-
-        &[enabled] {
-          &::part(dropslot) {
-            background-color: var(--qti-bg-active);
-          }
-        }
-
-        &[disabled] {
-          &::part(dropslot) {
-            cursor: not-allowed;
-            background-color: var(--qti-disabled-bg);
-            color: var(--qti-disabled-color);
-            border-color: var(--qti-border-color);
-            outline: 4px solid var(--qti-disabled-bg);
-          }
-        }
-
-        &[active] {
-          &::part(dropslot) {
-            border-color: var(--qti-border-active);
-            background-color: var(--qti-bg-active);
-          }
-        }
-
-        &::part(dropslot) {
-
-          &[dragging] {
-            pointer-events: none;
-            rotate: -2deg;
-            box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-          }
-
-          &:focus {
-            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-          }
-
-          min-height: 6rem;
-          gap: var(--qti-gap-size);
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
-    center no-repeat;
-          border-radius: var(--qti-border-radius);
-          position: relative;
-          background-color: var(--qti-bg);
-          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-          outline: none;
-        }
-
-        & > *:not(qti-simple-associable-choice) {
-          pointer-events: none;
-        }
-
-        & > qti-simple-associable-choice {
-
-          &::part(dropslot) {
-            display: none;
-          }
-
-          &:hover {
-            background-color: var(--qti-hover-bg);
-          }
-
-          &:focus {
-            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-          }
-
-          flex-basis: fit-content;
-
-          transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
-          cursor: grab;
-
-          background-color: var(--qti-bg);
-
-          padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-          border-radius: var(--qti-border-radius);
-
-          padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
-          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-          outline: none;
-
-          background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-          background-repeat: repeat-y;
-
-          background-position: left center;
-
-          background-size: 14px 8px;
-        }
-      }
-    }
-  }
-
-  qti-order-interaction:state(--dragzone-active)::part(drags) {
-    border-color: var(--qti-border-active);
-    background-color: var(--qti-bg-active);
-  }
-
-  qti-order-interaction:state(--dragzone-enabled)::part(drags) {
-    background-color: var(--qti-bg-active);
-  }
-
-  qti-order-interaction {
-    &::part(qti-simple-choice),
-    & qti-simple-choice {
-
-      &[dragging] {
-        pointer-events: none;
-        rotate: -2deg;
-        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-      }
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
-      cursor: grab;
-
-      background-color: var(--qti-bg);
-
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-      border-radius: var(--qti-border-radius);
-
-      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-      background-repeat: repeat-y;
-
-      background-position: left center;
-
-      background-size: 14px 8px
-    }
-
-    &::part(qti-simple-choice) {
-      display: flex;
-      overflow: hidden;
-      align-items: center;
-      width: 100%;
-      text-overflow: ellipsis;
-    }
-
-    &::part(drops) {
-      gap: 0.5rem; /* gap-2 */
-    }
-
-    &::part(drags) {
-      gap: 0.5rem; /* gap-2 */
-    }
-
-    &::part(drop-list) {
-
-      &[enabled] {
-
-        /* Light theme override */
-        .qti-selections-light {
-          border-color: var(--qti-light-border-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark {
-          border-color: var(--qti-dark-border-active);
-        }
-        background-color: var(--qti-bg-active)
-      }
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      display: flex;
-      min-height: 4rem;
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
-    center no-repeat;
-      border-radius: var(--qti-border-radius);
-      position: relative;
-      background-color: var(--qti-bg);
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-      outline: none;
-    }
-
-    &::part(active) {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    & drop-list {
-      &[shape='circle'] {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      &[shape='square'] {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-    }
-  }
-
-  qti-associate-interaction {
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
-      background-color: var(--qti-bg-active);
-    }
-
-    & qti-simple-associable-choice, /* drags when in lightdom */
-    &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      &[dragging] {
-        pointer-events: none;
-        rotate: -2deg;
-        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
-    0 4px 8px rgb(0 0 0 / 10%);
-      }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
-      cursor: grab;
-
-      background-color: var(--qti-bg);
-
-      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
-      border-radius: var(--qti-border-radius);
-
-      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-      background-repeat: repeat-y;
-
-      background-position: left center;
-
-      background-size: 14px 8px
-    }
-
-    /* display: flex;
-    overflow: hidden;
-    align-items: center; */
-
-    /* &::part(drop-container) {
-      display: flex;
-      flex-direction: column;
-      gap: var(--qti-gap-size);
-    } */
-
-    &::part(drop-list) {
-
-      display: grid;
-      height: 3rem;
-      min-width: 10rem;
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
-    center no-repeat;
-      border-radius: var(--qti-border-radius);
-      position: relative;
-      background-color: var(--qti-bg);
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-      outline: none;
-    }
-
-    &::part(drop-list):focus {
-      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-    }
-
-    &::part(drop-list)[dragging] {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    /* &::part(drop-list) {
-      @apply act;
-    } */
-  }
-
-  qti-graphic-order-interaction {
-    & qti-hotspot-choice {
-
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      &:state(--checked),
-      &[aria-checked='true'] {
-        border-color: var(--qti-border-active);
-        background-color: var(--qti-bg-active);
-      }
-
-      &[aria-readonly='true'] {
-        cursor: pointer;
-        background-color: var(--qti-bg);
-        outline: 0;
-        border: none;
-      }
-
-      &[aria-disabled='true'] {
-        cursor: not-allowed;
-        background-color: var(--qti-disabled-bg);
-        color: var(--qti-disabled-color);
-        border-color: var(--qti-border-color);
-        outline: 4px solid var(--qti-disabled-bg);
-      }
-
-      &[aria-ordervalue] {
-        display: grid;
-        place-content: center;
-      }
-
-      &[aria-ordervalue]::after {
-        content: attr(aria-ordervalue) !important;
-      }
-
-      width: 100%;
-
-      height: 100%;
-
-      background-color: transparent;
-
-      padding: 0;
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none
-    }
-
-    &.qti-selections-light {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-        border-color: var(--qti-light-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-      }
-    }
-
-    &.qti-selections-dark {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-        border-color: var(--qti-dark-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-      }
-    }
-
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active)::part(drags) {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-enabled)::part(drags) {
-      background-color: var(--qti-bg-active);
-    }
-  }
-
-  qti-graphic-associate-interaction {
-    position: relative;
-    display: block;
-
-    & qti-associable-hotspot {
-      &[shape='circle'] {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      &[shape='square'] {
-
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
-
-        &:focus {
-          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-readonly='true'] {
-          cursor: pointer;
-          background-color: var(--qti-bg);
-          outline: 0;
-          border: none;
-        }
-
-        &[aria-disabled='true'] {
-          cursor: not-allowed;
-          background-color: var(--qti-disabled-bg);
-          color: var(--qti-disabled-color);
-          border-color: var(--qti-border-color);
-          outline: 4px solid var(--qti-disabled-bg);
-        }
-
-        width: 100%;
-
-        height: 100%;
-
-        background-color: transparent;
-
-        padding: 0;
-
-        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-    }
-
-    &.qti-selections-light {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-        border-color: var(--qti-light-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-light-bg-active);
-      }
-    }
-
-    &.qti-selections-dark {
-      &:state(--dragzone-active)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-        border-color: var(--qti-dark-border-active);
-      }
-
-      &:state(--dragzone-enabled)::part(drags) {
-        background-color: var(--qti-dark-bg-active);
-      }
-    }
-
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active)::part(drags) {
-      border-color: var(--qti-border-active);
-      background-color: var(--qti-bg-active);
-    }
-
-    &:state(--dragzone-enabled)::part(drags) {
-      background-color: var(--qti-bg-active);
-    }
-  }
-
-  qti-slider-interaction {
-    --qti-tick-color: rgb(229 231 235 / 100%);
-    --qti-tick-width: 1px;
-  }
-
-  qti-select-point-interaction {
-    &::part(point) {
-      &:hover {
-        background-color: var(--qti-hover-bg);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-      }
-
-      border-radius: 100%;
-
-      width: var(--qti-point-size);
-
-      height: var(--qti-point-size);
-
-      background-color: transparent;
-
-      padding: 0;
-
-      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none;
-    }
-  }
-
-  qti-position-object-stage {
-    & qti-position-object-interaction {
-      /* no styles necessary, only layout styles, defined in the component */
-    }
-  }
-
-  qti-prompt {
-    margin: 0.5rem 0; /* my-2 */
-    display: block;
-    width: 100%;
-  }
-}
-`;var q=class extends re{constructor(){super(...arguments);this.testURL=null;this.testDoc=null;this.testXML=null;this.templateContent=null}async handleTestURLChange(){if(this.testURL)try{let t=await N().load(this.testURL);this.testDoc=t.htmlDoc()}catch(t){console.error("Error loading or parsing XML:",t)}}handleTestXMLChange(){if(this.testXML)try{this.testDoc=N().parse(this.testXML).htmlDoc()}catch(t){console.error("Error parsing XML:",t)}}async connectedCallback(){super.connectedCallback(),this.initializeTemplateContent(),this.applyStyles(),this.testURL&&this.handleTestURLChange(),this.testXML&&this.handleTestXMLChange()}initializeTemplateContent(){let t=this.querySelector("template");this.templateContent=t?t.content:B``}applyStyles(){let t=new CSSStyleSheet;t.replaceSync(mt),this.shadowRoot.adoptedStyleSheets=[t]}render(){return B`
-      ${this.templateContent}
-      <slot></slot>
-      ${ae(this.testDoc,B`<span>Loading...</span>`)}
-    `}};a([oe({type:String,attribute:"test-url"})],q.prototype,"testURL",2),a([gt()],q.prototype,"testDoc",2),a([gt()],q.prototype,"testXML",2),a([f("testURL",{waitUntilFirstUpdate:!0})],q.prototype,"handleTestURLChange",1),a([f("testXML",{waitUntilFirstUpdate:!0})],q.prototype,"handleTestXMLChange",1),q=a([ie("test-container")],q);import{html as ne}from"lit";import{customElement as se,property as ht}from"lit/decorators.js";import{prepareTemplate as de}from"stampino";var A=class extends l{constructor(){super();this.maxDisplayedItems=2;this.skipOnCategory="dep-informational";this._internals.ariaLabel="pagination"}createRenderRoot(){return this}render(){let t=this._testContext.items.reduce((s,p)=>{let y=p.category?.split(" ").includes(this.skipOnCategory)?"i":s.counter++;return s.result.push({...p,newIndex:y}),s},{counter:0,result:[]}).result,e=t.findIndex(s=>s.identifier===this._testContext.navItemId),r=Math.max(0,e-this.maxDisplayedItems),n=Math.min(t.length,e+this.maxDisplayedItems+1),d=t.slice(r,n);return ne`
-      ${d.map(s=>{let p=s.variables.find(H=>H.identifier=="SCORE"),c=parseInt(p?.value?.toString()),y=s.variables.find(H=>H.identifier==="completionStatus")?.value,x=s.category!==this.skipOnCategory?"regular":"info",bt=this._testContext.navItemId===s.identifier,ut=this._testContext.view==="scorer"&&x=="regular"&&c!==void 0&&!isNaN(c)&&c>0,qt=this._testContext.view==="scorer"&&x=="regular"&&c!==void 0&&!isNaN(c)&&c<=0,vt=this._testContext.view==="candidate"&&y==="completed"&&s.category!==this.skipOnCategory,ft={...s,type:x,active:bt,correct:ut,incorrect:qt,answered:vt},yt=this.firstElementChild;return de(yt)({item:ft})})}
-    `}};a([ht({type:Number,attribute:"max-displayed-items"})],A.prototype,"maxDisplayedItems",2),a([ht({type:String,attribute:"skip-on-category"})],A.prototype,"skipOnCategory",2),A=a([se("test-paging-buttons-stamp")],A);export{h as QtiAssessmentItemRef,b as QtiAssessmentSection,v as QtiAssessmentTest,O as QtiTest,u as QtiTestPart,l as TestComponent,q as TestContainer,z as TestItemLink,S as TestNext,A as TestPagingButtonsStamp,D as TestPrev,m as TestView,g as testContext,U as testElement};