@citolab/qti-components 6.9.1-beta.8 → 6.9.1-beta.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/custom-element-eslint-rules.js +331 -0
  2. package/dist/custom-elements.json +21105 -4972
  3. package/dist/index.global.js +226 -0
  4. package/dist/index.js +7323 -1786
  5. package/dist/index.min.js +952 -0
  6. package/dist/item.css +2405 -697
  7. package/dist/qti-components/index.cjs +6509 -0
  8. package/dist/qti-components/index.d.cts +150 -0
  9. package/dist/qti-components/index.d.ts +6 -6
  10. package/dist/qti-components/index.js +6013 -182
  11. package/dist/qti-components-jsx.d.ts +1836 -0
  12. package/dist/qti-item/index.cjs +90 -0
  13. package/dist/qti-item/index.d.cts +24 -0
  14. package/dist/qti-item/index.d.ts +15 -10
  15. package/dist/qti-item/index.js +64 -1504
  16. package/dist/qti-loader/index.cjs +333 -0
  17. package/dist/qti-loader/index.d.cts +20 -0
  18. package/dist/qti-loader/index.d.ts +19 -4
  19. package/dist/qti-loader/index.js +306 -2
  20. package/dist/{qti-simple-choice-CafJuhnH.d.ts → qti-simple-choice-DC5DJota.d.cts} +116 -152
  21. package/dist/qti-simple-choice-DC5DJota.d.ts +1137 -0
  22. package/dist/qti-transformers/index.cjs +317 -0
  23. package/dist/qti-transformers/index.d.cts +75 -0
  24. package/dist/qti-transformers/index.d.ts +25 -120
  25. package/dist/qti-transformers/index.js +289 -2
  26. package/dist/vscode.css-custom-data.json +44 -0
  27. package/dist/vscode.html-custom-data.json +965 -0
  28. package/package.json +144 -63
  29. package/dist/chunk-62FWJYVB.js +0 -24
  30. package/dist/chunk-E7TLXHQH.js +0 -2
package/dist/item.css CHANGED
@@ -2,48 +2,50 @@
2
2
 
3
3
  :root,
4
4
  :host {
5
- --qti-primary-light: #ffbebe;
6
- --qti-primary: #f86d70;
7
- --qti-primary-dark: #a1616a;
5
+ /* Active colors */
6
+ --qti-bg-active: #ffecec;
7
+ --qti-border-active: #f86d70;
8
8
 
9
- --qti-secondary-light: #bed4ff;
10
- --qti-secondary: #6daef8;
11
- --qti-secondary-dark: #3a449d;
9
+ /* Gap size */
10
+ --qti-gap-size: 1rem;
12
11
 
13
- --qti-border-thickness: 1.5px;
14
- --qti-border-style: solid;
15
- --qti-border-color-gray: #c6cad0; /* Corresponding to border-gray-400 */
16
- --qti-border-radius-md: 0.375rem;
17
- --qti-border-radius-lg: 0.5rem;
18
- --qti-border-radius-full: 9999px;
19
-
20
- --qti-bg-gray-50: #f9fafb;
21
- --qti-bg-primary: var(--qti-primary);
22
- --qti-bg-gray-100: #f3f4f6;
12
+ /* Background colors */
13
+ --qti-bg: white;
14
+ --qti-hover-bg: #f9fafb;
23
15
 
24
- --qti-text-gray-500: #6b7280;
25
- --qti-text-white: white;
16
+ /* Disabled colors */
17
+ --qti-disabled-bg: #f3f4f6;
18
+ --qti-disabled-color: #45484f;
26
19
 
27
- --qti-padding-sm: 0.125rem; /* py-0.5 */
28
- --qti-padding-md: 0.5rem; /* py-2 */
29
- --qti-padding-lg: 0.75rem; /* p-3 */
30
- --qti-padding-xl: 1rem; /* pl-4 */
31
-
32
- --qti-font-weight-semibold: 600;
20
+ /* Border properties */
21
+ --qti-border-thickness: 2px;
22
+ --qti-border-style: solid;
23
+ --qti-border-color: #c6cad0;
24
+ --qti-border-radius: 0.3rem;
25
+ --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
33
26
 
34
- --qti-active: blue;
35
- --qti-focus-color: #bddcff7e;
27
+ /* Focus & active states */
36
28
  --qti-focus-border-width: 5px;
29
+ --qti-focus-color: #bddcff7e;
37
30
 
38
- --qti-correct: rgb(74 222 128);
39
- --qti-correct-light: rgb(220 252 231);
40
- --qti-incorrect: rgb(248 113 113);
41
- --qti-incorrect-light: rgb(254 226 226);
31
+ /* Class-specific variables */
42
32
 
33
+ /* Form elements */
43
34
  --qti-form-size: 1rem;
44
- --qti-gap-size: 0.5rem;
35
+
36
+ /* Point elements */
37
+ --qti-point-size: 2rem;
38
+
39
+ /* Order buttons */
40
+ --qti-order-size: 2rem;
41
+
42
+ /* Generic padding for all elements */
43
+ --qti-padding-vertical: 0.5rem; /* py-2 */
44
+ --qti-padding-horizontal: 0.5rem; /* px-2 */
45
45
  }
46
46
 
47
+ /* SVG masks and backgrounds */
48
+
47
49
  .chevron {
48
50
  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")
49
51
  no-repeat center right 6px;
@@ -52,13 +54,13 @@
52
54
  .handle {
53
55
  background-image: radial-gradient(
54
56
  circle at center,
55
- rgba(0, 0, 0, 0.1) 0,
56
- rgb(0, 0, 0, 0.1) 2px,
57
- white 2px,
58
- white 100%
57
+ rgb(0 0 0 / 10%) 0,
58
+ rgb(0 0 0 / 20%) 2px,
59
+ rgb(255 255 255 / 0%) 2px,
60
+ rgb(255 255 255 / 0%) 100%
59
61
  );
60
62
  background-repeat: repeat-y;
61
- background-position: left 2px;
63
+ background-position: left center;
62
64
  background-size: 14px 8px;
63
65
  }
64
66
 
@@ -67,199 +69,1725 @@
67
69
  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");
68
70
  }
69
71
 
72
+ /*
73
+ Following are classes that can be applied to elements and element states, so they are not used directly
74
+ The @apply directive is used to apply these classes to elements
75
+ */
76
+
77
+ /* Apply .bordered to an element */
78
+
70
79
  .bordered {
71
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
80
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
72
81
  outline: none;
73
82
  }
74
83
 
75
- .borderinvisible {
76
- border-color: transparent;
77
- }
84
+ /* Apply .form rules for checkbox and radiobutton */
78
85
 
79
86
  .form {
87
+
88
+ display: grid;
89
+ place-content: center;
80
90
  width: var(--qti-form-size);
81
91
  height: var(--qti-form-size);
82
- align-self: 1;
83
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
84
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
92
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
85
93
  outline: none;
86
94
  }
87
95
 
88
- .p-lg {
89
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
90
- }
96
+ /* Apply .button rules for button-like elements, such as drags and buttons */
91
97
 
92
98
  .button {
93
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
94
- outline: none;
95
- border-radius: var(--qti-border-radius-md);
96
- padding: var(--qti-padding-sm) var(--qti-padding-md); /* Padding shorthand */
97
- font-weight: var(--qti-font-weight-semibold);
98
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
99
+
100
+ border-radius: var(--qti-border-radius);
101
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
102
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
99
103
  outline: none;
100
104
  }
101
105
 
106
+ /* Apply .select for the select dropdown element */
107
+
102
108
  .select {
103
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
104
- outline: none;
105
- border-radius: var(--qti-border-radius-md);
109
+
110
+ border-radius: var(--qti-border-radius);
106
111
  position: relative;
107
112
  -webkit-appearance: none;
108
113
  -moz-appearance: none;
109
114
  appearance: none;
110
- padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray); 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")
115
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
116
+ 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")
111
117
  no-repeat center right 6px;
112
118
  }
113
119
 
120
+ /* Apply .text for the input text and textarea */
121
+
114
122
  .text {
115
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
116
- outline: none;
123
+
117
124
  border-radius: 0;
118
125
  cursor: text;
119
- padding: var(--qti-padding-lg); /* Equal padding on all sides */
126
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
120
127
  background: unset;
121
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
128
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
122
129
  outline: none;
123
130
  }
124
131
 
132
+ /* Apply .spot for hotspot shapes */
133
+
125
134
  .spot {
126
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
127
- outline: none;
135
+
128
136
  width: 100%;
129
137
  height: 100%;
130
138
  background-color: transparent;
131
139
  padding: 0;
132
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
140
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
133
141
  outline: none;
134
142
  }
135
143
 
136
- /* qti-select-point-interaction */
144
+ /* Apply .point for circular small hotspots */
137
145
 
138
146
  .point {
139
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
140
- border-radius: var(--qti-border-radius-full);
141
- outline: none;
142
- width: 1.5rem; /* w-6 */
143
- height: 1.5rem;
147
+
148
+ border-radius: 100%;
149
+ width: var(--qti-point-size);
150
+ height: var(--qti-point-size);
144
151
  background-color: transparent;
145
152
  padding: 0;
146
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
153
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
147
154
  outline: none;
148
155
  }
149
156
 
