@citolab/qti-components 6.9.1-beta.1 → 6.9.1-beta.11

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