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

package/dist/qti-test/components/test-next.spec.css

@@ -0,0 +1,2481 @@
+/* src/item.css */
+@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
+:root,
+:host {
+  --qti-bg-active: #ffecec;
+  --qti-border-active: #f86d70;
+  --qti-gap-size: 1rem;
+  --qti-bg: white;
+  --qti-hover-bg: #f9fafb;
+  --qti-light-bg-active: #f0f0f0;
+  --qti-light-border-active: #d0d0d0;
+  --qti-dark-bg-active: #1f2937;
+  --qti-dark-border-active: #64748b;
+  --qti-disabled-bg: #f3f4f6;
+  --qti-disabled-color: #45484f;
+  --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));
+  --qti-focus-border-width: 5px;
+  --qti-focus-color: #bddcff7e;
+  --qti-form-size: 1rem;
+  --qti-point-size: 2rem;
+  --qti-order-size: 2rem;
+  --qti-padding-vertical: 0.5rem;
+  --qti-padding-horizontal: 0.5rem;
+}
+.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");
+}
+.bordered {
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+.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;
+}
+.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;
+}
+.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);
+  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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+  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;
+}
+.dragging {
+  pointer-events: none;
+  rotate: -2deg;
+  box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
+}
+.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;
+}
+.dropping {
+  background-color: var(--qti-bg-active);
+}
+.order {
+  display: grid;
+  place-content: center;
+  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;
+}
+.check-size {
+  width: calc(var(--qti-form-size) - 6px);
+  height: calc(var(--qti-form-size) - 6px);
+}
+.check {
+  gap: 0.5rem;
+  border-radius: var(--qti-border-radius);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  outline: none;
+  cursor: pointer;
+}
+.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;
+}
+.check-radio-checked {
+  background-color: var(--qti-border-active);
+  border-radius: 100%;
+}
+.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;
+}
+.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");
+}
+.hov {
+  background-color: var(--qti-hover-bg);
+}
+.foc {
+  box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+}
+.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);
+}
+.rdo {
+  cursor: pointer;
+  background-color: var(--qti-bg);
+  outline: 0;
+  border: none;
+}
+.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);
+}
+.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;
+}
+.qti-hidden {
+  display: none;
+}
+.qti-visually-hidden {
+  position: fixed !important;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  height: 1px;
+  width: 1px;
+  border: 0;
+  margin: -1px;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.qti-align-left {
+  text-align: left;
+}
+.qti-align-center {
+  text-align: center;
+}
+.qti-align-right {
+  text-align: right;
+}
+.qti-valign-top {
+  vertical-align: top;
+}
+.qti-valign-middle {
+  vertical-align: middle;
+}
+.qti-valign-baseline {
+  vertical-align: baseline;
+}
+.qti-valign-bottom {
+  vertical-align: bottom;
+}
+.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%;
+}
+.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%;
+}
+.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;
+}
+.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;
+}
+.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);
+}
+.qti-writing-mode-vertical-rl {
+  writing-mode: vertical-rl;
+}
+.qti-writing-mode-vertical-lr {
+  writing-mode: vertical-lr;
+}
+.qti-writing-mode-horizontal-tb {
+  writing-mode: horizontal-tb;
+}
+.qti-float-left {
+  float: left;
+}
+.qti-float-right {
+  float: right;
+}
+.qti-float-none {
+  float: none;
+}
+.qti-float-clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+.qti-float-clear-left .qti-float-clear-right .qti-float-clear-both .qti-text-orientation-upright {
+  text-orientation: upright;
+}
+@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;
+  }
+  .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;
+}
+@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: "\2714";
+          color: #16a34a;
+        }
+      }
+    }
+    & qti-simple-choice > p {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+  .hover-border {
+    border: 2px solid #000;
+  }
+  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);
+      }
+    }
+    &: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] {
+        .qti-selections-light {
+          background-color: var(--qti-light-bg-active);
+        }
+        .qti-selections-dark {
+          background-color: var(--qti-dark-bg-active);
+        }
+        background-color: var(--qti-bg-active);
+      }
+      &[active] {
+        .qti-selections-light {
+          background-color: var(--qti-light-bg-active);
+          border-color: var(--qti-light-border-active);
+        }
+        .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);
+        content: "\a0";
+      }
+      &:not(:empty) {
+        padding: 0;
+        width: auto;
+      }
+      &:not(:empty) > * {
+        flex: 1;
+        transform: rotate(0);
+        box-shadow: 0 0 0 1px #e5e7eb;
+      }
+    }
+    & 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);
+      }
+    }
+    &: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] {
+        .qti-selections-light {
+          border-color: var(--qti-light-border-active);
+        }
+        .qti-selections-dark {
+          border-color: var(--qti-dark-border-active);
+        }
+        background-color: var(--qti-bg-active);
+      }
+      &[active] {
+        .qti-selections-light {
+          background-color: var(--qti-light-bg-active);
+          border-color: var(--qti-light-border-active);
+        }
+        .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);
+        content: "\a0";
+      }
+      &:not(:empty) {
+        display: inline-flex;
+        padding: 0;
+        width: auto;
+      }
+      &:not(:empty) > * {
+        flex: 1;
+        transform: rotate(0);
+        box-shadow: 0 0 0 1px #e5e7eb;
+      }
+      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] {
+        &: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 {
+    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 {
+        &: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) {
+          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);
+    }
+    & qti-simple-match-set:first-of-type {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      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;
+      }
+    }
+    & qti-simple-match-set:last-of-type {
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      gap: var(--qti-gap-size);
+      width: 100%;
+      & qti-simple-associable-choice {
+        display: flex;
+        flex-direction: column;
+      }
+      & > 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;
+    }
+    &::part(drags) {
+      gap: 0.5rem;
+    }
+    &::part(drop-list) {
+      &[enabled] {
+        .qti-selections-light {
+          border-color: var(--qti-light-border-active);
+        }
+        .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 {
+    &: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,
+    &::part(qti-simple-associable-choice) {
+      &: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;
+    }
+    &::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);
+    }
+  }
+  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);
+      }
+    }
+    &: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);
+      }
+    }
+    &: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 {
+    }
+  }
+  qti-prompt {
+    margin: 0.5rem 0;
+    display: block;
+    width: 100%;
+  }
+}
+/*# sourceMappingURL=test-next.spec.css.map */