@citolab/qti-components 6.9.1-beta.5 → 6.9.1-beta.51

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