157
+ /* Apply .drag for draggable elements */
158
+
150
159
  .drag {
151
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
160
+
161
+ transition:
162
+ transform 200ms ease-out,
163
+ box-shadow 200ms ease-out,
164
+ rotate 200ms ease-out;
165
+ cursor: grab;
166
+ background-color: var(--qti-bg);
167
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
168
+ border-radius: var(--qti-border-radius);
169
+ 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(
170
+ circle at center,
171
+ rgb(0 0 0 / 10%) 0,
172
+ rgb(0 0 0 / 20%) 2px,
173
+ rgb(255 255 255 / 0%) 2px,
174
+ rgb(255 255 255 / 0%) 100%
175
+ ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
176
+ }
177
+
178
+ /* Apply .dragging for the dragging state of a draggable element */
179
+
180
+ .dragging {
181
+ pointer-events: none;
182
+ rotate: -2deg;
183
+ box-shadow:
184
+ 0 8px 12px rgb(0 0 0 / 20%),
185
+ 0 4px 8px rgb(0 0 0 / 10%);
186
+ }
187
+
188
+ /* Apply .drop for an element where you can drop the draggable */
189
+
190
+ .drop {
191
+
192
+ 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>')
193
+ center no-repeat;
194
+ border-radius: var(--qti-border-radius);
195
+ position: relative;
196
+ background-color: var(--qti-bg);
197
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
198
+ outline: none;
199
+ }
200
+
201
+ /* Apply .dropping for an indicator where you can drop the draggable */
202
+
203
+ .dropping {
204
+ background-color: var(--qti-bg-active);
205
+ }
206
+
207
+ /* Apply .order for a small circular button */
208
+
209
+ .order {
210
+
211
+ display: grid;
212
+ place-content: center;
213
+
214
+ /* background-color: var(--qti-bg-active); */
215
+ border-radius: 100%;
216
+ width: var(--qti-order-size);
217
+ height: var(--qti-order-size);
218
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
219
+ outline: none;
220
+ }
221
+
222
+ /* Apply .check-size for radio and checkbox size */
223
+
224
+ .check-size {
225
+ width: calc(var(--qti-form-size) - 6px);
226
+ height: calc(var(--qti-form-size) - 6px);
227
+ }
228
+
229
+ /* Apply .check for checkbox */
230
+
231
+ .check {
232
+ gap: 0.5rem;
233
+ border-radius: var(--qti-border-radius);
234
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
235
+ outline: none;
236
+ cursor: pointer;
237
+ }
238
+
239
+ /* Apply .check-radio for outer circle of the radio buttons */
240
+
241
+ .check-radio {
242
+
243
+ border-radius: 100%;
244
+
245
+ display: grid;
246
+
247
+ place-content: center;
248
+
249
+ width: var(--qti-form-size);
250
+
251
+ height: var(--qti-form-size);
252
+
253
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
254
+
255
+ outline: none;
256
+ }
257
+
258
+ /* Apply .check-radio-checked for the inner checked radio */
259
+
260
+ .check-radio-checked {
261
+ background-color: var(--qti-border-active);
262
+ border-radius: 100%;
263
+ }
264
+
265
+ /* Apply .check-checkbox for outer square of the checkbox */
266
+
267
+ .check-checkbox {
268
+
269
+ display: flex;
270
+ place-items: center;
271
+ border-radius: var(--qti-border-radius);
272
+ display: grid;
273
+ place-content: center;
274
+ width: var(--qti-form-size);
275
+ height: var(--qti-form-size);
276
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
152
277
  outline: none;
153
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
154
- border-radius: var(--qti-border-radius-md);
278
+ }
279
+
280
+ /* Apply .check-checkbox-checked for the inner checkmark */
281
+
282
+ .check-checkbox-checked {
283
+ background-color: var(--qti-border-active);
284
+ -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");
285
+ 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");
286
+ }
287
+
288
+ /* Apply .hov for hover state */
289
+
290
+ .hov {
291
+ background-color: var(--qti-hover-bg);
292
+ }
293
+
294
+ /* Apply .foc for focus state */
295
+
296
+ .foc {
297
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
298
+ }
299
+
300
+ /* Apply .act for active state */
301
+
302
+ .act {
303
+ border-color: var(--qti-border-active);
304
+ background-color: var(--qti-bg-active);
305
+ }
306
+
307
+ .act-bg {
308
+ background-color: var(--qti-bg-active);
309
+ }
310
+
311
+ .act-bor {
312
+ border-color: var(--qti-border-active);
313
+ }
314
+
315
+ /* Apply .rdo for readonly state */
316
+
317
+ .rdo {
318
+ cursor: pointer;
319
+ background-color: var(--qti-bg);
320
+ outline: 0;
321
+ border: none;
322
+ }
323
+
324
+ /* Apply .dis for disabled state */
325
+
326
+ .dis {
327
+ cursor: not-allowed;
328
+ background-color: var(--qti-disabled-bg);
329
+ color: var(--qti-disabled-color);
330
+ border-color: var(--qti-border-color);
331
+ outline: 4px solid var(--qti-disabled-bg);
332
+ }
333
+
334
+ /* base */
335
+
336
+ /* ============================
337
+ QTI 3 shared css
338
+ 1. Display
339
+ 2. Special Flex styles
340
+ 3. Margin
341
+ 4. Padding
342
+ 5. Horizontal Alignment styles
343
+ 6. Vertical Alignment styles
344
+ 7. Height
345
+ 8. Width
346
+ 9. Text-Indent
347
+ 10. List Style
348
+ 11. Layout
349
+ 12. Other QTI 3 presentation utilities
350
+ ============================ */
351
+
352
+ /* ==========
353
+ Display css
354
+ =========== */
355
+
356
+ .qti-display-inline {
357
+ display: inline;
358
+ }
359
+
360
+ .qti-display-inline-block {
361
+ display: inline-block;
362
+ }
363
+
364
+ .qti-display-block {
365
+ display: block;
366
+ }
367
+
368
+ .qti-display-flex {
369
+ display: flexbox;
370
+ display: flex;
371
+ }
372
+
373
+ .qti-display-inline-flex {
374
+ display: inline-flex;
375
+ }
376
+
377
+ .qti-display-grid {
378
+ display: grid;
379
+ }
380
+
381
+ .qti-display-inline-grid {
382
+ display: inline-grid;
383
+ }
384
+
385
+ .qti-display-table {
386
+ display: table;
387
+ }
388
+
389
+ .qti-display-table-cell {
390
+ display: table-cell;
391
+ }
392
+
393
+ .qti-display-table-row {
394
+ display: table-row;
395
+ }
396
+
397
+ .qti-display-list-item {
398
+ display: list-item;
399
+ }
400
+
401
+ .qti-display-inherit {
402
+ display: inherit;
403
+ }
404
+
405
+ /*
406
+ * hidden to screen readers and sighted
407
+ */
408
+
409
+ .qti-hidden {
410
+ display: none;
411
+ }
412
+
413
+ /*
414
+ * visible to screen readers, hidden to sighted
415
+ */
416
+
417
+ .qti-visually-hidden {
418
+ position: fixed !important;
419
+ overflow: hidden;
420
+ clip: rect(1px 1px 1px 1px);
421
+ height: 1px;
422
+ width: 1px;
423
+ border: 0;
424
+ margin: -1px;
425
+ }
426
+
427
+ /* =============================
428
+ Special flex styles
429
+ ============================= */
430
+
431
+ .qti-flex-direction-column {
432
+ flex-direction: column;
433
+ }
434
+
435
+ .qti-flex-direction-row {
436
+ flex-direction: row;
437
+ }
438
+
439
+ .qti-flex-grow-1 {
440
+ flex-grow: 1;
441
+ }
442
+
443
+ .qti-flex-grow-0 {
444
+ flex-grow: 0;
445
+ }
446
+
447
+ /* =========
448
+ Margin css
449
+ ========== */
450
+
451
+ /**
452
+ * For margin Top and Bottom and Left and Right
453
+ */
454
+
455
+ .qti-margin-0 {
456
+ margin: 0 !important;
457
+ }
458
+
459
+ .qti-margin-1 {
460
+ margin: 0.25rem !important;
461
+ }
462
+
463
+ .qti-margin-2 {
464
+ margin: 0.5rem !important;
465
+ }
466
+
467
+ .qti-margin-3 {
468
+ margin: 1rem !important;
469
+ }
470
+
471
+ .qti-margin-4 {
472
+ margin: 1.5rem !important;
473
+ }
474
+
475
+ .qti-margin-5 {
476
+ margin: 3rem !important;
477
+ }
478
+
479
+ .qti-margin-auto {
480
+ margin: auto !important;
481
+ }
482
+
483
+ /*
484
+ For margin Left and Right
485
+ */
486
+
487
+ .qti-margin-x-0 {
488
+ margin-right: 0 !important;
489
+ margin-left: 0 !important;
490
+ }
491
+
492
+ .qti-margin-x-1 {
493
+ margin-right: 0.25rem !important;
494
+ margin-left: 0.25rem !important;
495
+ }
496
+
497
+ .qti-margin-x-2 {
498
+ margin-right: 0.5rem !important;
499
+ margin-left: 0.5rem !important;
500
+ }
501
+
502
+ .qti-margin-x-3 {
503
+ margin-right: 1rem !important;
504
+ margin-left: 1rem !important;
505
+ }
506
+
507
+ .qti-margin-x-4 {
508
+ margin-right: 1.5rem !important;
509
+ margin-left: 1.5rem !important;
510
+ }
511
+
512
+ .qti-margin-x-5 {
513
+ margin-right: 3rem !important;
514
+ margin-left: 3rem !important;
515
+ }
516
+
517
+ .qti-margin-x-auto {
518
+ margin-right: auto !important;
519
+ margin-left: auto !important;
520
+ }
521
+
522
+ /*
523
+ For margin Top and Bottom
524
+ */
525
+
526
+ .qti-margin-y-0 {
527
+ margin-top: 0 !important;
528
+ margin-bottom: 0 !important;
529
+ }
530
+
531
+ .qti-margin-y-1 {
532
+ margin-top: 0.25rem !important;
533
+ margin-bottom: 0.25rem !important;
534
+ }
535
+
536
+ .qti-margin-y-2 {
537
+ margin-top: 0.5rem !important;
538
+ margin-bottom: 0.5rem !important;
539
+ }
540
+
541
+ .qti-margin-y-3 {
542
+ margin-top: 1rem !important;
543
+ margin-bottom: 1rem !important;
544
+ }
545
+
546
+ .qti-margin-y-4 {
547
+ margin-top: 1.5rem !important;
548
+ margin-bottom: 1.5rem !important;
549
+ }
550
+
551
+ .qti-margin-y-5 {
552
+ margin-top: 3rem !important;
553
+ margin-bottom: 3rem !important;
554
+ }
555
+
556
+ .qti-margin-y-auto {
557
+ margin-top: auto !important;
558
+ margin-bottom: auto !important;
559
+ }
560
+
561
+ /*
562
+ For margin Top
563
+ */
564
+
565
+ .qti-margin-t-0 {
566
+ margin-top: 0 !important;
567
+ }
568
+
569
+ .qti-margin-t-1 {
570
+ margin-top: 0.25rem !important;
571
+ }
572
+
573
+ .qti-margin-t-2 {
574
+ margin-top: 0.5rem !important;
575
+ }
576
+
577
+ .qti-margin-t-3 {
578
+ margin-top: 1rem !important;
579
+ }
580
+
581
+ .qti-margin-t-4 {
582
+ margin-top: 1.5rem !important;
583
+ }
584
+
585
+ .qti-margin-t-5 {
586
+ margin-top: 3rem !important;
587
+ }
588
+
589
+ .qti-margin-t-auto {
590
+ margin-top: auto !important;
591
+ }
592
+
593
+ /*
594
+ For margin Bottom
595
+ */
596
+
597
+ .qti-margin-b-0 {
598
+ margin-bottom: 0 !important;
599
+ }
600
+
601
+ .qti-margin-b-1 {
602
+ margin-bottom: 0.25rem !important;
603
+ }
604
+
605
+ .qti-margin-b-2 {
606
+ margin-bottom: 0.5rem !important;
607
+ }
608
+
609
+ .qti-margin-b-3 {
610
+ margin-bottom: 1rem !important;
611
+ }
612
+
613
+ .qti-margin-b-4 {
614
+ margin-bottom: 1.5rem !important;
615
+ }
616
+
617
+ .qti-margin-b-5 {
618
+ margin-bottom: 3rem !important;
619
+ }
620
+
621
+ .qti-margin-b-auto {
622
+ margin-bottom: auto !important;
623
+ }
624
+
625
+ /*
626
+ For margin Start LTR
627
+ */
628
+
629
+ .qti-margin-s-0 {
630
+ margin-left: 0 !important;
631
+ }
632
+
633
+ .qti-margin-s-1 {
634
+ margin-left: 0.25rem !important;
635
+ }
636
+
637
+ .qti-margin-s-2 {
638
+ margin-left: 0.5rem !important;
639
+ }
640
+
641
+ .qti-margin-s-3 {
642
+ margin-left: 1rem !important;
643
+ }
644
+
645
+ .qti-margin-s-4 {
646
+ margin-left: 1.5rem !important;
647
+ }
648
+
649
+ .qti-margin-s-5 {
650
+ margin-left: 3rem !important;
651
+ }
652
+
653
+ .qti-margin-s-auto {
654
+ margin-left: auto !important;
655
+ }
656
+
657
+ /*
658
+ For margin End LTR
659
+ */
660
+
661
+ .qti-margin-e-0 {
662
+ margin-right: 0 !important;
663
+ }
664
+
665
+ .qti-margin-e-1 {
666
+ margin-right: 0.25rem !important;
667
+ }
668
+
669
+ .qti-margin-e-2 {
670
+ margin-right: 0.5rem !important;
671
+ }
672
+
673
+ .qti-margin-e-3 {
674
+ margin-right: 1rem !important;
675
+ }
676
+
677
+ .qti-margin-e-4 {
678
+ margin-right: 1.5rem !important;
679
+ }
680
+
681
+ .qti-margin-e-5 {
682
+ margin-right: 3rem !important;
683
+ }
684
+
685
+ .qti-margin-e-auto {
686
+ margin-right: auto !important;
687
+ }
688
+
689
+ /* =========
690
+ Padding css
691
+ ========== */
692
+
693
+ /*
694
+ For padding Top and Bottom and Left and Right
695
+ */
696
+
697
+ .qti-padding-0 {
698
+ padding: 0 !important;
699
+ }
700
+
701
+ .qti-padding-1 {
702
+ padding: 0.25rem !important;
703
+ }
704
+
705
+ .qti-padding-2 {
706
+ padding: 0.5rem !important;
707
+ }
708
+
709
+ .qti-padding-3 {
710
+ padding: 1rem !important;
711
+ }
712
+
713
+ .qti-padding-4 {
714
+ padding: 1.5rem !important;
715
+ }
716
+
717
+ .qti-padding-5 {
718
+ padding: 3rem !important;
719
+ }
720
+
721
+ /*
722
+ For padding Left and Right
723
+ */
724
+
725
+ .qti-padding-x-0 {
726
+ padding-right: 0 !important;
727
+ padding-left: 0 !important;
728
+ }
729
+
730
+ .qti-padding-x-1 {
731
+ padding-right: 0.25rem !important;
732
+ padding-left: 0.25rem !important;
733
+ }
734
+
735
+ .qti-padding-x-2 {
736
+ padding-right: 0.5rem !important;
737
+ padding-left: 0.5rem !important;
738
+ }
739
+
740
+ .qti-padding-x-3 {
741
+ padding-right: 1rem !important;
742
+ padding-left: 1rem !important;
743
+ }
744
+
745
+ .qti-padding-x-4 {
746
+ padding-right: 1.5rem !important;
747
+ padding-left: 1.5rem !important;
748
+ }
749
+
750
+ .qti-padding-x-5 {
751
+ padding-right: 3rem !important;
752
+ padding-left: 3rem !important;
753
+ }
754
+
755
+ /*
756
+ For padding Top and Bottom
757
+ */
758
+
759
+ .qti-padding-y-0 {
760
+ padding-top: 0 !important;
761
+ padding-bottom: 0 !important;
762
+ }
763
+
764
+ .qti-padding-y-1 {
765
+ padding-top: 0.25rem !important;
766
+ padding-bottom: 0.25rem !important;
767
+ }
768
+
769
+ .qti-padding-y-2 {
770
+ padding-top: 0.5rem !important;
771
+ padding-bottom: 0.5rem !important;
772
+ }
773
+
774
+ .qti-padding-y-3 {
775
+ padding-top: 1rem !important;
776
+ padding-bottom: 1rem !important;
777
+ }
778
+
779
+ .qti-padding-y-4 {
780
+ padding-top: 1.5rem !important;
781
+ padding-bottom: 1.5rem !important;
782
+ }
783
+
784
+ .qti-padding-y-5 {
785
+ padding-top: 3rem !important;
786
+ padding-bottom: 3rem !important;
787
+ }
788
+
789
+ /*
790
+ For padding Top
791
+ */
792
+
793
+ .qti-padding-t-0 {
794
+ padding-top: 0 !important;
795
+ }
796
+
797
+ .qti-padding-t-1 {
798
+ padding-top: 0.25rem !important;
799
+ }
800
+
801
+ .qti-padding-t-2 {
802
+ padding-top: 0.5rem !important;
803
+ }
804
+
805
+ .qti-padding-t-3 {
806
+ padding-top: 1rem !important;
807
+ }
808
+
809
+ .qti-padding-t-4 {
810
+ padding-top: 1.5rem !important;
811
+ }
812
+
813
+ .qti-padding-t-5 {
814
+ padding-top: 3rem !important;
815
+ }
816
+
817
+ /*
818
+ For padding Bottom
819
+ */
820
+
821
+ .qti-padding-b-0 {
822
+ padding-bottom: 0 !important;
823
+ }
824
+
825
+ .qti-padding-b-1 {
826
+ padding-bottom: 0.25rem !important;
827
+ }
828
+
829
+ .qti-padding-b-2 {
830
+ padding-bottom: 0.5rem !important;
831
+ }
832
+
833
+ .qti-padding-b-3 {
834
+ padding-bottom: 1rem !important;
835
+ }
836
+
837
+ .qti-padding-b-4 {
838
+ padding-bottom: 1.5rem !important;
839
+ }
840
+
841
+ .qti-padding-b-5 {
842
+ padding-bottom: 3rem !important;
843
+ }
844
+
845
+ /*
846
+ For padding Start LTR
847
+ */
848
+
849
+ .qti-padding-s-0 {
850
+ padding-left: 0 !important;
851
+ }
852
+
853
+ .qti-padding-s-1 {
854
+ padding-left: 0.25rem !important;
855
+ }
856
+
857
+ .qti-padding-s-2 {
858
+ padding-left: 0.5rem !important;
859
+ }
860
+
861
+ .qti-padding-s-3 {
862
+ padding-left: 1rem !important;
863
+ }
864
+
865
+ .qti-padding-s-4 {
866
+ padding-left: 1.5rem !important;
867
+ }
868
+
869
+ .qti-padding-s-5 {
870
+ padding-left: 3rem !important;
871
+ }
872
+
873
+ /*
874
+ For padding End LTR
875
+ */
876
+
877
+ .qti-padding-e-0 {
878
+ padding-right: 0 !important;
879
+ }
880
+
881
+ .qti-padding-e-1 {
882
+ padding-right: 0.25rem !important;
883
+ }
884
+
885
+ .qti-padding-e-2 {
886
+ padding-right: 0.5rem !important;
887
+ }
888
+
889
+ .qti-padding-e-3 {
890
+ padding-right: 1rem !important;
891
+ }
892
+
893
+ .qti-padding-e-4 {
894
+ padding-right: 1.5rem !important;
895
+ }
896
+
897
+ .qti-padding-e-5 {
898
+ padding-right: 3rem !important;
899
+ }
900
+
901
+ /* ====================
902
+ Horizontal alignment
903
+ ==================== */
904
+
905
+ .qti-align-left {
906
+ text-align: left;
907
+ }
908
+
909
+ .qti-align-center {
910
+ text-align: center;
911
+ }
912
+
913
+ .qti-align-right {
914
+ text-align: right;
915
+ }
916
+
917
+ /* ==================
918
+ Vertical alignment
919
+ ================== */
920
+
921
+ .qti-valign-top {
922
+ vertical-align: top;
923
+ }
924
+
925
+ .qti-valign-middle {
926
+ vertical-align: middle;
927
+ }
928
+
929
+ .qti-valign-baseline {
930
+ vertical-align: baseline;
931
+ }
932
+
933
+ .qti-valign-bottom {
934
+ vertical-align: bottom;
935
+ }
936
+
937
+ /* =============
938
+ Height styles
939
+ ============= */
940
+
941
+ .qti-height-0 {
942
+ height: 0;
943
+ }
944
+
945
+ .qti-height-px {
946
+ height: 1px;
947
+ }
948
+
949
+ .qti-height-0p5 {
950
+ height: 0.125rem;
951
+ }
952
+
953
+ .qti-height-1 {
954
+ height: 0.25rem;
955
+ }
956
+
957
+ .qti-height-1p5 {
958
+ height: 0.375rem;
959
+ }
960
+
961
+ .qti-height-2 {
962
+ height: 0.5rem;
963
+ }
964
+
965
+ .qti-height-2p5 {
966
+ height: 0.625rem;
967
+ }
968
+
969
+ .qti-height-3 {
970
+ height: 0.75rem;
971
+ }
972
+
973
+ .qti-height-3p5 {
974
+ height: 0.875rem;
975
+ }
976
+
977
+ .qti-height-4 {
978
+ height: 1rem;
979
+ }
980
+
981
+ .qti-height-5 {
982
+ height: 1.25rem;
983
+ }
984
+
985
+ .qti-height-6 {
986
+ height: 1.5rem;
987
+ }
988
+
989
+ .qti-height-7 {
990
+ height: 1.75rem;
991
+ }
992
+
993
+ .qti-height-8 {
994
+ height: 2rem;
995
+ }
996
+
997
+ .qti-height-9 {
998
+ height: 2.25rem;
999
+ }
1000
+
1001
+ .qti-height-10 {
1002
+ height: 2.5rem;
1003
+ }
1004
+
1005
+ .qti-height-11 {
1006
+ height: 2.75rem;
1007
+ }
1008
+
1009
+ .qti-height-12 {
1010
+ height: 3rem;
1011
+ }
1012
+
1013
+ .qti-height-14 {
1014
+ height: 3.5rem;
1015
+ }
1016
+
1017
+ .qti-height-16 {
1018
+ height: 4rem;
1019
+ }
1020
+
1021
+ .qti-height-20 {
1022
+ height: 5rem;
1023
+ }
1024
+
1025
+ .qti-height-24 {
1026
+ height: 6rem;
1027
+ }
1028
+
1029
+ .qti-height-28 {
1030
+ height: 7rem;
1031
+ }
1032
+
1033
+ .qti-height-32 {
1034
+ height: 8rem;
1035
+ }
1036
+
1037
+ .qti-height-36 {
1038
+ height: 9rem;
1039
+ }
1040
+
1041
+ .qti-height-40 {
1042
+ height: 10rem;
1043
+ }
1044
+
1045
+ .qti-height-44 {
1046
+ height: 11rem;
1047
+ }
1048
+
1049
+ .qti-height-48 {
1050
+ height: 12rem;
1051
+ }
1052
+
1053
+ .qti-height-52 {
1054
+ height: 13rem;
1055
+ }
1056
+
1057
+ .qti-height-56 {
1058
+ height: 14rem;
1059
+ }
1060
+
1061
+ .qti-height-60 {
1062
+ height: 15rem;
1063
+ }
1064
+
1065
+ .qti-height-64 {
1066
+ height: 16rem;
1067
+ }
1068
+
1069
+ .qti-height-72 {
1070
+ height: 18rem;
1071
+ }
1072
+
1073
+ .qti-height-80 {
1074
+ height: 20rem;
1075
+ }
1076
+
1077
+ .qti-height-96 {
1078
+ height: 24rem;
1079
+ }
1080
+
1081
+ .qti-height-1-2 {
1082
+ height: 50%;
1083
+ }
1084
+
1085
+ .qti-height-1-3 {
1086
+ height: 33.3333%;
1087
+ }
1088
+
1089
+ .qti-height-2-3 {
1090
+ height: 66.6667%;
1091
+ }
1092
+
1093
+ .qti-height-1-4 {
1094
+ height: 25%;
1095
+ }
1096
+
1097
+ .qti-height-2-4 {
1098
+ height: 50%;
1099
+ }
1100
+
1101
+ .qti-height-3-4 {
1102
+ height: 75%;
1103
+ }
1104
+
1105
+ .qti-height-1-5 {
1106
+ height: 20%;
1107
+ }
1108
+
1109
+ .qti-height-2-5 {
1110
+ height: 40%;
1111
+ }
1112
+
1113
+ .qti-height-3-5 {
1114
+ height: 60%;
1115
+ }
1116
+
1117
+ .qti-height-4-5 {
1118
+ height: 80%;
1119
+ }
1120
+
1121
+ .qti-height-1-6 {
1122
+ height: 16.6667%;
1123
+ }
1124
+
1125
+ .qti-height-2-6 {
1126
+ height: 33.3333%;
1127
+ }
1128
+
1129
+ .qti-height-3-6 {
1130
+ height: 50%;
1131
+ }
1132
+
1133
+ .qti-height-4-6 {
1134
+ height: 66.6667%;
1135
+ }
1136
+
1137
+ .qti-height-5-6 {
1138
+ height: 83.3333%;
1139
+ }
1140
+
1141
+ .qti-height-auto {
1142
+ height: auto;
1143
+ }
1144
+
1145
+ .qti-height-full {
1146
+ height: 100%;
1147
+ }
1148
+
1149
+ /* ============
1150
+ Width styles
1151
+ ============ */
1152
+
1153
+ .qti-width-0 {
1154
+ width: 0;
1155
+ }
1156
+
1157
+ .qti-width-px {
1158
+ width: 1px;
1159
+ }
1160
+
1161
+ .qti-width-0p5 {
1162
+ width: 0.125rem;
1163
+ }
1164
+
1165
+ .qti-width-1 {
1166
+ width: 0.25rem;
1167
+ }
1168
+
1169
+ .qti-width-1p5 {
1170
+ width: 0.375rem;
1171
+ }
1172
+
1173
+ .qti-width-2 {
1174
+ width: 0.5rem;
1175
+ }
1176
+
1177
+ .qti-width-2p5 {
1178
+ width: 0.625rem;
1179
+ }
1180
+
1181
+ .qti-width-3 {
1182
+ width: 0.75rem;
1183
+ }
1184
+
1185
+ .qti-width-3p5 {
1186
+ width: 0.875rem;
1187
+ }
1188
+
1189
+ .qti-width-4 {
1190
+ width: 1rem;
1191
+ }
1192
+
1193
+ .qti-width-5 {
1194
+ width: 1.25rem;
1195
+ }
1196
+
1197
+ .qti-width-6 {
1198
+ width: 1.5rem;
1199
+ }
1200
+
1201
+ .qti-width-7 {
1202
+ width: 1.75rem;
1203
+ }
1204
+
1205
+ .qti-width-8 {
1206
+ width: 2rem;
1207
+ }
1208
+
1209
+ .qti-width-9 {
1210
+ width: 2.25rem;
1211
+ }
1212
+
1213
+ .qti-width-10 {
1214
+ width: 2.5rem;
1215
+ }
1216
+
1217
+ .qti-width-11 {
1218
+ width: 2.75rem;
1219
+ }
1220
+
1221
+ .qti-width-12 {
1222
+ width: 3rem;
1223
+ }
1224
+
1225
+ .qti-width-14 {
1226
+ width: 3.5rem;
1227
+ }
1228
+
1229
+ .qti-width-16 {
1230
+ width: 4rem;
1231
+ }
1232
+
1233
+ .qti-width-20 {
1234
+ width: 5rem;
1235
+ }
1236
+
1237
+ .qti-width-24 {
1238
+ width: 6rem;
1239
+ }
1240
+
1241
+ .qti-width-28 {
1242
+ width: 7rem;
1243
+ }
1244
+
1245
+ .qti-width-32 {
1246
+ width: 8rem;
1247
+ }
1248
+
1249
+ .qti-width-36 {
1250
+ width: 9rem;
1251
+ }
1252
+
1253
+ .qti-width-40 {
1254
+ width: 10rem;
1255
+ }
1256
+
1257
+ .qti-width-44 {
1258
+ width: 11rem;
1259
+ }
1260
+
1261
+ .qti-width-48 {
1262
+ width: 12rem;
1263
+ }
1264
+
1265
+ .qti-width-52 {
1266
+ width: 13rem;
1267
+ }
1268
+
1269
+ .qti-width-56 {
1270
+ width: 14rem;
1271
+ }
1272
+
1273
+ .qti-width-60 {
1274
+ width: 15rem;
1275
+ }
1276
+
1277
+ .qti-width-64 {
1278
+ width: 16rem;
1279
+ }
1280
+
1281
+ .qti-width-72 {
1282
+ width: 18rem;
1283
+ }
1284
+
1285
+ .qti-width-80 {
1286
+ width: 20rem;
1287
+ }
1288
+
1289
+ .qti-width-96 {
1290
+ width: 24rem;
1291
+ }
1292
+
1293
+ .qti-width-auto {
1294
+ width: auto;
1295
+ }
1296
+
1297
+ .qti-width-1-2 {
1298
+ width: 50%;
1299
+ }
1300
+
1301
+ .qti-width-1-3 {
1302
+ width: 33.3333%;
1303
+ }
1304
+
1305
+ .qti-width-2-3 {
1306
+ width: 66.6667%;
1307
+ }
1308
+
1309
+ .qti-width-1-4 {
1310
+ width: 25%;
1311
+ }
1312
+
1313
+ .qti-width-2-4 {
1314
+ width: 50%;
1315
+ }
1316
+
1317
+ .qti-width-3-4 {
1318
+ width: 75%;
1319
+ }
1320
+
1321
+ .qti-width-1-5 {
1322
+ width: 20%;
1323
+ }
1324
+
1325
+ .qti-width-2-5 {
1326
+ width: 40%;
1327
+ }
1328
+
1329
+ .qti-width-3-5 {
1330
+ width: 60%;
1331
+ }
1332
+
1333
+ .qti-width-4-5 {
1334
+ width: 80%;
1335
+ }
1336
+
1337
+ .qti-width-1-6 {
1338
+ width: 16.6667%;
1339
+ }
1340
+
1341
+ .qti-width-2-6 {
1342
+ width: 33.3333%;
1343
+ }
1344
+
1345
+ .qti-width-3-6 {
1346
+ width: 50%;
1347
+ }
1348
+
1349
+ .qti-width-4-6 {
1350
+ width: 66.6667%;
1351
+ }
1352
+
1353
+ .qti-width-5-6 {
1354
+ width: 83.3333%;
1355
+ }
1356
+
1357
+ .qti-width-1-12 {
1358
+ width: 8.3333%;
1359
+ }
1360
+
1361
+ .qti-width-2-12 {
1362
+ width: 16.6667%;
1363
+ }
1364
+
1365
+ .qti-width-3-12 {
1366
+ width: 25%;
1367
+ }
1368
+
1369
+ .qti-width-4-12 {
1370
+ width: 33.3333%;
1371
+ }
1372
+
1373
+ .qti-width-5-12 {
1374
+ width: 41.6667%;
1375
+ }
1376
+
1377
+ .qti-width-6-12 {
1378
+ width: 50%;
1379
+ }
1380
+
1381
+ .qti-width-7-12 {
1382
+ width: 58.3333%;
1383
+ }
1384
+
1385
+ .qti-width-8-12 {
1386
+ width: 66.6667%;
1387
+ }
1388
+
1389
+ .qti-width-9-12 {
1390
+ width: 75%;
1391
+ }
1392
+
1393
+ .qti-width-10-12 {
1394
+ width: 83.3333%;
1395
+ }
1396
+
1397
+ .qti-width-11-12 {
1398
+ width: 91.6667%;
1399
+ }
1400
+
1401
+ .qti-width-full,
1402
+ .qti-fullwidth {
1403
+ width: 100%;
1404
+ }
1405
+
1406
+ /* ==================
1407
+ Text Indent styles
1408
+ ================== */
1409
+
1410
+ .qti-text-indent-0 {
1411
+ text-indent: 0;
1412
+ }
1413
+
1414
+ .qti-text-indent-px {
1415
+ text-indent: 1px;
1416
+ }
1417
+
1418
+ .qti-text-indent-0p5 {
1419
+ text-indent: 0.125rem;
1420
+ }
1421
+
1422
+ .qti-text-indent-1 {
1423
+ text-indent: 0.25rem;
1424
+ }
1425
+
1426
+ .qti-text-indent-1p5 {
1427
+ text-indent: 0.375rem;
1428
+ }
1429
+
1430
+ .qti-text-indent-2 {
1431
+ text-indent: 0.5rem;
1432
+ }
1433
+
1434
+ .qti-text-indent-2p5 {
1435
+ text-indent: 0.625rem;
1436
+ }
1437
+
1438
+ .qti-text-indent-3 {
1439
+ text-indent: 0.75rem;
1440
+ }
1441
+
1442
+ .qti-text-indent-3p5 {
1443
+ text-indent: 0.875rem;
1444
+ }
1445
+
1446
+ .qti-text-indent-4 {
1447
+ text-indent: 1rem;
1448
+ }
1449
+
1450
+ .qti-text-indent-5 {
1451
+ text-indent: 1.25rem;
1452
+ }
1453
+
1454
+ .qti-text-indent-6 {
1455
+ text-indent: 1.5rem;
1456
+ }
1457
+
1458
+ .qti-text-indent-7 {
1459
+ text-indent: 1.75rem;
1460
+ }
1461
+
1462
+ .qti-text-indent-8 {
1463
+ text-indent: 2rem;
1464
+ }
1465
+
1466
+ .qti-text-indent-12 {
1467
+ text-indent: 3rem;
1468
+ }
1469
+
1470
+ .qti-text-indent-16 {
1471
+ text-indent: 4rem;
1472
+ }
1473
+
1474
+ .qti-text-indent-20 {
1475
+ text-indent: 5rem;
1476
+ }
1477
+
1478
+ .qti-text-indent-24 {
1479
+ text-indent: 6rem;
1480
+ }
1481
+
1482
+ .qti-text-indent-28 {
1483
+ text-indent: 7rem;
1484
+ }
1485
+
1486
+ .qti-text-indent-32 {
1487
+ text-indent: 8rem;
1488
+ }
1489
+
1490
+ /* =================
1491
+ List Style styles
1492
+ ================= */
1493
+
1494
+ .qti-list-style-type-none {
1495
+ list-style-type: none;
1496
+ }
1497
+
1498
+ .qti-list-style-type-disc {
1499
+ list-style-type: disc;
1500
+ }
1501
+
1502
+ .qti-list-style-type-circle {
1503
+ list-style-type: circle;
1504
+ }
1505
+
1506
+ .qti-list-style-type-square {
1507
+ list-style-type: square;
1508
+ }
1509
+
1510
+ .qti-list-style-type-decimal {
1511
+ list-style-type: decimal;
1512
+ }
1513
+
1514
+ .qti-list-style-type-decimal-leading-zero {
1515
+ list-style-type: decimal-leading-zero;
1516
+ }
1517
+
1518
+ .qti-list-style-type-lower-alpha {
1519
+ list-style-type: lower-alpha;
1520
+ }
1521
+
1522
+ .qti-list-style-type-upper-alpha {
1523
+ list-style-type: upper-alpha;
1524
+ }
1525
+
1526
+ .qti-list-style-type-lower-roman {
1527
+ list-style-type: lower-roman;
1528
+ }
1529
+
1530
+ .qti-list-style-type-upper-roman {
1531
+ list-style-type: upper-roman;
1532
+ }
1533
+
1534
+ .qti-list-style-type-lower-latin {
1535
+ list-style-type: lower-latin;
1536
+ }
1537
+
1538
+ .qti-list-style-type-upper-latin {
1539
+ list-style-type: upper-latin;
1540
+ }
1541
+
1542
+ .qti-list-style-type-lower-greek {
1543
+ list-style-type: lower-greek;
1544
+ }
1545
+
1546
+ .qti-list-style-type-arabic-indic {
1547
+ list-style-type: arabic-indic;
1548
+ }
1549
+
1550
+ .qti-list-style-type-armenian {
1551
+ list-style-type: armenian;
1552
+ }
1553
+
1554
+ .qti-list-style-type-lower-armenian {
1555
+ list-style-type: lower-armenian;
1556
+ }
1557
+
1558
+ .qti-list-style-type-upper-armenian {
1559
+ list-style-type: upper-armenian;
1560
+ }
1561
+
1562
+ .qti-list-style-type-bengali {
1563
+ list-style-type: bengali;
1564
+ }
1565
+
1566
+ .qti-list-style-type-cambodian {
1567
+ list-style-type: cambodian;
1568
+ }
1569
+
1570
+ .qti-list-style-type-simp-chinese-formal {
1571
+ list-style-type: simp-chinese-formal;
1572
+ }
1573
+
1574
+ .qti-list-style-type-simp-chinese-informal {
1575
+ list-style-type: simp-chinese-informal;
1576
+ }
1577
+
1578
+ .qti-list-style-type-trad-chinese-formal {
1579
+ list-style-type: trad-chinese-formal;
1580
+ }
1581
+
1582
+ .qti-list-style-type-trad-chinese-informal {
1583
+ list-style-type: trad-chinese-informal;
1584
+ }
1585
+
1586
+ .qti-list-style-type-cjk-ideographic {
1587
+ list-style-type: cjk-ideographic;
1588
+ }
1589
+
1590
+ .qti-list-style-type-cjk-heavenly-stem {
1591
+ list-style-type: cjk-heavenly-stem;
1592
+ }
1593
+
1594
+ .qti-list-style-type-cjk-earthly-branch {
1595
+ list-style-type: cjk-earthly-branch;
1596
+ }
1597
+
1598
+ .qti-list-style-type-devanagari {
1599
+ list-style-type: devanagari;
1600
+ }
1601
+
1602
+ .qti-list-style-type-ethiopic-halehame-ti-er {
1603
+ list-style-type: ethiopic-halehame-ti-er;
1604
+ }
1605
+
1606
+ .qti-list-style-type-ethiopic-halehame-ti-et {
1607
+ list-style-type: ethiopic-halehame-ti-et;
1608
+ }
1609
+
1610
+ .qti-list-style-type-ethiopic-halehame-am {
1611
+ list-style-type: ethiopic-halehame-am;
1612
+ }
1613
+
1614
+ .qti-list-style-type-ethiopic-halehame {
1615
+ list-style-type: ethiopic-halehame;
1616
+ }
1617
+
1618
+ .qti-list-style-type-georgian {
1619
+ list-style-type: georgian;
1620
+ }
1621
+
1622
+ .qti-list-style-type-gujarati {
1623
+ list-style-type: gujarati;
1624
+ }
1625
+
1626
+ .qti-list-style-type-gurmukhi {
1627
+ list-style-type: gurmukhi;
1628
+ }
1629
+
1630
+ .qti-list-style-type-hangul {
1631
+ list-style-type: hangul;
1632
+ }
1633
+
1634
+ .qti-list-style-type-hangul-consonant {
1635
+ list-style-type: hangul-consonant;
1636
+ }
1637
+
1638
+ .qti-list-style-type-hebrew {
1639
+ list-style-type: hebrew;
1640
+ }
1641
+
1642
+ .qti-list-style-type-hiragana {
1643
+ list-style-type: hiragana;
1644
+ }
1645
+
1646
+ .qti-list-style-type-hiragana-iroha {
1647
+ list-style-type: hiragana-iroha;
1648
+ }
1649
+
1650
+ .qti-list-style-type-khmer {
1651
+ list-style-type: khmer;
1652
+ }
1653
+
1654
+ .qti-list-style-type-korean-hangul-formal {
1655
+ list-style-type: korean-hangul-formal;
1656
+ }
1657
+
1658
+ .qti-list-style-type-korean-hanja-formal {
1659
+ list-style-type: korean-hanja-formal;
1660
+ }
1661
+
1662
+ .qti-list-style-type-korean-hanja-informal {
1663
+ list-style-type: korean-hanja-informal;
1664
+ }
1665
+
1666
+ .qti-list-style-type-lao {
1667
+ list-style-type: lao;
1668
+ }
1669
+
1670
+ .qti-list-style-type-malayalam {
1671
+ list-style-type: malayalam;
1672
+ }
1673
+
1674
+ .qti-list-style-type-mongolian {
1675
+ list-style-type: mongolian;
1676
+ }
1677
+
1678
+ .qti-list-style-type-myanmar {
1679
+ list-style-type: myanmar;
1680
+ }
1681
+
1682
+ .qti-list-style-type-oriya {
1683
+ list-style-type: oriya;
1684
+ }
1685
+
1686
+ .qti-list-style-type-persian {
1687
+ list-style-type: persian;
1688
+ }
1689
+
1690
+ .qti-list-style-type-thai {
1691
+ list-style-type: thai;
1692
+ }
1693
+
1694
+ .qti-list-style-type-tibetan {
1695
+ list-style-type: tibetan;
1696
+ }
155
1697
 
156
- cursor: grab;
157
- background-color: white;
158
- font-weight: var(--qti-font-weight-semibold);
159
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
160
- outline: none;
161
- background-image: radial-gradient(
162
- circle at center,
163
- rgba(0, 0, 0, 0.1) 0,
164
- rgb(0, 0, 0, 0.1) 2px,
165
- white 2px,
166
- white 100%
167
- );
168
- background-repeat: repeat-y;
169
- background-position: left 2px;
170
- background-size: 14px 8px;
1698
+ .qti-list-style-type-telugu {
1699
+ list-style-type: telugu;
171
1700
  }
172
1701
 
173
- .drop {
174
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
175
- outline: none;
176
- border-radius: var(--qti-border-radius-lg);
177
- position: relative;
178
- background-color: var(--qti-bg-gray-50);
179
- margin: 1px; /* m-px */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray); outline: none;
1702
+ .qti-list-style-type-urdu {
1703
+ list-style-type: urdu;
180
1704
  }
181
1705
 
182
- .order {
183
- background-color: var(--qti-bg-primary);
184
- border-radius: var(--qti-border-radius-full);
185
- width: 1.5rem; /* w-6 */
186
- height: 1.5rem;
187
- color: var(--qti-text-white);
1706
+ /* =========================
1707
+ Other QTI 3 Presentation Utilities
1708
+ ========================= */
1709
+
1710
+ .qti-bordered {
1711
+ border: 1px solid var(--table-border-color);
188
1712
  }
189
1713
 
190
- .check-size {
191
- width: calc(var(--qti-form-size) - 4px);
192
- height: calc(var(--qti-form-size) - 4px);
1714
+ .qti-underline {
1715
+ text-decoration: underline;
1716
+ text-decoration-color: var(--foreground);
193
1717
  }
194
1718
 
195
- .check {
196
- /* display: flex; */
197
- /* align-items: center; */
198
- gap: 0.5rem;
199
- padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
200
- outline: none;
201
- border-radius: var(--qti-border-radius-md);
202
- cursor: pointer;
1719
+ .qti-italic {
1720
+ font-style: italic;
203
1721
  }
204
1722
 
205
- .check-radio {
206
- border-radius: var(--qti-border-radius-full);
207
- width: var(--qti-form-size);
208
- height: var(--qti-form-size);
209
- align-self: 1;
210
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
211
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
212
- outline: none;
1723
+ .qti-well {
1724
+ min-height: 20px;
1725
+ padding: 19px;
1726
+ margin-bottom: 20px;
1727
+ background-color: var(--well-bg);
1728
+ border: var(--well-border);
1729
+ border-radius: 4px;
1730
+ box-shadow: var(--well-box-shadow);
213
1731
  }
214
1732
 
215
- .check-radio-checked {
216
- background-color: var(--qti-bg-primary);
217
- border-radius: var(--qti-border-radius-full);
1733
+ /* Set writing-mode to vertical-rl
1734
+ Typical for CJK vertical text */
1735
+
1736
+ .qti-writing-mode-vertical-rl {
1737
+ writing-mode: vertical-rl;
218
1738
  }
219
1739
 
220
- .check-checkbox {
221
- border-radius: var(--qti-border-radius-md);
222
- width: var(--qti-form-size);
223
- height: var(--qti-form-size);
224
- align-self: 1;
225
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
226
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
227
- outline: none;
1740
+ /* Set writing-mode to vertical-lr
1741
+ Typical for Mongolian vertical text */
1742
+
1743
+ .qti-writing-mode-vertical-lr {
1744
+ writing-mode: vertical-lr;
228
1745
  }
229
1746
 
230
- .check-checkbox-checked {
231
- background-color: var(--qti-bg-primary);
232
- -webkit-mask-image: var(--check-mask);
233
- mask-image: var(--check-mask); /* 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");
1747
+ /* Set writing-mode to horizontal-tb
1748
+ Browser default */
1749
+
1750
+ .qti-writing-mode-horizontal-tb {
1751
+ writing-mode: horizontal-tb;
234
1752
  }
235
1753
 
236
- .hov {
237
- background-color: var(--qti-bg-gray-50);
1754
+ /* Float an element left */
1755
+
1756
+ .qti-float-left {
1757
+ float: left;
238
1758
  }
239
1759
 
240
- .foc {
241
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1760
+ /* Float an element right */
1761
+
1762
+ .qti-float-right {
1763
+ float: right;
242
1764
  }
243
1765
 
244
- .act {
245
- border-color: var(--qti-bg-primary); /* border-primary */
1766
+ /* Remove a float */
1767
+
1768
+ .qti-float-none {
1769
+ float: none;
246
1770
  }
247
1771
 
248
- .rdo {
249
- cursor: pointer;
250
- background-color: white;
251
- outline: 0;
252
- border: none;
1772
+ /* Clearfix Hack to apply to a container of
1773
+ floated content that overflows the container. */
1774
+
1775
+ .qti-float-clearfix::after {
1776
+ content: '';
1777
+ clear: both;
1778
+ display: table;
253
1779
  }
254
1780
 
255
- .dis {
256
- cursor: not-allowed;
257
- background-color: var(--qti-bg-gray-100);
258
- color: var(--qti-text-gray-500);
259
- border-color: var(--qti-border-color-gray);
1781
+ .qti-float-clear-left
1782
+ .qti-float-clear-right
1783
+ .qti-float-clear-both
1784
+
1785
+ /* Set text-orientation to upright */
1786
+ .qti-text-orientation-upright {
1787
+ text-orientation: upright;
260
1788
  }
261
1789
 
262
- /* base */
1790
+ /* stylelint-disable number-max-precision */
263
1791
 
264
1792
  @layer qti-base {
265
1793
  .qti-layout-row {
@@ -269,43 +1797,59 @@
269
1797
  gap: 2.1276595745%;
270
1798
  }
271
1799
 
272
- .qti-layout-row [class*='qti-layout-col'] {
1800
+ .qti-layout-row [class*='qti-layout-col']:not(:empty) {
273
1801
  box-sizing: border-box;
274
1802
  }
275
1803
 
1804
+ .qti-layout-row [class*='qti-layout-col']:empty {
1805
+ width: 0;
1806
+ overflow: hidden; /* to fully collapse if there’s padding or borders */
1807
+ }
1808
+
276
1809
  .qti-layout-col1 {
277
1810
  width: 6.3829787234%;
278
1811
  }
1812
+
279
1813
  .qti-layout-col2 {
280
1814
  width: 14.8936170213%;
281
1815
  }
1816
+
282
1817
  .qti-layout-col3 {
283
1818
  width: 23.4042553191%;
284
1819
  }
1820
+
285
1821
  .qti-layout-col4 {
286
1822
  width: 31.914893617%;
287
1823
  }
1824
+
288
1825
  .qti-layout-col5 {
289
1826
  width: 40.4255319149%;
290
1827
  }
1828
+
291
1829
  .qti-layout-col6 {
292
1830
  width: 48.9361702128%;
293
1831
  }
1832
+
294
1833
  .qti-layout-col7 {
295
1834
  width: 57.4468085106%;
296
1835
  }
1836
+
297
1837
  .qti-layout-col8 {
298
1838
  width: 65.9574468085%;
299
1839
  }
1840
+
300
1841
  .qti-layout-col9 {
301
1842
  width: 74.4680851064%;
302
1843
  }
1844
+
303
1845
  .qti-layout-col10 {
304
1846
  width: 82.9787234043%;
305
1847
  }
1848
+
306
1849
  .qti-layout-col11 {
307
1850
  width: 91.4893617021%;
308
1851
  }
1852
+
309
1853
  .qti-layout-col12 {
310
1854
  width: 100%;
311
1855
  }
@@ -313,41 +1857,52 @@
313
1857
  .qti-layout-offset1 {
314
1858
  margin-left: 8.5106382979%;
315
1859
  }
1860
+
316
1861
  .qti-layout-offset2 {
317
1862
  margin-left: 17.0212765957%;
318
1863
  }
1864
+
319
1865
  .qti-layout-offset3 {
320
1866
  margin-left: 25.5319148936%;
321
1867
  }
1868
+
322
1869
  .qti-layout-offset4 {
323
1870
  margin-left: 34.0425531915%;
324
1871
  }
1872
+
325
1873
  .qti-layout-offset5 {
326
1874
  margin-left: 42.5531914894%;
327
1875
  }
1876
+
328
1877
  .qti-layout-offset6 {
329
1878
  margin-left: 51.0638297872%;
330
1879
  }
1880
+
331
1881
  .qti-layout-offset7 {
332
1882
  margin-left: 59.5744680851%;
333
1883
  }
1884
+
334
1885
  .qti-layout-offset8 {
335
1886
  margin-left: 68.085106383%;
336
1887
  }
1888
+
337
1889
  .qti-layout-offset9 {
338
1890
  margin-left: 76.5957446809%;
339
1891
  }
1892
+
340
1893
  .qti-layout-offset10 {
341
1894
  margin-left: 85.1063829787%;
342
1895
  }
1896
+
343
1897
  .qti-layout-offset11 {
344
1898
  margin-left: 93.6170212766%;
345
1899
  }
1900
+
346
1901
  .qti-layout-offset12 {
347
1902
  margin-left: 102.1276595745%;
348
1903
  }
349
1904
 
350
- @media (max-width: 767px) {
1905
+ @media (width <= 767px) {
351
1906
  [class*='qti-layout-col'] {
352
1907
  width: 100%;
353
1908
  }
@@ -369,131 +1924,153 @@ qti-response-declaration {
369
1924
  }
370
1925
 
371
1926
  *,
372
- *:before,
373
- *:after {
1927
+ *::before,
1928
+ *::after {
374
1929
  box-sizing: inherit;
375
1930
  }
376
1931
 
377
- [popover] {
378
- position: fixed;
379
- inset: 0;
380
- margin: auto;
381
- border: solid;
382
- padding: 0.25em;
383
- overflow: auto;
384
- color: CanvasText;
385
- background-color: Canvas;
386
- }
387
-
388
- [popovertarget] {
389
- all: unset;
390
- cursor: pointer;
391
- }
392
-
393
1932
  /* components */
394
1933
 
395
1934
  @layer qti-components {
396
1935
  qti-choice-interaction {
397
1936
  &.qti-input-control-hidden {
398
1937
  & qti-simple-choice {
1938
+
399
1939
  &:hover {
400
- background-color: var(--qti-bg-gray-50);
1940
+ background-color: var(--qti-hover-bg);
401
1941
  }
1942
+
402
1943
  &:focus {
403
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1944
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
404
1945
  }
1946
+
405
1947
  &::part(ch) {
406
1948
  display: none;
407
1949
  }
1950
+
1951
+ &:state(--checked),
408
1952
  &[aria-checked='true'] {
409
- border-color: var(--qti-bg-primary);
1953
+ border-color: var(--qti-border-active);
1954
+ background-color: var(--qti-bg-active);
410
1955
  }
1956
+
1957
+ &:state(readonly),
411
1958
  &[aria-readonly='true'] {
412
1959
  cursor: pointer;
413
- background-color: white;
1960
+ background-color: var(--qti-bg);
414
1961
  outline: 0;
415
1962
  border: none;
416
1963
  }
1964
+
1965
+ &:state(disabled),
417
1966
  &[aria-disabled='true'] {
418
1967
  cursor: not-allowed;
419
- background-color: var(--qti-bg-gray-100);
420
- color: var(--qti-text-gray-500);
421
- border-color: var(--qti-border-color-gray);
1968
+ background-color: var(--qti-disabled-bg);
1969
+ color: var(--qti-disabled-color);
1970
+ border-color: var(--qti-border-color);
1971
+ outline: 4px solid var(--qti-disabled-bg);
422
1972
  }
423
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
424
- outline: none;
425
- border-radius: var(--qti-border-radius-md);
426
- padding: var(--qti-padding-sm) var(--qti-padding-md);
427
- font-weight: var(--qti-font-weight-semibold);
428
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1973
+
1974
+ border-radius: var(--qti-border-radius);
1975
+
1976
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1977
+
1978
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1979
+
429
1980
  outline: none
430
1981
  }
431
1982
  }
1983
+
432
1984
  &:not(.qti-input-control-hidden) {
433
1985
  & qti-simple-choice {
434
- &:hover {
435
- background-color: var(--qti-bg-gray-50);
1986
+
1987
+ &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
1988
+ background-color: var(--qti-hover-bg);
436
1989
  }
1990
+
437
1991
  &:focus {
438
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1992
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
439
1993
  }
1994
+
1995
+ &:state(--checked),
440
1996
  &[aria-checked='true'] {
441
- border-color: var(--qti-bg-primary);
1997
+ border-color: var(--qti-border-active);
1998
+ background-color: var(--qti-bg-active);
442
1999
  }
2000
+
2001
+ &:state(readonly),
443
2002
  &[aria-readonly='true'] {
444
2003
  cursor: pointer;
445
- background-color: white;
2004
+ background-color: var(--qti-bg);
446
2005
  outline: 0;
447
2006
  border: none;
448
2007
  }
2008
+
2009
+ &:state(disabled),
449
2010
  &[aria-disabled='true'] {
450
2011
  cursor: not-allowed;
451
- background-color: var(--qti-bg-gray-100);
452
- color: var(--qti-text-gray-500);
453
- border-color: var(--qti-border-color-gray);
2012
+ background-color: var(--qti-disabled-bg);
2013
+ color: var(--qti-disabled-color);
2014
+ border-color: var(--qti-border-color);
2015
+ outline: 4px solid var(--qti-disabled-bg);
454
2016
  }
455
2017
 
456
2018
  &::part(cha) {
457
- width: calc(var(--qti-form-size) - 4px);
458
- height: calc(var(--qti-form-size) - 4px);
2019
+ width: calc(var(--qti-form-size) - 6px);
2020
+ height: calc(var(--qti-form-size) - 6px);
459
2021
  }
460
- &[role='radio']::part(ch) {
461
- border-radius: var(--qti-border-radius-full);
2022
+
2023
+ &:state(radio)::part(ch) {
2024
+ border-radius: 100%;
2025
+ display: grid;
2026
+ place-content: center;
462
2027
  width: var(--qti-form-size);
463
2028
  height: var(--qti-form-size);
464
- align-self: 1;
465
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
466
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2029
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
467
2030
  outline: none;
468
2031
  }
469
- &[role='radio'][aria-checked='true']::part(cha) {
470
- background-color: var(--qti-bg-primary);
471
- border-radius: var(--qti-border-radius-full);
2032
+
2033
+ &:state(radio):state(--checked)::part(cha) {
2034
+ background-color: var(--qti-border-active);
2035
+ border-radius: 100%;
472
2036
  }
473
- &[role='checkbox']::part(ch) {
474
- border-radius: var(--qti-border-radius-md);
2037
+
2038
+ &:state(checkbox)::part(ch) {
2039
+ display: flex;
2040
+ place-items: center;
2041
+ border-radius: var(--qti-border-radius);
2042
+ display: grid;
2043
+ place-content: center;
475
2044
  width: var(--qti-form-size);
476
2045
  height: var(--qti-form-size);
477
- align-self: 1;
478
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
479
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2046
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
480
2047
  outline: none;
481
2048
  }
482
- &[role='checkbox'][aria-checked='true']::part(cha) {
483
- background-color: var(--qti-bg-primary);
484
- -webkit-mask-image: var(--check-mask);
485
- mask-image: var(--check-mask);
2049
+
2050
+ &:state(checkbox):state(--checked)::part(cha) {
2051
+ background-color: var(--qti-border-active);
486
2052
  -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");
487
2053
  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");
488
2054
  }
2055
+
489
2056
  gap: 0.5rem;
490
- padding: var(--qti-padding-md) var(--qti-padding-md);
2057
+
2058
+ border-radius: var(--qti-border-radius);
2059
+
2060
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2061
+
491
2062
  outline: none;
492
- border-radius: var(--qti-border-radius-md);
2063
+
493
2064
  cursor: pointer
494
2065
  }
495
2066
  }
2067
+
496
2068
  & qti-simple-choice {
2069
+ width: -moz-fit-content;
2070
+ width: fit-content;
2071
+ cursor: pointer;
2072
+
2073
+ &:state(correct-response),
497
2074
  &[data-correct-response='true'] {
498
2075
  &::after {
499
2076
  content: '\02714';
@@ -503,102 +2080,164 @@ qti-response-declaration {
503
2080
  }
504
2081
 
505
2082
  & qti-simple-choice > p {
2083
+ margin: 0 !important;
2084
+ padding: 0 !important;
2085
+ }
2086
+ }
2087
+
2088
+ qti-graphic-gap-match-interaction {
2089
+ position: relative;
2090
+
2091
+ & img {
506
2092
  margin: 0;
507
2093
  padding: 0;
508
2094
  }
509
2095
  }
510
2096
 
511
2097
  qti-text-entry-interaction {
512
- &:hover {
513
- background-color: var(--qti-bg-gray-50);
514
- }
515
- &:focus-within {
516
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
517
- }
518
2098
  &::part(input) {
519
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
520
- outline: none;
521
2099
  border-radius: 0;
522
2100
  cursor: text;
523
- padding: var(--qti-padding-lg);
2101
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
524
2102
  background: unset;
525
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2103
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
526
2104
  outline: none;
527
2105
  }
2106
+
2107
+ &:hover {
2108
+ background-color: var(--qti-hover-bg);
2109
+ }
2110
+
2111
+ &:focus-within {
2112
+ &::part(input) {
2113
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2114
+ border-color: var(--qti-border-active);
2115
+ }
2116
+ }
528
2117
  }
529
2118
 
530
2119
  qti-extended-text-interaction {
531
2120
  &::part(textarea) {
532
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
533
- outline: none;
534
2121
  border-radius: 0;
535
2122
  cursor: text;
536
- padding: var(--qti-padding-lg);
2123
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
537
2124
  background: unset;
538
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2125
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
539
2126
  outline: none;
540
2127
  }
2128
+
541
2129
  &:hover {
542
- background-color: var(--qti-bg-gray-50);
2130
+ background-color: var(--qti-hover-bg);
543
2131
  }
2132
+
544
2133
  &:focus-within {
545
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2134
+ &::part(textarea) {
2135
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2136
+ border-color: var(--qti-border-active);
2137
+ }
546
2138
  }
547
2139
  }
548
2140
 
549
2141
  qti-gap-match-interaction {
550
2142
  & qti-gap-text {
551
2143
 
2144
+ &[dragging] {
2145
+ pointer-events: none;
2146
+ rotate: -2deg;
2147
+ box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2148
+ 0 4px 8px rgb(0 0 0 / 10%);
2149
+ }
2150
+
552
2151
  &:hover {
553
- background-color: var(--qti-bg-gray-50);
2152
+ background-color: var(--qti-hover-bg);
554
2153
  }
2154
+
555
2155
  &:focus {
556
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2156
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
557
2157
  }
558
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
559
- outline: none;
560
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
561
- border-radius: var(--qti-border-radius-md);
2158
+
2159
+ transition: transform 200ms ease-out,
2160
+ box-shadow 200ms ease-out,
2161
+ rotate 200ms ease-out;
2162
+
562
2163
  cursor: grab;
563
- background-color: white;
564
- font-weight: var(--qti-font-weight-semibold);
565
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2164
+
2165
+ background-color: var(--qti-bg);
2166
+
2167
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2168
+
2169
+ border-radius: var(--qti-border-radius);
2170
+
2171
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2172
+
2173
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2174
+
566
2175
  outline: none;
2176
+
567
2177
  background-image: radial-gradient(
568
2178
  circle at center,
569
- rgba(0, 0, 0, 0.1) 0,
570
- rgb(0, 0, 0, 0.1) 2px,
571
- white 2px,
572
- white 100%
2179
+ rgb(0 0 0 / 10%) 0,
2180
+ rgb(0 0 0 / 20%) 2px,
2181
+ rgb(255 255 255 / 0%) 2px,
2182
+ rgb(255 255 255 / 0%) 100%
573
2183
  );
2184
+
574
2185
  background-repeat: repeat-y;
575
- background-position: left 2px;
2186
+
2187
+ background-position: left center;
2188
+
576
2189
  background-size: 14px 8px
577
2190
  }
2191
+
578
2192
  & qti-gap {
2193
+
2194
+ &[enabled] {
2195
+ background-color: var(--qti-bg-active);
2196
+ }
2197
+
2198
+ &[disabled] {
2199
+ cursor: not-allowed;
2200
+ background-color: var(--qti-disabled-bg);
2201
+ color: var(--qti-disabled-color);
2202
+ border-color: var(--qti-border-color);
2203
+ outline: 4px solid var(--qti-disabled-bg);
2204
+ }
2205
+
2206
+ &[active] {
2207
+ border-color: var(--qti-border-active);
2208
+ background-color: var(--qti-bg-active);
2209
+ }
2210
+
579
2211
  display: inline-flex;
580
2212
  width: 8rem; /* w-32 */
581
- &:empty:after {
2213
+ &:empty::after {
582
2214
  padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
583
2215
  content: '\0000a0'; /* when empty, put a space in it */
584
2216
  }
2217
+
585
2218
  &:not(:empty) {
586
2219
  display: inline-flex;
587
2220
  padding: 0;
588
2221
  width: auto;
589
2222
  }
2223
+
590
2224
  &:not(:empty) > * {
591
2225
  flex: 1;
592
2226
  transform: rotate(0); /* rotate-0 */
593
2227
  box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
594
2228
  }
595
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
596
- outline: none;
597
- border-radius: var(--qti-border-radius-lg);
2229
+
2230
+ 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>')
2231
+ center no-repeat;
2232
+
2233
+ border-radius: var(--qti-border-radius);
2234
+
598
2235
  position: relative;
599
- background-color: var(--qti-bg-gray-50);
600
- margin: 1px;
601
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2236
+
2237
+ background-color: var(--qti-bg);
2238
+
2239
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2240
+
602
2241
  outline: none
603
2242
  }
604
2243
  }
@@ -606,67 +2245,93 @@ qti-response-declaration {
606
2245
  qti-hotspot-interaction {
607
2246
  & qti-hotspot-choice {
608
2247
  &[shape='circle'] {
2248
+
609
2249
  &:hover {
610
- background-color: var(--qti-bg-gray-50);
2250
+ background-color: var(--qti-hover-bg);
611
2251
  }
2252
+
612
2253
  &:focus {
613
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2254
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
614
2255
  }
2256
+
2257
+ &:state(--checked),
615
2258
  &[aria-checked='true'] {
616
- border-color: var(--qti-bg-primary);
2259
+ border-color: var(--qti-border-active);
617
2260
  }
2261
+
2262
+ &:state(--readonly),
618
2263
  &[aria-readonly='true'] {
619
2264
  cursor: pointer;
620
- background-color: white;
2265
+ background-color: var(--qti-bg);
621
2266
  outline: 0;
622
2267
  border: none;
623
2268
  }
2269
+
2270
+ &:state(--disabled),
624
2271
  &[aria-disabled='true'] {
625
2272
  cursor: not-allowed;
626
- background-color: var(--qti-bg-gray-100);
627
- color: var(--qti-text-gray-500);
628
- border-color: var(--qti-border-color-gray);
2273
+ background-color: var(--qti-disabled-bg);
2274
+ color: var(--qti-disabled-color);
2275
+ border-color: var(--qti-border-color);
2276
+ outline: 4px solid var(--qti-disabled-bg);
629
2277
  }
630
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
631
- outline: none;
2278
+
632
2279
  width: 100%;
2280
+
633
2281
  height: 100%;
2282
+
634
2283
  background-color: transparent;
2284
+
635
2285
  padding: 0;
636
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2286
+
2287
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2288
+
637
2289
  outline: none
638
2290
  }
2291
+
639
2292
  &[shape='rect'] {
640
- &:hover {
641
- background-color: var(--qti-bg-gray-50);
642
- }
2293
+
2294
+ /* &:hover {
2295
+ @apply hov;
2296
+ } */
2297
+
643
2298
  &:focus {
644
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2299
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
645
2300
  }
2301
+
2302
+ &:state(--checked),
646
2303
  &[aria-checked='true'] {
647
- border-color: var(--qti-bg-primary);
2304
+ border-color: var(--qti-border-active);
648
2305
  }
2306
+
649
2307
  &[aria-readonly='true'] {
650
2308
  cursor: pointer;
651
- background-color: white;
2309
+ background-color: var(--qti-bg);
652
2310
  outline: 0;
653
2311
  border: none;
654
2312
  }
2313
+
655
2314
  &[aria-disabled='true'] {
656
2315
  cursor: not-allowed;
657
- background-color: var(--qti-bg-gray-100);
658
- color: var(--qti-text-gray-500);
659
- border-color: var(--qti-border-color-gray);
2316
+ background-color: var(--qti-disabled-bg);
2317
+ color: var(--qti-disabled-color);
2318
+ border-color: var(--qti-border-color);
2319
+ outline: 4px solid var(--qti-disabled-bg);
660
2320
  }
661
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
662
- outline: none;
2321
+
663
2322
  width: 100%;
2323
+
664
2324
  height: 100%;
2325
+
665
2326
  background-color: transparent;
2327
+
666
2328
  padding: 0;
667
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2329
+
2330
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2331
+
668
2332
  outline: none
669
2333
  }
2334
+
670
2335
  &[shape='poly'] {
671
2336
  &:hover::after {
672
2337
  content: '';
@@ -674,16 +2339,16 @@ qti-response-declaration {
674
2339
  height: 100%;
675
2340
  background: repeating-linear-gradient(
676
2341
  45deg,
677
- var(--qti-primary),
678
- var(--qti-primary) 5px,
2342
+ var(--qti-border-active),
2343
+ var(--qti-border-active) 5px,
679
2344
  transparent 5px,
680
2345
  transparent 10px
681
2346
  );
682
2347
  display: block;
683
- border-color: var(--qti-bg-primary);
684
2348
  }
685
2349
 
686
- &[aria-checked='true']:after {
2350
+ &:state(--checked)::after,
2351
+ &[aria-checked='true']::after {
687
2352
  content: '';
688
2353
  width: 100%;
689
2354
  height: 100%;
@@ -691,85 +2356,94 @@ qti-response-declaration {
691
2356
  45deg,
692
2357
  transparent,
693
2358
  transparent 5px,
694
- var(--qti-primary) 5px,
695
- var(--qti-primary) 10px
2359
+ var(--qti-border-active) 5px,
2360
+ var(--qti-border-active) 10px
696
2361
  );
697
2362
  display: block;
698
- border-color: var(--qti-bg-primary);
699
2363
  }
700
2364
 
701
- &[aria-checked='true'] {
702
- border-color: var(--qti-bg-primary);
703
- }
704
2365
  &[aria-readonly='true'] {
705
2366
  cursor: pointer;
706
- background-color: white;
2367
+ background-color: var(--qti-bg);
707
2368
  outline: 0;
708
2369
  border: none;
709
2370
  }
2371
+
710
2372
  &[aria-disabled='true'] {
711
2373
  cursor: not-allowed;
712
- background-color: var(--qti-bg-gray-100);
713
- color: var(--qti-text-gray-500);
714
- border-color: var(--qti-border-color-gray);
2374
+ background-color: var(--qti-disabled-bg);
2375
+ color: var(--qti-disabled-color);
2376
+ border-color: var(--qti-border-color);
2377
+ outline: 4px solid var(--qti-disabled-bg);
715
2378
  }
716
2379
  }
717
2380
  }
718
2381
  }
719
2382
 
720
2383
  qti-hottext-interaction {
721
- qti-hottext {
722
- display: inline-flex;
723
- align-items: center;
724
- }
725
2384
  /* &:not(.qti-input-control-hidden),
726
2385
  &:not(.qti-unselected-hidden) { */
727
2386
  qti-hottext {
2387
+ display: inline-flex;
2388
+ align-items: center;
2389
+
728
2390
  &:hover {
729
- background-color: var(--qti-bg-gray-50);
2391
+ background-color: var(--qti-hover-bg);
730
2392
  }
2393
+
731
2394
  &:focus {
732
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2395
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
733
2396
  }
2397
+
734
2398
  &::part(cha) {
735
- width: calc(var(--qti-form-size) - 4px);
736
- height: calc(var(--qti-form-size) - 4px);
2399
+ width: calc(var(--qti-form-size) - 6px);
2400
+ height: calc(var(--qti-form-size) - 6px);
737
2401
  }
738
- &[role='radio']::part(ch) {
739
- border-radius: var(--qti-border-radius-full);
2402
+
2403
+ &:state(radio)::part(ch) {
2404
+ border-radius: 100%;
2405
+ display: grid;
2406
+ place-content: center;
740
2407
  width: var(--qti-form-size);
741
2408
  height: var(--qti-form-size);
742
- align-self: 1;
743
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
744
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2409
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
745
2410
  outline: none;
746
2411
  }
747
- &[role='radio'][aria-checked='true']::part(cha) {
748
- background-color: var(--qti-bg-primary);
749
- border-radius: var(--qti-border-radius-full);
2412
+
2413
+ &:state(radio):state(--checked)::part(cha) {
2414
+ background-color: var(--qti-border-active);
2415
+ border-radius: 100%;
750
2416
  }
751
- &[role='checkbox']::part(ch) {
752
- border-radius: var(--qti-border-radius-md);
2417
+
2418
+ &:state(checkbox)::part(ch) {
2419
+ display: flex;
2420
+ place-items: center;
2421
+ border-radius: var(--qti-border-radius);
2422
+ display: grid;
2423
+ place-content: center;
753
2424
  width: var(--qti-form-size);
754
2425
  height: var(--qti-form-size);
755
- align-self: 1;
756
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
757
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2426
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
758
2427
  outline: none;
759
2428
  }
760
- &[role='checkbox'][aria-checked='true']::part(cha) {
761
- background-color: var(--qti-bg-primary);
762
- -webkit-mask-image: var(--check-mask);
763
- mask-image: var(--check-mask);
2429
+
2430
+ &:state(checkbox):state(--checked)::part(cha) {
2431
+ background-color: var(--qti-border-active);
764
2432
  -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");
765
2433
  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");
766
2434
  }
2435
+
767
2436
  gap: 0.5rem;
768
- padding: var(--qti-padding-md) var(--qti-padding-md);
2437
+
2438
+ border-radius: var(--qti-border-radius);
2439
+
2440
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2441
+
769
2442
  outline: none;
770
- border-radius: var(--qti-border-radius-md);
2443
+
771
2444
  cursor: pointer
772
2445
  }
2446
+
773
2447
  /* } */
774
2448
 
775
2449
  &.qti-input-control-hidden {
@@ -779,68 +2453,85 @@ qti-response-declaration {
779
2453
  --qti-border-radius-md: 0.3rem;
780
2454
  --qti-border-thickness: 1px;
781
2455
  --qti-font-weight-semibold: 400; */
2456
+
782
2457
  &:hover {
783
- background-color: var(--qti-bg-gray-50);
2458
+ background-color: var(--qti-hover-bg);
784
2459
  }
2460
+
785
2461
  &:focus {
786
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2462
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
787
2463
  }
2464
+
788
2465
  /* @layer qti-variants { */
789
2466
  &::part(ch) {
790
2467
  display: none;
791
2468
  }
792
- &[aria-checked='true'] {
793
- border-color: var(--qti-bg-primary);
2469
+
2470
+ &:state(--checked) {
2471
+ border-color: var(--qti-border-active);
2472
+ background-color: var(--qti-bg-active);
794
2473
  }
2474
+
795
2475
  &[aria-readonly='true'] {
796
2476
  cursor: pointer;
797
- background-color: white;
2477
+ background-color: var(--qti-bg);
798
2478
  outline: 0;
799
2479
  border: none;
800
2480
  }
2481
+
801
2482
  &[aria-disabled='true'] {
802
2483
  cursor: not-allowed;
803
- background-color: var(--qti-bg-gray-100);
804
- color: var(--qti-text-gray-500);
805
- border-color: var(--qti-border-color-gray);
2484
+ background-color: var(--qti-disabled-bg);
2485
+ color: var(--qti-disabled-color);
2486
+ border-color: var(--qti-border-color);
2487
+ outline: 4px solid var(--qti-disabled-bg);
806
2488
  }
807
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
808
- outline: none;
809
- border-radius: var(--qti-border-radius-md);
810
- padding: var(--qti-padding-sm) var(--qti-padding-md);
811
- font-weight: var(--qti-font-weight-semibold);
812
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2489
+
2490
+ border-radius: var(--qti-border-radius);
2491
+
2492
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2493
+
2494
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2495
+
813
2496
  outline: none
814
2497
  }
2498
+
815
2499
  /* } */
816
2500
  }
817
2501
 
818
2502
  &.qti-unselected-hidden {
819
2503
  qti-hottext {
820
2504
  &:hover {
821
- background-color: var(--qti-bg-gray-50);
2505
+ background-color: var(--qti-hover-bg);
822
2506
  }
2507
+
823
2508
  &:focus {
824
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2509
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
825
2510
  }
2511
+
826
2512
  cursor: pointer;
2513
+
827
2514
  &::part(ch) {
828
2515
  display: none;
829
2516
  }
830
- &[aria-checked='true'] {
831
- background-color: var(--qti-primary-light); /* bg-blue-200 */
2517
+
2518
+ &:state(--checked) {
2519
+ background-color: var(--qti-bg-active);
832
2520
  }
2521
+
833
2522
  &[aria-readonly='true'] {
834
2523
  cursor: pointer;
835
- background-color: white;
2524
+ background-color: var(--qti-bg);
836
2525
  outline: 0;
837
2526
  border: none;
838
2527
  }
2528
+
839
2529
  &[aria-disabled='true'] {
840
2530
  cursor: not-allowed;
841
- background-color: var(--qti-bg-gray-100);
842
- color: var(--qti-text-gray-500);
843
- border-color: var(--qti-border-color-gray);
2531
+ background-color: var(--qti-disabled-bg);
2532
+ color: var(--qti-disabled-color);
2533
+ border-color: var(--qti-border-color);
2534
+ outline: 4px solid var(--qti-disabled-bg);
844
2535
  }
845
2536
  }
846
2537
  }
@@ -848,63 +2539,98 @@ qti-response-declaration {
848
2539
 
849
2540
  qti-inline-choice-interaction {
850
2541
  &::part(select) {
2542
+
851
2543
  &:hover {
852
- background-color: var(--qti-bg-gray-50);
2544
+ background-color: var(--qti-hover-bg);
853
2545
  }
2546
+
854
2547
  &:focus {
855
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2548
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
856
2549
  }
857
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
858
- outline: none;
859
- border-radius: var(--qti-border-radius-md);
2550
+
2551
+ border-radius: var(--qti-border-radius);
2552
+
860
2553
  position: relative;
2554
+
861
2555
  -webkit-appearance: none;
2556
+
862
2557
  -moz-appearance: none;
2558
+
863
2559
  appearance: none;
864
- padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg);
865
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2560
+
2561
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2562
+
2563
+ padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
2564
+
2565
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2566
+
866
2567
  outline: none;
2568
+
867
2569
  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")
868
2570
  no-repeat center right 6px
869
2571
  }
870
2572
  }
871
2573
 
872
2574
  qti-match-interaction:not(.qti-match-tabular) {
2575
+ /* The draggables */
873
2576
  & qti-simple-match-set:first-of-type {
874
2577
  display: flex;
875
2578
  flex-wrap: wrap;
876
- gap: var(--qti-gap-size); /* gap-2 */
877
- padding-bottom: 1rem; /* pb-4 */
2579
+ align-items: flex-start; /* Prevents children from stretching */
2580
+ gap: var(--qti-gap-size);
878
2581
 
879
2582
  & qti-simple-associable-choice {
2583
+
2584
+ &[dragging] {
2585
+ pointer-events: none;
2586
+ rotate: -2deg;
2587
+ box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2588
+ 0 4px 8px rgb(0 0 0 / 10%);
2589
+ }
2590
+
880
2591
  &:hover {
881
- background-color: var(--qti-bg-gray-50);
2592
+ background-color: var(--qti-hover-bg);
882
2593
  }
2594
+
883
2595
  &:focus {
884
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2596
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
885
2597
  }
886
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
887
- outline: none;
888
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
889
- border-radius: var(--qti-border-radius-md);
2598
+
2599
+ transition: transform 200ms ease-out,
2600
+ box-shadow 200ms ease-out,
2601
+ rotate 200ms ease-out;
2602
+
890
2603
  cursor: grab;
891
- background-color: white;
892
- font-weight: var(--qti-font-weight-semibold);
893
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2604
+
2605
+ background-color: var(--qti-bg);
2606
+
2607
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2608
+
2609
+ border-radius: var(--qti-border-radius);
2610
+
2611
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2612
+
2613
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2614
+
894
2615
  outline: none;
2616
+
895
2617
  background-image: radial-gradient(
896
2618
  circle at center,
897
- rgba(0, 0, 0, 0.1) 0,
898
- rgb(0, 0, 0, 0.1) 2px,
899
- white 2px,
900
- white 100%
2619
+ rgb(0 0 0 / 10%) 0,
2620
+ rgb(0 0 0 / 20%) 2px,
2621
+ rgb(255 255 255 / 0%) 2px,
2622
+ rgb(255 255 255 / 0%) 100%
901
2623
  );
2624
+
902
2625
  background-repeat: repeat-y;
903
- background-position: left 2px;
2626
+
2627
+ background-position: left center;
2628
+
904
2629
  background-size: 14px 8px
905
2630
  }
906
2631
  }
907
2632
 
2633
+ /* The droppables */
908
2634
  & qti-simple-match-set:last-of-type {
909
2635
  display: grid;
910
2636
  grid-auto-columns: 1fr; /* auto-cols-fr */
@@ -917,69 +2643,121 @@ qti-response-declaration {
917
2643
  flex-direction: column;
918
2644
  }
919
2645
 
920
- & qti-simple-associable-choice[enabled] {
921
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
922
- }
923
-
924
- & qti-simple-associable-choice[active] {
925
- border-color: var(--qti-bg-primary);
926
- }
2646
+ & > qti-simple-associable-choice {
2647
+ /* a droppable qti-simple-associable-choice */
2648
+ box-sizing: border-box;
2649
+ display: grid;
2650
+ grid-row: 2 / 4;
2651
+ grid-template-rows: subgrid;
927
2652
 
928
- & qti-simple-associable-choice::part(dropslot) {
929
- &:hover {
930
- background-color: var(--qti-bg-gray-50);
2653
+ & img {
2654
+ max-width: 100%;
2655
+ height: auto;
931
2656
  }
932
- &:focus {
933
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2657
+
2658
+ &[enabled] {
2659
+ &::part(dropslot) {
2660
+ background-color: var(--qti-bg-active);
2661
+ }
934
2662
  }
935
- display: flex;
936
- flex-direction: column;
937
- min-height: 6rem;
938
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
939
- outline: none;
940
- border-radius: var(--qti-border-radius-lg);
941
- position: relative;
942
- background-color: var(--qti-bg-gray-50);
943
- margin: 1px;
944
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
945
- outline: none;
946
- }
947
2663
 
948
- & qti-simple-associable-choice > qti-simple-associable-choice::part(dropslot) {
949
- display: none;
950
- }
2664
+ &[disabled] {
2665
+ &::part(dropslot) {
2666
+ cursor: not-allowed;
2667
+ background-color: var(--qti-disabled-bg);
2668
+ color: var(--qti-disabled-color);
2669
+ border-color: var(--qti-border-color);
2670
+ outline: 4px solid var(--qti-disabled-bg);
2671
+ }
2672
+ }
951
2673
 
952
- & qti-simple-associable-choice > *:not(qti-simple-associable-choice) {
953
- pointer-events: none;
954
- }
2674
+ &[active] {
2675
+ &::part(dropslot) {
2676
+ border-color: var(--qti-border-active);
2677
+ background-color: var(--qti-bg-active);
2678
+ }
2679
+ }
955
2680
 
956
- & qti-simple-associable-choice > qti-simple-associable-choice {
957
- &:hover {
958
- background-color: var(--qti-bg-gray-50);
2681
+ &::part(dropslot) {
2682
+
2683
+ &[dragging] {
2684
+ pointer-events: none;
2685
+ rotate: -2deg;
2686
+ box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2687
+ 0 4px 8px rgb(0 0 0 / 10%);
2688
+ }
2689
+
2690
+ &:focus {
2691
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2692
+ }
2693
+
2694
+ min-height: 6rem;
2695
+ gap: var(--qti-gap-size);
2696
+ box-sizing: border-box;
2697
+ display: flex;
2698
+ justify-content: center;
2699
+ align-items: center;
2700
+ 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>')
2701
+ center no-repeat;
2702
+ border-radius: var(--qti-border-radius);
2703
+ position: relative;
2704
+ background-color: var(--qti-bg);
2705
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2706
+ outline: none;
959
2707
  }
960
- &:focus {
961
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2708
+
2709
+ & > *:not(qti-simple-associable-choice) {
2710
+ pointer-events: none;
962
2711
  }
963
- flex-basis: fit-content;
964
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
965
- outline: none;
966
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
967
- border-radius: var(--qti-border-radius-md);
968
- cursor: grab;
969
- background-color: white;
970
- font-weight: var(--qti-font-weight-semibold);
971
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
972
- outline: none;
973
- background-image: radial-gradient(
2712
+
2713
+ & > qti-simple-associable-choice {
2714
+
2715
+ &::part(dropslot) {
2716
+ display: none;
2717
+ }
2718
+
2719
+ &:hover {
2720
+ background-color: var(--qti-hover-bg);
2721
+ }
2722
+
2723
+ &:focus {
2724
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2725
+ }
2726
+
2727
+ flex-basis: fit-content;
2728
+
2729
+ transition: transform 200ms ease-out,
2730
+ box-shadow 200ms ease-out,
2731
+ rotate 200ms ease-out;
2732
+
2733
+ cursor: grab;
2734
+
2735
+ background-color: var(--qti-bg);
2736
+
2737
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2738
+
2739
+ border-radius: var(--qti-border-radius);
2740
+
2741
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2742
+
2743
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2744
+
2745
+ outline: none;
2746
+
2747
+ background-image: radial-gradient(
974
2748
  circle at center,
975
- rgba(0, 0, 0, 0.1) 0,
976
- rgb(0, 0, 0, 0.1) 2px,
977
- white 2px,
978
- white 100%
2749
+ rgb(0 0 0 / 10%) 0,
2750
+ rgb(0 0 0 / 20%) 2px,
2751
+ rgb(255 255 255 / 0%) 2px,
2752
+ rgb(255 255 255 / 0%) 100%
979
2753
  );
980
- background-repeat: repeat-y;
981
- background-position: left 2px;
982
- background-size: 14px 8px;
2754
+
2755
+ background-repeat: repeat-y;
2756
+
2757
+ background-position: left center;
2758
+
2759
+ background-size: 14px 8px;
2760
+ }
983
2761
  }
984
2762
  }
985
2763
  }
@@ -987,32 +2765,55 @@ qti-response-declaration {
987
2765
  qti-order-interaction {
988
2766
  &::part(qti-simple-choice),
989
2767
  & qti-simple-choice {
2768
+
2769
+ &[dragging] {
2770
+ pointer-events: none;
2771
+ rotate: -2deg;
2772
+ box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2773
+ 0 4px 8px rgb(0 0 0 / 10%);
2774
+ }
2775
+
990
2776
  &:hover {
991
- background-color: var(--qti-bg-gray-50);
2777
+ background-color: var(--qti-hover-bg);
992
2778
  }
2779
+
993
2780
  &:focus {
994
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2781
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
995
2782
  }
996
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
997
- outline: none;
998
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
999
- border-radius: var(--qti-border-radius-md);
2783
+
2784
+ transition: transform 200ms ease-out,
2785
+ box-shadow 200ms ease-out,
2786
+ rotate 200ms ease-out;
2787
+
1000
2788
  cursor: grab;
1001
- background-color: white;
1002
- font-weight: var(--qti-font-weight-semibold);
1003
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2789
+
2790
+ background-color: var(--qti-bg);
2791
+
2792
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2793
+
2794
+ border-radius: var(--qti-border-radius);
2795
+
2796
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2797
+
2798
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2799
+
1004
2800
  outline: none;
2801
+
1005
2802
  background-image: radial-gradient(
1006
2803
  circle at center,
1007
- rgba(0, 0, 0, 0.1) 0,
1008
- rgb(0, 0, 0, 0.1) 2px,
1009
- white 2px,
1010
- white 100%
2804
+ rgb(0 0 0 / 10%) 0,
2805
+ rgb(0 0 0 / 20%) 2px,
2806
+ rgb(255 255 255 / 0%) 2px,
2807
+ rgb(255 255 255 / 0%) 100%
1011
2808
  );
2809
+
1012
2810
  background-repeat: repeat-y;
1013
- background-position: left 2px;
2811
+
2812
+ background-position: left center;
2813
+
1014
2814
  background-size: 14px 8px
1015
2815
  }
2816
+
1016
2817
  &::part(qti-simple-choice) {
1017
2818
  display: flex;
1018
2819
  overflow: hidden;
@@ -1020,142 +2821,187 @@ qti-response-declaration {
1020
2821
  width: 100%;
1021
2822
  text-overflow: ellipsis;
1022
2823
  }
2824
+
1023
2825
  &::part(drops) {
1024
2826
  gap: 0.5rem; /* gap-2 */
1025
2827
  }
2828
+
1026
2829
  &::part(drags) {
1027
2830
  gap: 0.5rem; /* gap-2 */
1028
2831
  }
2832
+
1029
2833
  &::part(drop-list) {
2834
+
2835
+ &[enabled] {
2836
+ background-color: var(--qti-bg-active);
2837
+ }
2838
+
1030
2839
  &:hover {
1031
- background-color: var(--qti-bg-gray-50);
2840
+ background-color: var(--qti-hover-bg);
1032
2841
  }
2842
+
1033
2843
  &:focus {
1034
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2844
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1035
2845
  }
2846
+
1036
2847
  display: flex;
1037
2848
  min-height: 4rem;
1038
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1039
- outline: none;
1040
- border-radius: var(--qti-border-radius-lg);
2849
+ 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>')
2850
+ center no-repeat;
2851
+ border-radius: var(--qti-border-radius);
1041
2852
  position: relative;
1042
- background-color: var(--qti-bg-gray-50);
1043
- margin: 1px;
1044
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2853
+ background-color: var(--qti-bg);
2854
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1045
2855
  outline: none;
1046
2856
  }
2857
+
1047
2858
  &::part(active) {
1048
- border-color: var(--qti-bg-primary);
2859
+ border-color: var(--qti-border-active);
2860
+ background-color: var(--qti-bg-active);
1049
2861
  }
1050
2862
  }
1051
2863
 
1052
2864
  qti-associate-interaction {
1053
- &::part(qti-simple-associable-choice),
1054
- & qti-simple-associable-choice {
1055
- /* drags in drops */
1056
- display: flex;
1057
- overflow: hidden;
1058
- align-items: center;
1059
- text-overflow: ellipsis;
1060
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1061
- outline: none;
1062
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
1063
- border-radius: var(--qti-border-radius-md);
2865
+ & qti-simple-associable-choice, /* drags when in lightdom */
2866
+ &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
2867
+
2868
+ &:hover {
2869
+ background-color: var(--qti-hover-bg);
2870
+ }
2871
+
2872
+ &:focus {
2873
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2874
+ }
2875
+
2876
+ &[dragging] {
2877
+ pointer-events: none;
2878
+ rotate: -2deg;
2879
+ box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2880
+ 0 4px 8px rgb(0 0 0 / 10%);
2881
+ }
2882
+
2883
+ transition: transform 200ms ease-out,
2884
+ box-shadow 200ms ease-out,
2885
+ rotate 200ms ease-out;
2886
+
1064
2887
  cursor: grab;
1065
- background-color: white;
1066
- font-weight: var(--qti-font-weight-semibold);
1067
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2888
+
2889
+ background-color: var(--qti-bg);
2890
+
2891
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2892
+
2893
+ border-radius: var(--qti-border-radius);
2894
+
2895
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2896
+
2897
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2898
+
1068
2899
  outline: none;
2900
+
1069
2901
  background-image: radial-gradient(
1070
2902
  circle at center,
1071
- rgba(0, 0, 0, 0.1) 0,
1072
- rgb(0, 0, 0, 0.1) 2px,
1073
- white 2px,
1074
- white 100%
2903
+ rgb(0 0 0 / 10%) 0,
2904
+ rgb(0 0 0 / 20%) 2px,
2905
+ rgb(255 255 255 / 0%) 2px,
2906
+ rgb(255 255 255 / 0%) 100%
1075
2907
  );
2908
+
1076
2909
  background-repeat: repeat-y;
1077
- background-position: left 2px;
1078
- background-size: 14px 8px;
1079
- }
1080
- &::part(associables-container) {
1081
- display: flex;
1082
- justify-content: space-between;
1083
- background: linear-gradient(
1084
- 180deg,
1085
- rgb(0 0 0 / 0%) calc(50% - 1px),
1086
- var(--qti-border-color-gray) calc(50%),
1087
- rgb(0 0 0 / 0%) calc(50% + 1px)
1088
- );
1089
- }
1090
- &::part(active) {
1091
- border-color: var(--qti-bg-primary);
2910
+
2911
+ background-position: left center;
2912
+
2913
+ background-size: 14px 8px
1092
2914
  }
1093
- &::part(drop-container) {
2915
+
2916
+ /* display: flex;
2917
+ overflow: hidden;
2918
+ align-items: center; */
2919
+
2920
+ /* &::part(drop-container) {
1094
2921
  display: flex;
1095
2922
  flex-direction: column;
1096
2923
  gap: var(--qti-gap-size);
1097
- }
2924
+ } */
2925
+
1098
2926
  &::part(drop-list) {
1099
- &:focus {
1100
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1101
- }
2927
+
1102
2928
  display: grid;
1103
2929
  height: 3rem;
1104
2930
  min-width: 10rem;
1105
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1106
- outline: none;
1107
- border-radius: var(--qti-border-radius-lg);
2931
+ 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>')
2932
+ center no-repeat;
2933
+ border-radius: var(--qti-border-radius);
1108
2934
  position: relative;
1109
- background-color: var(--qti-bg-gray-50);
1110
- margin: 1px;
1111
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2935
+ background-color: var(--qti-bg);
2936
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1112
2937
  outline: none;
1113
2938
  }
2939
+
2940
+ &::part(drop-list):focus {
2941
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2942
+ }
2943
+
2944
+ &::part(drop-list)[dragging] {
2945
+ border-color: var(--qti-border-active);
2946
+ background-color: var(--qti-bg-active);
2947
+ }
2948
+
2949
+ /* &::part(drop-list) {
2950
+ @apply act;
2951
+ } */
1114
2952
  }
1115
2953
 
1116
2954
  qti-graphic-order-interaction {
1117
2955
  & qti-hotspot-choice {
2956
+
1118
2957
  &:hover {
1119
- background-color: var(--qti-bg-gray-50);
2958
+ background-color: var(--qti-hover-bg);
1120
2959
  }
2960
+
1121
2961
  &:focus {
1122
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2962
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1123
2963
  }
2964
+
2965
+ &:state(--checked),
1124
2966
  &[aria-checked='true'] {
1125
- border-color: var(--qti-bg-primary);
2967
+ border-color: var(--qti-border-active);
2968
+ background-color: var(--qti-bg-active);
1126
2969
  }
2970
+
1127
2971
  &[aria-readonly='true'] {
1128
2972
  cursor: pointer;
1129
- background-color: white;
2973
+ background-color: var(--qti-bg);
1130
2974
  outline: 0;
1131
2975
  border: none;
1132
2976
  }
2977
+
1133
2978
  &[aria-disabled='true'] {
1134
2979
  cursor: not-allowed;
1135
- background-color: var(--qti-bg-gray-100);
1136
- color: var(--qti-text-gray-500);
1137
- border-color: var(--qti-border-color-gray);
2980
+ background-color: var(--qti-disabled-bg);
2981
+ color: var(--qti-disabled-color);
2982
+ border-color: var(--qti-border-color);
2983
+ outline: 4px solid var(--qti-disabled-bg);
1138
2984
  }
2985
+
1139
2986
  &[aria-ordervalue] {
1140
- display: flex;
1141
- justify-content: center;
1142
- align-items: center;
1143
- background-color: var(--qti-bg-primary);
1144
- border-radius: var(--qti-border-radius-full);
1145
- width: 1.5rem;
1146
- height: 1.5rem;
1147
- color: var(--qti-text-white);
2987
+ display: grid;
2988
+ place-content: center;
1148
2989
  }
2990
+
1149
2991
  &[aria-ordervalue]::after {
1150
2992
  content: attr(aria-ordervalue) !important;
1151
2993
  }
1152
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1153
- outline: none;
2994
+
1154
2995
  width: 100%;
2996
+
1155
2997
  height: 100%;
2998
+
1156
2999
  background-color: transparent;
3000
+
1157
3001
  padding: 0;
1158
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3002
+
3003
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3004
+
1159
3005
  outline: none
1160
3006
  }
1161
3007
  }
@@ -1166,83 +3012,97 @@ qti-response-declaration {
1166
3012
 
1167
3013
  & qti-associable-hotspot {
1168
3014
  &[shape='circle'] {
3015
+
1169
3016
  &:hover {
1170
- background-color: var(--qti-bg-gray-50);
3017
+ background-color: var(--qti-hover-bg);
1171
3018
  }
3019
+
1172
3020
  &:focus {
1173
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3021
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1174
3022
  }
3023
+
1175
3024
  &[aria-checked='true'] {
1176
- border-color: var(--qti-bg-primary);
3025
+ border-color: var(--qti-border-active);
3026
+ background-color: var(--qti-bg-active);
1177
3027
  }
3028
+
1178
3029
  &[aria-readonly='true'] {
1179
3030
  cursor: pointer;
1180
- background-color: white;
3031
+ background-color: var(--qti-bg);
1181
3032
  outline: 0;
1182
3033
  border: none;
1183
3034
  }
3035
+
1184
3036
  &[aria-disabled='true'] {
1185
3037
  cursor: not-allowed;
1186
- background-color: var(--qti-bg-gray-100);
1187
- color: var(--qti-text-gray-500);
1188
- border-color: var(--qti-border-color-gray);
3038
+ background-color: var(--qti-disabled-bg);
3039
+ color: var(--qti-disabled-color);
3040
+ border-color: var(--qti-border-color);
3041
+ outline: 4px solid var(--qti-disabled-bg);
1189
3042
  }
1190
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1191
- outline: none;
3043
+
1192
3044
  width: 100%;
3045
+
1193
3046
  height: 100%;
3047
+
1194
3048
  background-color: transparent;
3049
+
1195
3050
  padding: 0;
1196
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3051
+
3052
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3053
+
1197
3054
  outline: none
1198
3055
  }
1199
3056
 
1200
3057
  &[shape='square'] {
3058
+
1201
3059
  &:hover {
1202
- background-color: var(--qti-bg-gray-50);
3060
+ background-color: var(--qti-hover-bg);
1203
3061
  }
3062
+
1204
3063
  &:focus {
1205
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3064
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1206
3065
  }
3066
+
1207
3067
  &[aria-checked='true'] {
1208
- border-color: var(--qti-bg-primary);
3068
+ border-color: var(--qti-border-active);
3069
+ background-color: var(--qti-bg-active);
1209
3070
  }
3071
+
1210
3072
  &[aria-readonly='true'] {
1211
3073
  cursor: pointer;
1212
- background-color: white;
3074
+ background-color: var(--qti-bg);
1213
3075
  outline: 0;
1214
3076
  border: none;
1215
3077
  }
3078
+
1216
3079
  &[aria-disabled='true'] {
1217
3080
  cursor: not-allowed;
1218
- background-color: var(--qti-bg-gray-100);
1219
- color: var(--qti-text-gray-500);
1220
- border-color: var(--qti-border-color-gray);
3081
+ background-color: var(--qti-disabled-bg);
3082
+ color: var(--qti-disabled-color);
3083
+ border-color: var(--qti-border-color);
3084
+ outline: 4px solid var(--qti-disabled-bg);
1221
3085
  }
1222
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1223
- outline: none;
3086
+
1224
3087
  width: 100%;
3088
+
1225
3089
  height: 100%;
3090
+
1226
3091
  background-color: transparent;
3092
+
1227
3093
  padding: 0;
1228
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3094
+
3095
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3096
+
1229
3097
  outline: none
1230
3098
  }
1231
3099
  }
1232
3100
  }
1233
3101
 
1234
- qti-graphic-gap-match-interaction {
1235
- position: relative;
1236
- & img {
1237
- margin: 0;
1238
- padding: 0;
1239
- }
1240
- }
1241
-
1242
3102
  qti-slider-interaction {
1243
3103
  display: block;
1244
3104
 
1245
- --qti-tick-color: rgb(229 231 235 / 1);
3105
+ --qti-tick-color: rgb(229 231 235 / 100%);
1246
3106
  --qti-tick-width: 1px;
1247
3107
 
1248
3108
  &::part(slider) {
@@ -1253,6 +3113,7 @@ qti-response-declaration {
1253
3113
  }
1254
3114
 
1255
3115
  --show-bounds: true;
3116
+
1256
3117
  &::part(bounds) {
1257
3118
  display: flex;
1258
3119
  width: 100%;
@@ -1261,14 +3122,14 @@ qti-response-declaration {
1261
3122
  }
1262
3123
 
1263
3124
  --show-ticks: true;
3125
+
1264
3126
  &::part(ticks) {
1265
3127
  margin-left: 0.125rem; /* mx-0.5 */
1266
3128
  margin-right: 0.125rem;
1267
3129
  margin-bottom: 0.25rem; /* mb-1 */
1268
3130
  height: 0.5rem; /* h-2 */
1269
- background-position: 0 center;
1270
- background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
1271
- background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
3131
+ background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
3132
+ center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
1272
3133
  }
1273
3134
 
1274
3135
  &::part(rail) {
@@ -1296,6 +3157,7 @@ qti-response-declaration {
1296
3157
  }
1297
3158
 
1298
3159
  --show-value: true;
3160
+
1299
3161
  &::part(value) {
1300
3162
  position: absolute;
1301
3163
  bottom: 2rem; /* bottom-8 */
@@ -1313,19 +3175,25 @@ qti-response-declaration {
1313
3175
  qti-select-point-interaction {
1314
3176
  &::part(point) {
1315
3177
  &:hover {
1316
- background-color: var(--qti-bg-gray-50);
3178
+ background-color: var(--qti-hover-bg);
1317
3179
  }
3180
+
1318
3181
  &:focus {
1319
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3182
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1320
3183
  }
1321
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1322
- border-radius: var(--qti-border-radius-full);
1323
- outline: none;
1324
- width: 1.5rem;
1325
- height: 1.5rem;
3184
+
3185
+ border-radius: 100%;
3186
+
3187
+ width: var(--qti-point-size);
3188
+
3189
+ height: var(--qti-point-size);
3190
+
1326
3191
  background-color: transparent;
3192
+
1327
3193
  padding: 0;
1328
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3194
+
3195
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3196
+
1329
3197
  outline: none;
1330
3198
  }
1331
3199
  }
@@ -1342,163 +3210,3 @@ qti-response-declaration {
1342
3210
  width: 100%;
1343
3211
  }
1344
3212
  }
1345
-
1346
- /* utilities */
1347
-
1348
- @layer qti-utilities {
1349
- .qti-underline {
1350
- text-decoration: underline;
1351
- }
1352
-
1353
- .qti-align-left {
1354
- text-align: left;
1355
- }
1356
-
1357
- .qti-align-center {
1358
- text-align: center;
1359
- }
1360
-
1361
- .qti-align-right {
1362
- text-align: right;
1363
- }
1364
-
1365
- .qti-valign-top {
1366
- vertical-align: top;
1367
- }
1368
-
1369
- .qti-valign-middle {
1370
- vertical-align: middle;
1371
- }
1372
-
1373
- .qti-valign-baseline {
1374
- vertical-align: baseline;
1375
- }
1376
-
1377
- .qti-valign-bottom {
1378
- vertical-align: bottom;
1379
- }
1380
-
1381
- .qti-fullwidth {
1382
- width: 100%;
1383
- }
1384
-
1385
- .qti-hidden {
1386
- display: none;
1387
- }
1388
-
1389
- .qti-visually-hidden {
1390
- position: fixed !important;
1391
- overflow: hidden;
1392
- width: 1px;
1393
- height: 1px;
1394
- border: 0;
1395
- margin: -1px;
1396
- clip: rect(1px 1px 1px 1px);
1397
- }
1398
-
1399
- .qti-bordered {
1400
- padding: 2px;
1401
- border: 1px solid #888;
1402
- }
1403
-
1404
- .qti-well {
1405
- display: inline-block;
1406
- padding-top: 0.5rem;
1407
- padding-bottom: 0.5rem;
1408
- padding-left: 0.75rem;
1409
- padding-right: 0.75rem;
1410
- border-radius: 0.25rem;
1411
- border-width: 1px;
1412
- border-color: #d1d5db;
1413
- color: #4b5563;
1414
- background-color: #f3f4f6;
1415
- }
1416
- }
1417
-
1418
- /* variants */
1419
-
1420
- @layer qti-variants {
1421
- .qti-input-width-1 {
1422
- width: 1ch;
1423
- min-width: 1ch;
1424
- }
1425
- .qti-input-width-2 {
1426
- width: 2ch;
1427
- min-width: 2ch;
1428
- }
1429
- .qti-input-width-3 {
1430
- width: 3ch;
1431
- min-width: 3ch;
1432
- }
1433
- .qti-input-width-4 {
1434
- width: 4ch;
1435
- min-width: 4ch;
1436
- }
1437
- .qti-input-width-6 {
1438
- width: 6ch;
1439
- min-width: 6ch;
1440
- }
1441
- .qti-input-width-10 {
1442
- width: 10ch;
1443
- min-width: 10ch;
1444
- }
1445
- .qti-input-width-15 {
1446
- width: 15ch;
1447
- min-width: 15ch;
1448
- }
1449
- .qti-input-width-20 {
1450
- width: 20ch;
1451
- min-width: 20ch;
1452
- }
1453
- .qti-input-width-72 {
1454
- width: 72ch;
1455
- min-width: 72ch;
1456
- }
1457
- }
1458
-
1459
- @layer qti-variants {
1460
- qti-choice-interaction {
1461
- &.qti-choices-stacking-2 {
1462
- .grid {
1463
- display: grid; /* grid */
1464
- }
1465
- grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
1466
- qti-prompt {
1467
- grid-column: span 2 / span 2; /* col-span-2 */
1468
- }
1469
- }
1470
- &.qti-choices-stacking-3 {
1471
- .grid {
1472
- display: grid;
1473
- }
1474
- grid-template-columns: repeat(3, minmax(0, 1fr));
1475
- qti-prompt {
1476
- grid-column: span 3 / span 3;
1477
- }
1478
- }
1479
- &.qti-choices-stacking-4 {
1480
- .grid {
1481
- display: grid;
1482
- }
1483
- grid-template-columns: repeat(4, minmax(0, 1fr));
1484
- qti-prompt {
1485
- grid-column: span 4 / span 4;
1486
- }
1487
- }
1488
- &.qti-choices-stacking-5 {
1489
- .grid {
1490
- display: grid;
1491
- }
1492
- grid-template-columns: repeat(5, minmax(0, 1fr));
1493
- qti-prompt {
1494
- grid-column: span 5 / span 5;
1495
- }
1496
- }
1497
- &.qti-orientation-horizontal {
1498
- /* is the default layout */
1499
- }
1500
- &[orientation='horizontal'] {
1501
- flex-direction: row;
1502
- }
1503
- }
1504
- }