@citolab/qti-components 6.7.1-6 → 6.7.1-61

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 (11) hide show
  1. package/dist/chunk-DBZBAD4I.js +24 -0
  2. package/dist/custom-elements.json +453 -249
  3. package/dist/index.js +122 -131
  4. package/dist/item.css +1123 -2566
  5. package/dist/qti-components/index.d.ts +312 -22
  6. package/dist/qti-components/index.js +108 -104
  7. package/dist/qti-transformers/index.d.ts +106 -13
  8. package/dist/qti-transformers/index.js +2 -37
  9. package/package.json +74 -70
  10. package/dist/chunk-JILF7TI5.js +0 -2
  11. package/dist/item.minimal.css +0 -1888
package/dist/item.css CHANGED
@@ -1,2698 +1,1255 @@
1
- /*
2
- ! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
3
- *//*
4
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
5
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
6
- */
7
-
8
- *,
9
- ::before,
10
- ::after {
11
- box-sizing: border-box; /* 1 */
12
- border-width: 0; /* 2 */
13
- border-style: solid; /* 2 */
14
- border-color: #e5e7eb; /* 2 */
15
- }
1
+ @layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
16
2
 
17
- ::before,
18
- ::after {
19
- --tw-content: '';
20
- }
3
+ /* base */
21
4
 
22
- /*
23
- 1. Use a consistent sensible line-height in all browsers.
24
- 2. Prevent adjustments of font size after orientation changes in iOS.
25
- 3. Use a more readable tab size.
26
- 4. Use the user's configured `sans` font-family by default.
27
- 5. Use the user's configured `sans` font-feature-settings by default.
28
- 6. Use the user's configured `sans` font-variation-settings by default.
29
- */
30
-
31
- html {
32
- line-height: 1.5; /* 1 */
5
+ /* Document
6
+ * ========================================================================== */
7
+
8
+ /**
9
+ * 1. Correct the line height in all browsers.
10
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
11
+ */
12
+
13
+ :where(html) {
14
+ line-height: 1.15; /* 1 */
33
15
  -webkit-text-size-adjust: 100%; /* 2 */
34
- -moz-tab-size: 4; /* 3 */
35
- -o-tab-size: 4;
36
- tab-size: 4; /* 3 */
37
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
38
- font-feature-settings: normal; /* 5 */
39
- font-variation-settings: normal; /* 6 */
16
+ -moz-text-size-adjust: 100%;
17
+ text-size-adjust: 100%; /* 2 */
40
18
  }
41
19
 
42
- /*
43
- 1. Remove the margin in all browsers.
44
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
45
- */
20
+ /* Sections
21
+ * ========================================================================== */
22
+
23
+ /**
24
+ * Correct the font size and margin on `h1` elements within `section` and
25
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
26
+ */
46
27
 
47
- body {
48
- margin: 0; /* 1 */
49
- line-height: inherit; /* 2 */
28
+ :where(h1) {
29
+ font-size: 2em;
30
+ margin-block-end: 0.67em;
31
+ margin-block-start: 0.67em;
50
32
  }
51
33
 
52
- /*
53
- 1. Add the correct height in Firefox.
54
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
55
- 3. Ensure horizontal rules are visible by default.
56
- */
34
+ /* Grouping content
35
+ * ========================================================================== */
57
36
 
58
- hr {
59
- height: 0; /* 1 */
60
- color: inherit; /* 2 */
61
- border-top-width: 1px; /* 3 */
37
+ /**
38
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
39
+ */
40
+
41
+ :where(dl, ol, ul) :where(dl, ol, ul) {
42
+ margin-block-end: 0;
43
+ margin-block-start: 0;
62
44
  }
63
45
 
64
- /*
65
- Add the correct text decoration in Chrome, Edge, and Safari.
66
- */
46
+ /**
47
+ * 1. Add the correct box sizing in Firefox.
48
+ * 2. Correct the inheritance of border color in Firefox.
49
+ */
67
50
 
68
- abbr:where([title]) {
69
- -webkit-text-decoration: underline dotted;
70
- text-decoration: underline dotted;
51
+ :where(hr) {
52
+ box-sizing: content-box; /* 1 */
53
+ color: inherit; /* 2 */
54
+ height: 0; /* 1 */
71
55
  }
72
56
 
73
- /*
74
- Remove the default font size and weight for headings.
75
- */
76
-
77
- h1,
78
- h2,
79
- h3,
80
- h4,
81
- h5,
82
- h6 {
83
- font-size: inherit;
84
- font-weight: inherit;
85
- }
57
+ /* Text-level semantics
58
+ * ========================================================================== */
86
59
 
87
- /*
88
- Reset links to optimize for opt-in styling instead of opt-out.
89
- */
60
+ /**
61
+ * Add the correct text decoration in Safari.
62
+ */
90
63
 
91
- a {
92
- color: inherit;
93
- text-decoration: inherit;
64
+ :where(abbr[title]) {
65
+ text-decoration: underline;
66
+ -webkit-text-decoration: underline dotted;
67
+ text-decoration: underline dotted;
94
68
  }
95
69
 
96
- /*
97
- Add the correct font weight in Edge and Safari.
98
- */
70
+ /**
71
+ * Add the correct font weight in Chrome, Edge, and Safari.
72
+ */
99
73
 
100
- b,
101
- strong {
74
+ :where(b, strong) {
102
75
  font-weight: bolder;
103
76
  }
104
77
 
105
- /*
106
- 1. Use the user's configured `mono` font-family by default.
107
- 2. Use the user's configured `mono` font-feature-settings by default.
108
- 3. Use the user's configured `mono` font-variation-settings by default.
109
- 4. Correct the odd `em` font sizing in all browsers.
110
- */
111
-
112
- code,
113
- kbd,
114
- samp,
115
- pre {
116
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
117
- font-feature-settings: normal; /* 2 */
118
- font-variation-settings: normal; /* 3 */
119
- font-size: 1em; /* 4 */
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
+ */
82
+
83
+ :where(code, kbd, pre, samp) {
84
+ font-family: monospace, monospace; /* 1 */
85
+ font-size: 1em; /* 2 */
120
86
  }
121
87
 
122
- /*
123
- Add the correct font size in all browsers.
124
- */
88
+ /**
89
+ * Add the correct font size in all browsers.
90
+ */
125
91
 
126
- small {
92
+ :where(small) {
127
93
  font-size: 80%;
128
94
  }
129
95
 
130
- /*
131
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
132
- */
133
-
134
- sub,
135
- sup {
136
- font-size: 75%;
137
- line-height: 0;
138
- position: relative;
139
- vertical-align: baseline;
140
- }
96
+ /* Tabular data
97
+ * ========================================================================== */
141
98
 
142
- sub {
143
- bottom: -0.25em;
144
- }
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
+ */
145
103
 
146
- sup {
147
- top: -0.5em;
104
+ :where(table) {
105
+ border-color: currentColor; /* 1 */
106
+ text-indent: 0; /* 2 */
148
107
  }
149
108
 
150
- /*
151
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
152
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
153
- 3. Remove gaps between table borders by default.
154
- */
155
-
156
- table {
157
- text-indent: 0; /* 1 */
158
- border-color: inherit; /* 2 */
159
- border-collapse: collapse; /* 3 */
160
- }
109
+ /* Forms
110
+ * ========================================================================== */
161
111
 
162
- /*
163
- 1. Change the font styles in all browsers.
164
- 2. Remove the margin in Firefox and Safari.
165
- 3. Remove default padding in all browsers.
166
- */
167
-
168
- button,
169
- input,
170
- optgroup,
171
- select,
172
- textarea {
173
- font-family: inherit; /* 1 */
174
- font-feature-settings: inherit; /* 1 */
175
- font-variation-settings: inherit; /* 1 */
176
- font-size: 100%; /* 1 */
177
- font-weight: inherit; /* 1 */
178
- line-height: inherit; /* 1 */
179
- color: inherit; /* 1 */
180
- margin: 0; /* 2 */
181
- padding: 0; /* 3 */
112
+ /**
113
+ * Remove the margin on controls in Safari.
114
+ */
115
+
116
+ :where(button, input, select) {
117
+ margin: 0;
182
118
  }
183
119
 
184
- /*
185
- Remove the inheritance of text transform in Edge and Firefox.
186
- */
120
+ /**
121
+ * Remove the inheritance of text transform in Firefox.
122
+ */
187
123
 
188
- button,
189
- select {
124
+ :where(button) {
190
125
  text-transform: none;
191
126
  }
192
127
 
193
- /*
194
- 1. Correct the inability to style clickable types in iOS and Safari.
195
- 2. Remove default button styles.
196
- */
197
-
198
- button,
199
- [type='button'],
200
- [type='reset'],
201
- [type='submit'] {
202
- -webkit-appearance: button; /* 1 */
203
- background-color: transparent; /* 2 */
204
- background-image: none; /* 2 */
128
+ /**
129
+ * Correct the inability to style buttons in iOS and Safari.
130
+ */
131
+
132
+ :where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
133
+ -webkit-appearance: button;
205
134
  }
206
135
 
207
- /*
208
- Use the modern Firefox focus style for all focusable elements.
209
- */
136
+ /**
137
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
138
+ */
210
139
 
211
- :-moz-focusring {
212
- outline: auto;
140
+ :where(progress) {
141
+ vertical-align: baseline;
213
142
  }
214
143
 
215
- /*
216
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
217
- */
144
+ /**
145
+ * Remove the inheritance of text transform in Firefox.
146
+ */
218
147
 
219
- :-moz-ui-invalid {
220
- box-shadow: none;
148
+ :where(select) {
149
+ text-transform: none;
221
150
  }
222
151
 
223
- /*
224
- Add the correct vertical alignment in Chrome and Firefox.
225
- */
152
+ /**
153
+ * Remove the margin in Firefox and Safari.
154
+ */
226
155
 
227
- progress {
228
- vertical-align: baseline;
156
+ :where(textarea) {
157
+ margin: 0;
229
158
  }
230
159
 
231
- /*
232
- Correct the cursor style of increment and decrement buttons in Safari.
233
- */
160
+ /**
161
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
162
+ * 2. Correct the outline style in Safari.
163
+ */
164
+
165
+ :where(input[type="search" i]) {
166
+ -webkit-appearance: textfield; /* 1 */
167
+ outline-offset: -2px; /* 2 */
168
+ }
169
+
170
+ /**
171
+ * Correct the cursor style of increment and decrement buttons in Safari.
172
+ */
234
173
 
235
174
  ::-webkit-inner-spin-button,
236
175
  ::-webkit-outer-spin-button {
237
176
  height: auto;
238
177
  }
239
178
 
240
- /*
241
- 1. Correct the odd appearance in Chrome and Safari.
242
- 2. Correct the outline style in Safari.
243
- */
179
+ /**
180
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
181
+ */
244
182
 
245
- [type='search'] {
246
- -webkit-appearance: textfield; /* 1 */
247
- outline-offset: -2px; /* 2 */
183
+ ::-webkit-input-placeholder {
184
+ color: inherit;
185
+ opacity: 0.54;
248
186
  }
249
187
 
250
- /*
251
- Remove the inner padding in Chrome and Safari on macOS.
252
- */
188
+ /**
189
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
190
+ */
253
191
 
254
192
  ::-webkit-search-decoration {
255
193
  -webkit-appearance: none;
256
194
  }
257
195
 
258
- /*
259
- 1. Correct the inability to style clickable types in iOS and Safari.
260
- 2. Change font properties to `inherit` in Safari.
261
- */
196
+ /**
197
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
198
+ * 2. Change font properties to `inherit` in Safari.
199
+ */
262
200
 
263
201
  ::-webkit-file-upload-button {
264
202
  -webkit-appearance: button; /* 1 */
265
203
  font: inherit; /* 2 */
266
204
  }
267
205
 
268
- /*
269
- Add the correct display in Chrome and Safari.
270
- */
206
+ /**
207
+ * Remove the inner border and padding of focus outlines in Firefox.
208
+ */
271
209
 
272
- summary {
273
- display: list-item;
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;
274
213
  }
275
214
 
276
- /*
277
- Removes the default spacing and border for appropriate elements.
278
- */
279
-
280
- blockquote,
281
- dl,
282
- dd,
283
- h1,
284
- h2,
285
- h3,
286
- h4,
287
- h5,
288
- h6,
289
- hr,
290
- figure,
291
- p,
292
- pre {
293
- margin: 0;
294
- }
215
+ /**
216
+ * Restore the focus outline styles unset by the previous rule in Firefox.
217
+ */
295
218
 
296
- fieldset {
297
- margin: 0;
298
- padding: 0;
219
+ :where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
220
+ outline: 1px dotted ButtonText;
299
221
  }
300
222
 
301
- legend {
302
- padding: 0;
303
- }
223
+ /**
224
+ * Remove the additional :invalid styles in Firefox.
225
+ */
304
226
 
305
- ol,
306
- ul,
307
- menu {
308
- list-style: none;
309
- margin: 0;
310
- padding: 0;
227
+ :where(:-moz-ui-invalid) {
228
+ box-shadow: none;
311
229
  }
312
230
 
313
- /*
314
- Reset default styling for dialogs.
315
- */
316
- dialog {
317
- padding: 0;
318
- }
231
+ /* Interactive
232
+ * ========================================================================== */
319
233
 
320
234
  /*
321
- Prevent resizing textareas horizontally by default.
322
- */
235
+ * Add the correct styles in Safari.
236
+ */
237
+
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;
251
+ }
323
252
 
324
- textarea {
325
- resize: vertical;
253
+ :where(dialog:not([open])) {
254
+ display: none;
326
255
  }
327
256
 
328
257
  /*
329
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
330
- 2. Set the default placeholder color to the user's configured gray 400 color.
331
- */
258
+ * Add the correct display in all browsers.
259
+ */
332
260
 
333
- input::-moz-placeholder, textarea::-moz-placeholder {
334
- opacity: 1; /* 1 */
335
- color: #9ca3af; /* 2 */
261
+ :where(summary) {
262
+ display: list-item;
336
263
  }
337
264
 
338
- input::placeholder,
339
- textarea::placeholder {
340
- opacity: 1; /* 1 */
341
- color: #9ca3af; /* 2 */
342
- }
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
+ }
343
284
 
344
- /*
345
- Set the default cursor for buttons.
346
- */
285
+ table {
286
+ width: 100%;
287
+ border-collapse: collapse;
288
+ }
347
289
 
348
- button,
349
- [role="button"] {
350
- cursor: pointer;
351
- }
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
+ }
352
299
 
353
- /*
354
- Make sure disabled buttons don't get the pointer cursor.
355
- */
356
- :disabled {
357
- cursor: default;
358
- }
300
+ td > p {
301
+ padding: 0;
302
+ margin: 0;
303
+ }
359
304
 
360
- /*
361
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
362
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
363
- This can trigger a poorly considered lint error in some tools but is included by design.
364
- */
365
-
366
- img,
367
- svg,
368
- video,
369
- canvas,
370
- audio,
371
- iframe,
372
- embed,
373
- object {
374
- display: block; /* 1 */
375
- vertical-align: middle; /* 2 */
376
- }
305
+ th {
306
+ text-align: left;
307
+ }
308
+ /* Style table header */
309
+ th {
310
+ font-weight: bold;
311
+ /* background-color: #f2f2f2; */
312
+ }
377
313
 
378
- /*
379
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
380
- */
314
+ /* Style alternating rows */
315
+ tr:nth-child(even) {
316
+ /* background-color: #f9f9f9; */
317
+ }
381
318
 
382
- img,
383
- video {
384
- max-width: 100%;
385
- height: auto;
319
+ /* Add hover effect to rows */
320
+ tr:hover {
321
+ /* background-color: #e6e6e6; */
322
+ }
386
323
  }
387
324
 
388
- /* Make elements with the HTML hidden attribute stay hidden by default */
389
- [hidden] {
390
- display: none;
391
- }
392
- /** default styles for all components */
393
-
394
- *, ::before, ::after{
395
- --tw-border-spacing-x: 0;
396
- --tw-border-spacing-y: 0;
397
- --tw-translate-x: 0;
398
- --tw-translate-y: 0;
399
- --tw-rotate: 0;
400
- --tw-skew-x: 0;
401
- --tw-skew-y: 0;
402
- --tw-scale-x: 1;
403
- --tw-scale-y: 1;
404
- --tw-pan-x: ;
405
- --tw-pan-y: ;
406
- --tw-pinch-zoom: ;
407
- --tw-scroll-snap-strictness: proximity;
408
- --tw-gradient-from-position: ;
409
- --tw-gradient-via-position: ;
410
- --tw-gradient-to-position: ;
411
- --tw-ordinal: ;
412
- --tw-slashed-zero: ;
413
- --tw-numeric-figure: ;
414
- --tw-numeric-spacing: ;
415
- --tw-numeric-fraction: ;
416
- --tw-ring-inset: ;
417
- --tw-ring-offset-width: 0px;
418
- --tw-ring-offset-color: #fff;
419
- --tw-ring-color: rgb(59 130 246 / 0.5);
420
- --tw-ring-offset-shadow: 0 0 #0000;
421
- --tw-ring-shadow: 0 0 #0000;
422
- --tw-shadow: 0 0 #0000;
423
- --tw-shadow-colored: 0 0 #0000;
424
- --tw-blur: ;
425
- --tw-brightness: ;
426
- --tw-contrast: ;
427
- --tw-grayscale: ;
428
- --tw-hue-rotate: ;
429
- --tw-invert: ;
430
- --tw-saturate: ;
431
- --tw-sepia: ;
432
- --tw-drop-shadow: ;
433
- --tw-backdrop-blur: ;
434
- --tw-backdrop-brightness: ;
435
- --tw-backdrop-contrast: ;
436
- --tw-backdrop-grayscale: ;
437
- --tw-backdrop-hue-rotate: ;
438
- --tw-backdrop-invert: ;
439
- --tw-backdrop-opacity: ;
440
- --tw-backdrop-saturate: ;
441
- --tw-backdrop-sepia: ;
442
- }
325
+ @layer qti-base {
326
+ .qti-layout-row {
327
+ display: flex;
328
+ flex-wrap: wrap;
329
+ width: 100%;
330
+ gap: 2.1276595745%;
331
+ }
443
332
 
444
- ::backdrop{
445
- --tw-border-spacing-x: 0;
446
- --tw-border-spacing-y: 0;
447
- --tw-translate-x: 0;
448
- --tw-translate-y: 0;
449
- --tw-rotate: 0;
450
- --tw-skew-x: 0;
451
- --tw-skew-y: 0;
452
- --tw-scale-x: 1;
453
- --tw-scale-y: 1;
454
- --tw-pan-x: ;
455
- --tw-pan-y: ;
456
- --tw-pinch-zoom: ;
457
- --tw-scroll-snap-strictness: proximity;
458
- --tw-gradient-from-position: ;
459
- --tw-gradient-via-position: ;
460
- --tw-gradient-to-position: ;
461
- --tw-ordinal: ;
462
- --tw-slashed-zero: ;
463
- --tw-numeric-figure: ;
464
- --tw-numeric-spacing: ;
465
- --tw-numeric-fraction: ;
466
- --tw-ring-inset: ;
467
- --tw-ring-offset-width: 0px;
468
- --tw-ring-offset-color: #fff;
469
- --tw-ring-color: rgb(59 130 246 / 0.5);
470
- --tw-ring-offset-shadow: 0 0 #0000;
471
- --tw-ring-shadow: 0 0 #0000;
472
- --tw-shadow: 0 0 #0000;
473
- --tw-shadow-colored: 0 0 #0000;
474
- --tw-blur: ;
475
- --tw-brightness: ;
476
- --tw-contrast: ;
477
- --tw-grayscale: ;
478
- --tw-hue-rotate: ;
479
- --tw-invert: ;
480
- --tw-saturate: ;
481
- --tw-sepia: ;
482
- --tw-drop-shadow: ;
483
- --tw-backdrop-blur: ;
484
- --tw-backdrop-brightness: ;
485
- --tw-backdrop-contrast: ;
486
- --tw-backdrop-grayscale: ;
487
- --tw-backdrop-hue-rotate: ;
488
- --tw-backdrop-invert: ;
489
- --tw-backdrop-opacity: ;
490
- --tw-backdrop-saturate: ;
491
- --tw-backdrop-sepia: ;
492
- }
493
- /** The different components, you can choose only one */
494
- /* - button : .input-control-hidden qti-choice, qti-hotspot */
495
- /* - select : inline-choice */
496
- /* - check : qti-choice, qti-hotspot */
497
- /* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
498
- /* @apply select-none; */
499
- /* - text : text-entry and extended-text */
500
- /* - spot : gap-select-point, graphic-order, qti-graphic-associate */
501
- /* - drag : gap-match, match, order, associate */
502
- /* - drop : gap-match, match, order, associate */
503
- /** End components */
504
- /* hover, every element has a hover, except disabled( which overrides hover */
505
- /* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
506
- /* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
507
- /* readonly, overwrites cursor, hover background, outline for focus and ring */
508
- /* disabled, make gray state */
509
- /* drag in the drop, else the drag in the drop was black and not gray */
510
- /** Modifiers */
511
- /* PK: There was no utility to reset the ring-inset
512
- We use this for the drop container, where we want the ring to have an outset
513
- So the drag, with ring-inset, snugs neatly into the drop with ring-'outset'
514
- by unsetting the ring-inset */
515
- /* intext for elements which has to appear in text
516
- - intext : gap-match > qti-gap, hottext > hottext, select
517
- */
518
- /* small for elements which has to appear in text
519
- - intext : gap-match > qti-gap, hottext > hottext, select
520
- */
521
- /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
522
- /* PK: Tailwind theming file for all qti-components
523
- Uses tailwind components and utilities from the other files
524
-
525
- https://play.tailwindcss.com/OFThGk8CbR
526
- https://play.tailwindcss.com/CeHVrnwgXR
527
- https://play.tailwindcss.com/JOgoCf81JM
528
-
529
- You should in you project include modern-normalize.css
530
-
531
- Then we create tailwind components
532
- Then we consume these components in our qti-webcomponents
533
-
534
- outline: used for focus
535
- ring: used for border around the elements, can be active, its an inner ring, except for
536
- the dropping well, because that has to surround the drag with the inner ring
537
-
538
- There are 6 types
539
- - text : text-entry and extended-text
540
- - select : inline-choice
541
- - button : .input-control-hidden qti-choice, qti-hotspot
542
- - check : qti-choice, qti-hotspot
543
- - drag : gap-match, match, order, associate
544
- - drop : gap-match, match, order, associate
545
- - spot : gap-select-point, graphic-order, qti-graphic-associate
546
-
547
- trying to get the follower modifiers to work:
548
-
549
- - sm , for elements inside text
550
- - lg, , for large readable containers
551
- - in , inline in text
552
-
553
- taking into account cursors, select-none for some of the elements
554
- */
555
- /* FIXMEs
556
- Outline always on top, sometimes it slips under the hover background
557
- Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
558
- modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
559
- */
560
- /* @layer base, components, utilities, variants; */
561
- /* layout, dimensions, design */
562
- /* QTI Interactions */
563
- .qti-underline {
564
- text-decoration: underline;
565
- }
566
- .qti-align-left {
567
- text-align: left;
568
- }
569
- .qti-align-center {
570
- text-align: center;
571
- }
572
- .qti-align-right {
573
- text-align: right;
574
- }
575
- .qti-valign-top {
576
- vertical-align: top;
577
- }
578
- .qti-valign-middle {
579
- vertical-align: middle;
580
- }
581
- .qti-valign-baseline {
582
- vertical-align: baseline;
583
- }
584
- .qti-valign-bottom {
585
- vertical-align: bottom;
586
- }
587
- .qti-fullwidth {
588
- width: 100%;
333
+ .qti-layout-row [class*='qti-layout-col'] {
334
+ box-sizing: border-box;
335
+ }
336
+
337
+ .qti-layout-col1 {
338
+ width: 6.3829787234%;
339
+ }
340
+ .qti-layout-col2 {
341
+ width: 14.8936170213%;
342
+ }
343
+ .qti-layout-col3 {
344
+ width: 23.4042553191%;
345
+ }
346
+ .qti-layout-col4 {
347
+ width: 31.914893617%;
348
+ }
349
+ .qti-layout-col5 {
350
+ width: 40.4255319149%;
351
+ }
352
+ .qti-layout-col6 {
353
+ width: 48.9361702128%;
354
+ }
355
+ .qti-layout-col7 {
356
+ width: 57.4468085106%;
357
+ }
358
+ .qti-layout-col8 {
359
+ width: 65.9574468085%;
360
+ }
361
+ .qti-layout-col9 {
362
+ width: 74.4680851064%;
363
+ }
364
+ .qti-layout-col10 {
365
+ width: 82.9787234043%;
366
+ }
367
+ .qti-layout-col11 {
368
+ width: 91.4893617021%;
369
+ }
370
+ .qti-layout-col12 {
371
+ width: 100%;
372
+ }
373
+
374
+ .qti-layout-offset1 {
375
+ margin-left: 8.5106382979%;
376
+ }
377
+ .qti-layout-offset2 {
378
+ margin-left: 17.0212765957%;
379
+ }
380
+ .qti-layout-offset3 {
381
+ margin-left: 25.5319148936%;
382
+ }
383
+ .qti-layout-offset4 {
384
+ margin-left: 34.0425531915%;
385
+ }
386
+ .qti-layout-offset5 {
387
+ margin-left: 42.5531914894%;
388
+ }
389
+ .qti-layout-offset6 {
390
+ margin-left: 51.0638297872%;
391
+ }
392
+ .qti-layout-offset7 {
393
+ margin-left: 59.5744680851%;
394
+ }
395
+ .qti-layout-offset8 {
396
+ margin-left: 68.085106383%;
397
+ }
398
+ .qti-layout-offset9 {
399
+ margin-left: 76.5957446809%;
400
+ }
401
+ .qti-layout-offset10 {
402
+ margin-left: 85.1063829787%;
403
+ }
404
+ .qti-layout-offset11 {
405
+ margin-left: 93.6170212766%;
406
+ }
407
+ .qti-layout-offset12 {
408
+ margin-left: 102.1276595745%;
409
+ }
410
+
411
+ @media (max-width: 767px) {
412
+ [class*='qti-layout-col'] {
413
+ width: 100%;
414
+ }
415
+ }
589
416
  }
590
- .qti-hidden {
417
+
418
+ [view],
419
+ qti-outcome-declaration,
420
+ qti-response-declaration {
591
421
  display: none;
592
422
  }
593
- .qti-visually-hidden {
594
- position: fixed !important;
595
- overflow: hidden;
596
- width: 1px;
597
- height: 1px;
598
- border: 0;
599
- margin: -1px;
600
- clip: rect(1px 1px 1px 1px);
601
- }
602
- .qti-bordered {
603
- padding: 2px;
604
- border: 1px solid #888;
605
- }
606
- .qti-well{
607
- cursor: pointer;
608
- outline: 2px solid transparent;
609
- outline-offset: 2px;
610
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
611
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
612
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
613
- --tw-ring-inset: inset;
614
- --tw-ring-opacity: 1;
615
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
616
- display: inline-block;
617
- border-radius: 0.25rem;
618
- border-width: 1px;
619
- --tw-border-opacity: 1;
620
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
621
- --tw-bg-opacity: 1;
622
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
623
- padding-left: 0.75rem;
624
- padding-right: 0.75rem;
625
- padding-top: 0.5rem;
626
- padding-bottom: 0.5rem;
627
- --tw-text-opacity: 1;
628
- color: rgb(75 85 99 / var(--tw-text-opacity));
629
- }
630
- .qti-layout-row {
631
- display: flow-root;
632
- width: 100%;
633
- }
634
- .qti-layout-row [class*='qti-layout-col'] {
635
- margin-left: 2.1276595745%;
636
- float: left;
637
- }
638
- .qti-layout-row [class*='qti-layout-col']:first-child {
639
- margin-left: 0;
640
- }
641
- .qti-layout-row .qti-layout-col12 {
642
- width: 100%;
643
- }
644
- .qti-layout-row .qti-layout-offset12 {
645
- margin-left: 104.2553191489%;
646
- }
647
- .qti-layout-row .qti-layout-offset12:first-child {
648
- margin-left: 102.1276595745%;
649
- }
650
- .qti-layout-row .qti-layout-col11 {
651
- width: 91.4893617021%;
652
- }
653
- .qti-layout-row .qti-layout-offset11 {
654
- margin-left: 95.7446808511%;
655
- }
656
- .qti-layout-row .qti-layout-offset11:first-child {
657
- margin-left: 93.6170212766%;
658
- }
659
- .qti-layout-row .qti-layout-col10 {
660
- width: 82.9787234043%;
661
- }
662
- .qti-layout-row .qti-layout-offset10 {
663
- margin-left: 87.2340425532%;
664
- }
665
- .qti-layout-row .qti-layout-offset10:first-child {
666
- margin-left: 85.1063829787%;
667
- }
668
- .qti-layout-row .qti-layout-col9 {
669
- width: 74.4680851064%;
670
- }
671
- .qti-layout-row .qti-layout-offset9 {
672
- margin-left: 78.7234042553%;
673
- }
674
- .qti-layout-row .qti-layout-offset9:first-child {
675
- margin-left: 76.5957446809%;
676
- }
677
- .qti-layout-row .qti-layout-col8 {
678
- width: 65.9574468085%;
679
- }
680
- .qti-layout-row .qti-layout-offset8 {
681
- margin-left: 70.2127659574%;
682
- }
683
- .qti-layout-row .qti-layout-offset8:first-child {
684
- margin-left: 68.085106383%;
685
- }
686
- .qti-layout-row .qti-layout-col7 {
687
- width: 57.4468085106%;
688
- }
689
- .qti-layout-row .qti-layout-offset7 {
690
- margin-left: 61.7021276596%;
691
- }
692
- .qti-layout-row .qti-layout-offset7:first-child {
693
- margin-left: 59.5744680851%;
694
- }
695
- .qti-layout-row .qti-layout-col6 {
696
- width: 48.9361702128%;
697
- }
698
- .qti-layout-row .qti-layout-offset6 {
699
- margin-left: 53.1914893617%;
700
- }
701
- .qti-layout-row .qti-layout-offset6:first-child {
702
- margin-left: 51.0638297872%;
703
- }
704
- .qti-layout-row .qti-layout-col5 {
705
- width: 40.4255319149%;
706
- }
707
- .qti-layout-row .qti-layout-offset5 {
708
- margin-left: 44.6808510638%;
709
- }
710
- .qti-layout-row .qti-layout-offset5:first-child {
711
- margin-left: 42.5531914894%;
712
- }
713
- .qti-layout-row .qti-layout-col4 {
714
- width: 31.914893617%;
715
- }
716
- .qti-layout-row .qti-layout-offset4 {
717
- margin-left: 36.170212766%;
718
- }
719
- .qti-layout-row .qti-layout-offset4:first-child {
720
- margin-left: 34.0425531915%;
721
- }
722
- .qti-layout-row .qti-layout-col3 {
723
- width: 23.4042553191%;
724
- }
725
- .qti-layout-row .qti-layout-offset3 {
726
- margin-left: 27.6595744681%;
727
- }
728
- .qti-layout-row .qti-layout-offset3:first-child {
729
- margin-left: 25.5319148936%;
730
- }
731
- .qti-layout-row .qti-layout-col2 {
732
- width: 14.8936170213%;
733
- }
734
- .qti-layout-row .qti-layout-offset2 {
735
- margin-left: 19.1489361702%;
736
- }
737
- .qti-layout-row .qti-layout-offset2:first-child {
738
- margin-left: 17.0212765957%;
739
- }
740
- .qti-layout-row .qti-layout-col1 {
741
- width: 6.3829787234%;
742
- }
743
- .qti-layout-row .qti-layout-offset1 {
744
- margin-left: 10.6382978723%;
745
- }
746
- .qti-layout-row .qti-layout-offset1:first-child {
747
- margin-left: 8.5106382979%;
748
- }
749
- /* .qti-input-width-1 {
750
- width: 1ch;
751
- min-width: 1ch;
752
- }
753
- .qti-input-width-2 {
754
- width: 2ch;
755
- min-width: 2ch;
756
- }
757
- .qti-input-width-3 {
758
- width: 3ch;
759
- min-width: 3ch;
760
- }
761
- .qti-input-width-4 {
762
- width: 4ch;
763
- min-width: 4ch;
764
- }
765
- .qti-input-width-6 {
766
- width: 6ch;
767
- min-width: 6ch;
768
- }
769
- .qti-input-width-10 {
770
- width: 10ch;
771
- min-width: 10ch;
772
- }
773
- .qti-input-width-15 {
774
- width: 15ch;
775
- min-width: 15ch;
776
- }
777
- .qti-input-width-20 {
778
- width: 20ch;
779
- min-width: 20ch;
780
- }
781
- .qti-input-width-72 {
782
- width: 72ch;
783
- min-width: 72ch;
784
- } */
785
- qti-choice-interaction{
786
- margin-top: 0.5rem;
787
- margin-bottom: 0.5rem;
788
- gap: 0.5rem;
789
- }
790
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
791
- cursor: pointer;
792
- border-radius: 0.375rem;
793
- outline: 2px solid transparent;
794
- outline-offset: 2px;
795
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
796
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
797
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
798
- --tw-ring-inset: inset;
799
- --tw-ring-opacity: 1;
800
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
801
- padding-left: 0.75rem;
802
- padding-right: 0.75rem;
803
- padding-top: 0.5rem;
804
- padding-bottom: 0.5rem;
805
- font-weight: 600;
806
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
807
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
808
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
809
- /* @apply select-none; */
810
- }
811
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
812
- --tw-bg-opacity: 1;
813
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
814
- }
815
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
816
- outline-width: 2px;
817
- outline-color: #93c5fd;
818
- }
819
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
820
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
821
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
822
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
823
- --tw-ring-opacity: 1;
824
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
825
- }
826
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
827
- cursor: not-allowed;
828
- --tw-bg-opacity: 1;
829
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
830
- --tw-text-opacity: 1;
831
- color: rgb(107 114 128 / var(--tw-text-opacity));
832
- --tw-shadow: 0 0 #0000;
833
- --tw-shadow-colored: 0 0 #0000;
834
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
835
- --tw-ring-opacity: 1;
836
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
837
- }
838
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
839
- --tw-text-opacity: 1 !important;
840
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
841
- }
842
- qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
843
- cursor: pointer;
844
- --tw-bg-opacity: 1;
845
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
846
- --tw-shadow: 0 0 #0000;
847
- --tw-shadow-colored: 0 0 #0000;
848
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
849
- outline-width: 0px;
850
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
851
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
852
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
853
- }
854
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
855
- cursor: pointer;
856
- border-radius: 0.375rem;
857
- outline: 2px solid transparent;
858
- outline-offset: 2px;
859
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
860
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
861
- --tw-ring-inset: inset;
862
- --tw-ring-opacity: 1;
863
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
864
- display: flex;
865
- align-items: center;
866
- gap: 0.5rem;
867
- padding-left: 0.25rem;
868
- padding-right: 0.25rem;
869
- padding-top: 0.125rem;
870
- padding-bottom: 0.125rem;
871
- --tw-shadow: 0 0 #0000;
872
- --tw-shadow-colored: 0 0 #0000;
873
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
874
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
875
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
876
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
423
+
424
+ [view].show {
425
+ display: block;
877
426
  }
878
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(cha) {
879
- /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
880
- height: 66.666667%;
881
- width: 66.666667%;
427
+
428
+ /* components */
429
+
430
+ @layer qti-components {
431
+ qti-choice-interaction {
432
+ &.qti-input-control-hidden {
433
+ & qti-simple-choice {
434
+ &::part(ch) {display:none !important;
435
+ }
436
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
437
+ }
438
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
439
+ }
440
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
441
+ }padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px
442
+ }
443
+ & qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
444
+ & qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
882
445
  }
883
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
884
- display: flex;
885
- height: 1.25rem;
886
- width: 1.25rem;
887
- flex-shrink: 0;
888
- align-items: center;
889
- justify-content: center;
890
- border-radius: 9999px;
891
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
892
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
893
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
894
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
895
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
896
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
897
- --tw-ring-inset: inset;
898
- --tw-ring-opacity: 1;
899
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
900
- }
901
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
902
- border-radius: 9999px;
903
- --tw-bg-opacity: 1;
904
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
905
- }
906
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
907
- display: flex;
908
- height: 1.25rem;
909
- width: 1.25rem;
910
- flex-shrink: 0;
911
- align-items: center;
912
- justify-content: center;
913
- border-radius: 0.25rem;
914
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
915
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
916
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
917
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
918
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
919
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
920
- --tw-ring-inset: inset;
921
- --tw-ring-opacity: 1;
922
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
923
- }
924
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox'][aria-checked='true']::part(cha){
925
- --tw-bg-opacity: 1;
926
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
927
- -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");
928
- }
929
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
930
- --tw-bg-opacity: 1;
931
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
932
- }
933
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
934
- outline-width: 2px;
935
- outline-color: #93c5fd;
936
- }
937
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
938
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
939
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
940
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
941
- --tw-ring-opacity: 1;
942
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
943
- }
944
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
945
- cursor: not-allowed;
946
- --tw-bg-opacity: 1;
947
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
948
- --tw-text-opacity: 1;
949
- color: rgb(107 114 128 / var(--tw-text-opacity));
950
- --tw-shadow: 0 0 #0000;
951
- --tw-shadow-colored: 0 0 #0000;
952
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
953
- --tw-ring-opacity: 1;
954
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
955
- }
956
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
957
- --tw-text-opacity: 1 !important;
958
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
959
- }
960
- qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
961
- cursor: pointer;
962
- --tw-bg-opacity: 1;
963
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
964
- --tw-shadow: 0 0 #0000;
965
- --tw-shadow-colored: 0 0 #0000;
966
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
967
- outline-width: 0px;
968
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
969
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
970
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
971
- }
972
- qti-choice-interaction qti-simple-choice[data-correct-response='true'] {
973
- /* @apply bg-green-100 text-green-600; */
446
+
447
+ &:not(.qti-input-control-hidden) {
448
+ & qti-simple-choice {
449
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
450
+ }
451
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
452
+ }
453
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
454
+ }
455
+
456
+ &::part(cha) {
457
+ /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
458
+ }
459
+ &[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
460
+ }
461
+ &[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
462
+ }
463
+ &[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
464
+ }
465
+ &[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-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");
466
+ }padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center
467
+ }
468
+ & qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
469
+ & qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
974
470
  }
975
- qti-choice-interaction qti-simple-choice[data-correct-response='true']::after {
976
- content: '\02714';
977
- --tw-text-opacity: 1;
978
- color: rgb(22 163 74 / var(--tw-text-opacity));
471
+
472
+ & qti-simple-choice {
473
+ &[data-correct-response='true'] {
474
+ &::after {
475
+ content: '\02714';--qti-text-opacity:1;color:rgb(22 163 74 / var(--qti-text-opacity));
476
+ }
979
477
  }
980
- qti-choice-interaction qti-simple-choice > p{
981
- margin: 0px;
982
- padding: 0px;
983
- }
984
- qti-text-entry-interaction{
985
- margin-top: 0.5rem;
986
- margin-bottom: 0.5rem;
987
- }
988
- qti-text-entry-interaction::part(input){
989
- cursor: pointer;
990
- outline: 2px solid transparent;
991
- outline-offset: 2px;
992
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
993
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
994
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
995
- --tw-ring-inset: inset;
996
- --tw-ring-opacity: 1;
997
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
998
- cursor: text;
999
- border-radius: 0.125rem;
1000
- border-width: 0px;
1001
- padding: 0.75rem;
1002
- --tw-text-opacity: 1;
1003
- color: rgb(75 85 99 / var(--tw-text-opacity));
1004
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1005
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1006
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1007
- }
1008
- qti-text-entry-interaction::part(input):hover{
1009
- --tw-bg-opacity: 1;
1010
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1011
- }
1012
- qti-text-entry-interaction::part(input):focus{
1013
- outline-width: 2px;
1014
- outline-color: #93c5fd;
1015
- }
1016
- qti-extended-text-interaction{
1017
- margin-top: 0.5rem;
1018
- margin-bottom: 0.5rem;
1019
- }
1020
- qti-extended-text-interaction::part(textarea){
1021
- cursor: pointer;
1022
- outline: 2px solid transparent;
1023
- outline-offset: 2px;
1024
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1025
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1026
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1027
- --tw-ring-inset: inset;
1028
- --tw-ring-opacity: 1;
1029
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1030
- cursor: text;
1031
- border-radius: 0.125rem;
1032
- border-width: 0px;
1033
- padding: 0.75rem;
1034
- --tw-text-opacity: 1;
1035
- color: rgb(75 85 99 / var(--tw-text-opacity));
1036
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1037
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1038
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1039
- }
1040
- qti-extended-text-interaction::part(textarea):hover{
1041
- --tw-bg-opacity: 1;
1042
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1043
- }
1044
- qti-extended-text-interaction::part(textarea):focus{
1045
- outline-width: 2px;
1046
- outline-color: #93c5fd;
1047
- }
1048
- qti-gap-match-interaction{
1049
- margin-top: 0.5rem;
1050
- margin-bottom: 0.5rem;
1051
- line-height: 2rem;
1052
- }
1053
- qti-gap-match-interaction qti-gap-text{
1054
- cursor: pointer;
1055
- border-radius: 0.375rem;
1056
- outline: 2px solid transparent;
1057
- outline-offset: 2px;
1058
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1059
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1060
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1061
- --tw-ring-inset: inset;
1062
- --tw-ring-opacity: 1;
1063
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1064
- display: inline-block;
1065
- cursor: grab;
1066
- --tw-bg-opacity: 1;
1067
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1068
- padding-top: 0.25rem;
1069
- padding-bottom: 0.25rem;
1070
- font-weight: 600;
1071
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1072
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1073
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1074
- /* @apply select-none; */
1075
- background-image: radial-gradient(
1076
- circle at center,
1077
- rgba(0, 0, 0, 0.1) 0,
1078
- rgb(0, 0, 0, 0.1) 2px,
1079
- white 2px,
1080
- white 100%
1081
- );
1082
- background-repeat: repeat-y;
1083
- background-position: left 2px;
1084
- background-size: 14px 8px;
1085
- padding-left: 0.75rem;
1086
- padding-right: 0.5rem;
1087
- line-height: 1.5;
1088
- }
1089
- qti-gap-match-interaction qti-gap-text:hover{
1090
- --tw-bg-opacity: 1;
1091
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1092
- }
1093
- qti-gap-match-interaction qti-gap-text:focus{
1094
- outline-width: 2px;
1095
- outline-color: #93c5fd;
1096
- }
1097
- qti-gap-match-interaction qti-gap{
1098
- cursor: pointer;
1099
- border-radius: 0.375rem;
1100
- outline: 2px solid transparent;
1101
- outline-offset: 2px;
1102
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1103
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1104
- --tw-ring-inset: inset;
1105
- position: relative;
1106
- --tw-bg-opacity: 1;
1107
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1108
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1109
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1110
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1111
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1112
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1113
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1114
- --tw-ring-opacity: 1;
1115
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1116
- --tw-ring-offset-width: 1px;
1117
- --tw-ring-inset: unset;
1118
- display: inline-flex;
1119
- line-height: 1.5;
1120
- }
1121
- qti-gap-match-interaction qti-gap:hover{
1122
- --tw-bg-opacity: 1;
1123
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1124
- }
1125
- qti-gap-match-interaction qti-gap:focus{
1126
- outline-width: 2px;
1127
- outline-color: #93c5fd;
1128
- }
1129
- qti-gap-match-interaction qti-gap{
1130
- width: 8rem;
1131
- }
1132
- /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
1133
- qti-gap-match-interaction qti-gap:empty:after {
1134
- content: '\0000a0'; /* when empty, put a space in it */
1135
478
  }
1136
- qti-gap-match-interaction qti-gap:not(:empty){
1137
- display: inline-flex;
1138
- width: auto;
1139
- padding: 0px;
1140
- --tw-shadow: 0 0 #0000;
1141
- --tw-shadow-colored: 0 0 #0000;
1142
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1143
- }
1144
- qti-gap-match-interaction qti-gap:not(:empty) > *{
1145
- flex: 1 1 0%;
1146
- --tw-rotate: 0deg;
1147
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1148
- --tw-shadow: 0 0 #0000;
1149
- --tw-shadow-colored: 0 0 #0000;
1150
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1151
- --tw-ring-opacity: 1;
1152
- --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
1153
- }
1154
- qti-hotspot-interaction{
1155
- margin-top: 0.5rem;
1156
- margin-bottom: 0.5rem;
1157
- }
1158
- qti-hotspot-interaction qti-hotspot-choice:hover{
1159
- background-color: rgb(219 234 254 / var(--tw-bg-opacity));
1160
- --tw-bg-opacity: 0.3;
1161
- }
1162
- qti-hotspot-interaction qti-hotspot-choice {
1163
-
1164
- /* &::after {
1165
- content: '';
1166
- @apply absolute top-0 block origin-center bg-white;
1167
- height: 95%;
1168
- width: 95%;
1169
- clip-path: inherit;
1170
- } */
1171
- }
1172
- qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
1173
- cursor: pointer;
1174
- border-radius: 0.375rem;
1175
- outline: 2px solid transparent;
1176
- outline-offset: 2px;
1177
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1178
- --tw-ring-inset: inset;
1179
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1180
- height: 100%;
1181
- width: 100%;
1182
- background-color: transparent;
1183
- padding: 0px;
1184
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1185
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1186
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1187
- --tw-ring-opacity: 1;
1188
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1189
- border-radius: 9999px;
1190
- }
1191
- qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover{
1192
- --tw-ring-opacity: 1;
1193
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
1194
- }
1195
- qti-hotspot-interaction qti-hotspot-choice[shape='circle']:focus{
1196
- outline-width: 2px;
1197
- outline-color: #93c5fd;
1198
- }
1199
- qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
1200
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1201
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1202
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1203
- --tw-ring-opacity: 1;
1204
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1205
- }
1206
- qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]{
1207
- cursor: not-allowed;
1208
- --tw-bg-opacity: 1;
1209
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1210
- --tw-text-opacity: 1;
1211
- color: rgb(107 114 128 / var(--tw-text-opacity));
1212
- --tw-shadow: 0 0 #0000;
1213
- --tw-shadow-colored: 0 0 #0000;
1214
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1215
- --tw-ring-opacity: 1;
1216
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1217
- }
1218
- qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > *{
1219
- --tw-text-opacity: 1 !important;
1220
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1221
- }
1222
- qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]{
1223
- cursor: pointer;
1224
- --tw-bg-opacity: 1;
1225
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1226
- --tw-shadow: 0 0 #0000;
1227
- --tw-shadow-colored: 0 0 #0000;
1228
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1229
- outline-width: 0px;
1230
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1231
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1232
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1233
- }
1234
- qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
1235
- cursor: pointer;
1236
- border-radius: 0.375rem;
1237
- outline: 2px solid transparent;
1238
- outline-offset: 2px;
1239
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1240
- --tw-ring-inset: inset;
1241
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1242
- height: 100%;
1243
- width: 100%;
1244
- background-color: transparent;
1245
- padding: 0px;
1246
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1247
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1248
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1249
- --tw-ring-opacity: 1;
1250
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1251
- }
1252
- qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover{
1253
- --tw-ring-opacity: 1;
1254
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
1255
- }
1256
- qti-hotspot-interaction qti-hotspot-choice[shape='rect']:focus{
1257
- outline-width: 2px;
1258
- outline-color: #93c5fd;
1259
- }
1260
- qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
1261
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1262
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1263
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1264
- --tw-ring-opacity: 1;
1265
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1266
- }
1267
- qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
1268
- cursor: not-allowed;
1269
- --tw-bg-opacity: 1;
1270
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1271
- --tw-text-opacity: 1;
1272
- color: rgb(107 114 128 / var(--tw-text-opacity));
1273
- --tw-shadow: 0 0 #0000;
1274
- --tw-shadow-colored: 0 0 #0000;
1275
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1276
- --tw-ring-opacity: 1;
1277
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1278
- }
1279
- qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > *{
1280
- --tw-text-opacity: 1 !important;
1281
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1282
- }
1283
- qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
1284
- cursor: pointer;
1285
- --tw-bg-opacity: 1;
1286
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1287
- --tw-shadow: 0 0 #0000;
1288
- --tw-shadow-colored: 0 0 #0000;
1289
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1290
- outline-width: 0px;
1291
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1292
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1293
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1294
- }
1295
- qti-hotspot-interaction qti-hotspot-choice[shape='poly']:hover{
1296
- --tw-bg-opacity: 1;
1297
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1298
- }
1299
- qti-hotspot-interaction qti-hotspot-choice[shape='poly']:focus{
1300
- outline-width: 2px;
1301
- outline-color: #93c5fd;
1302
- }
1303
- qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
1304
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1305
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1306
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1307
- --tw-ring-opacity: 1;
1308
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1309
- }
1310
- qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
1311
- cursor: not-allowed;
1312
- --tw-bg-opacity: 1;
1313
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1314
- --tw-text-opacity: 1;
1315
- color: rgb(107 114 128 / var(--tw-text-opacity));
1316
- --tw-shadow: 0 0 #0000;
1317
- --tw-shadow-colored: 0 0 #0000;
1318
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1319
- --tw-ring-opacity: 1;
1320
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1321
- }
1322
- qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > *{
1323
- --tw-text-opacity: 1 !important;
1324
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1325
- }
1326
- qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
1327
- cursor: pointer;
1328
- --tw-bg-opacity: 1;
1329
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1330
- --tw-shadow: 0 0 #0000;
1331
- --tw-shadow-colored: 0 0 #0000;
1332
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1333
- outline-width: 0px;
1334
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1335
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1336
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1337
- }
1338
- qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked='true']{
1339
- --tw-bg-opacity: 1;
1340
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1341
- }
1342
- qti-hottext-interaction{
1343
- margin-top: 0.5rem;
1344
- margin-bottom: 0.5rem;
1345
- }
1346
- qti-hottext-interaction.qti-input-control-hidden qti-hottext{
1347
- cursor: pointer;
1348
- border-radius: 0.375rem;
1349
- outline: 2px solid transparent;
1350
- outline-offset: 2px;
1351
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1352
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1353
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1354
- --tw-ring-inset: inset;
1355
- --tw-ring-opacity: 1;
1356
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1357
- padding-left: 0.75rem;
1358
- padding-right: 0.75rem;
1359
- padding-top: 0.5rem;
1360
- padding-bottom: 0.5rem;
1361
- font-weight: 600;
1362
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1363
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1364
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1365
- /* @apply select-none; */
1366
- display: inline-flex;
1367
-
1368
- /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
1369
- /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
1370
- }
1371
- qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
1372
- --tw-bg-opacity: 1;
1373
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1374
- }
1375
- qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
1376
- outline-width: 2px;
1377
- outline-color: #93c5fd;
1378
- }
1379
- qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
1380
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1381
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1382
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1383
- --tw-ring-opacity: 1;
1384
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1385
- }
1386
- qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
1387
- cursor: not-allowed;
1388
- --tw-bg-opacity: 1;
1389
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1390
- --tw-text-opacity: 1;
1391
- color: rgb(107 114 128 / var(--tw-text-opacity));
1392
- --tw-shadow: 0 0 #0000;
1393
- --tw-shadow-colored: 0 0 #0000;
1394
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1395
- --tw-ring-opacity: 1;
1396
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1397
- }
1398
- qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
1399
- --tw-text-opacity: 1 !important;
1400
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1401
- }
1402
- qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
1403
- cursor: pointer;
1404
- --tw-bg-opacity: 1;
1405
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1406
- --tw-shadow: 0 0 #0000;
1407
- --tw-shadow-colored: 0 0 #0000;
1408
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1409
- outline-width: 0px;
1410
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1411
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1412
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1413
- }
1414
- qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
1415
- display: none !important;
1416
- }
1417
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
1418
- cursor: pointer;
1419
- border-radius: 0.375rem;
1420
- outline: 2px solid transparent;
1421
- outline-offset: 2px;
1422
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1423
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1424
- --tw-ring-inset: inset;
1425
- --tw-ring-opacity: 1;
1426
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1427
- display: flex;
1428
- align-items: center;
1429
- gap: 0.5rem;
1430
- padding-left: 0.25rem;
1431
- padding-right: 0.25rem;
1432
- padding-top: 0.125rem;
1433
- padding-bottom: 0.125rem;
1434
- --tw-shadow: 0 0 #0000;
1435
- --tw-shadow-colored: 0 0 #0000;
1436
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1437
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1438
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1439
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1440
- }
1441
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
1442
- /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
1443
- height: 66.666667%;
1444
- width: 66.666667%;
479
+
480
+ & qti-simple-choice > p {padding:0;margin:0;
1445
481
  }
1446
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
1447
- display: flex;
1448
- height: 1.25rem;
1449
- width: 1.25rem;
1450
- flex-shrink: 0;
1451
- align-items: center;
1452
- justify-content: center;
1453
- border-radius: 9999px;
1454
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1455
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1456
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1457
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1458
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1459
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1460
- --tw-ring-inset: inset;
1461
- --tw-ring-opacity: 1;
1462
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1463
- }
1464
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
1465
- border-radius: 9999px;
1466
- --tw-bg-opacity: 1;
1467
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1468
- }
1469
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
1470
- display: flex;
1471
- height: 1.25rem;
1472
- width: 1.25rem;
1473
- flex-shrink: 0;
1474
- align-items: center;
1475
- justify-content: center;
1476
- border-radius: 0.25rem;
1477
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1478
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1479
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1480
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1481
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1482
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1483
- --tw-ring-inset: inset;
1484
- --tw-ring-opacity: 1;
1485
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1486
- }
1487
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox'][aria-checked='true']::part(cha){
1488
- --tw-bg-opacity: 1;
1489
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1490
- -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");
1491
- }
1492
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
1493
- display: inline-flex;
482
+ }
483
+
484
+ qti-text-entry-interaction {
485
+ &::part(input) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
486
+ }
487
+ &::part(input):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
488
+ &::part(input):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
489
+ }
1494
490
 
1495
- /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
491
+ qti-extended-text-interaction {
492
+ &::part(textarea) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
493
+ }
494
+ &::part(textarea):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
495
+ &::part(textarea):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
496
+ }
1496
497
 
1497
- gap: 0.125rem;
498
+ qti-gap-match-interaction {
499
+ & qti-gap-text {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
500
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
501
+ background-repeat: repeat-y;
502
+ background-position: left 2px;
503
+ background-size: 14px 8px;
504
+ }
505
+ & qti-gap-text:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
506
+ & qti-gap-text:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
507
+ & qti-gap { /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
508
+ &:empty:after {
509
+ content: '\0000a0'; /* when empty, put a space in it */
510
+ }
511
+ &:not(:empty) {padding:0;display:inline-flex;width:auto;
512
+ }
513
+ &:not(:empty) > * {--qti-ring-opacity:1;--qti-ring-color:rgb(229 231 235 / var(--qti-ring-opacity));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));
514
+ }width:8rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:inline-flex
515
+ }
516
+ & qti-gap:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
517
+ & qti-gap:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
518
+ }
1498
519
 
1499
- outline-offset: 0px;
520
+ qti-hotspot-interaction {
521
+ & qti-hotspot-choice {
522
+ &[shape='circle'] {
523
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
524
+ }
525
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
526
+ }
527
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
528
+ }padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px;border-radius:9999px
529
+ }
530
+ &[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
531
+ &[shape='rect'] {
532
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
533
+ }
534
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
535
+ }
536
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
537
+ }padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
538
+ }
539
+ &[shape="rect"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
540
+ &[shape='poly'] {
541
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
542
+ }
543
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
544
+ }
545
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
546
+ }
547
+ }
548
+ &[shape="poly"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
549
+ &[shape="poly"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
550
+ }
551
+ & qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
552
+ }
1500
553
 
1501
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
554
+ qti-hottext-interaction {
555
+ &.qti-input-control-hidden {
556
+ qti-hottext {
557
+ &::part(ch) {display:none !important;
558
+ }
559
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
560
+ }
561
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
562
+ }
563
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
564
+ }padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px;display:inline-flex
565
+ }
566
+ qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
567
+ qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
568
+ }
1502
569
 
1503
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
570
+ &:not(.qti-input-control-hidden),
571
+ &:not(.qti-unselected-hidden) {
572
+ qti-hottext {
573
+ &::part(cha) {
574
+ /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
575
+ }
576
+ &[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
577
+ }
578
+ &[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
579
+ }
580
+ &[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
581
+ }
582
+ &[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-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");
583
+ }padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center;display:inline-flex
584
+ }
585
+ qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
586
+ qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
587
+ }
1504
588
 
1505
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1506
- }
1507
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
1508
- height: 1rem !important;
1509
- width: 1rem !important;
1510
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1511
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1512
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1513
- }
1514
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
1515
- --tw-bg-opacity: 1;
1516
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1517
- }
1518
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
1519
- outline-width: 2px;
1520
- outline-color: #93c5fd;
1521
- }
1522
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
1523
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1524
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1525
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1526
- --tw-ring-opacity: 1;
1527
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1528
- }
1529
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
1530
- cursor: not-allowed;
1531
- --tw-bg-opacity: 1;
1532
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1533
- --tw-text-opacity: 1;
1534
- color: rgb(107 114 128 / var(--tw-text-opacity));
1535
- --tw-shadow: 0 0 #0000;
1536
- --tw-shadow-colored: 0 0 #0000;
1537
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1538
- --tw-ring-opacity: 1;
1539
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1540
- }
1541
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
1542
- --tw-text-opacity: 1 !important;
1543
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1544
- }
1545
- qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
1546
- cursor: pointer;
1547
- --tw-bg-opacity: 1;
1548
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1549
- --tw-shadow: 0 0 #0000;
1550
- --tw-shadow-colored: 0 0 #0000;
1551
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1552
- outline-width: 0px;
1553
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1554
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1555
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1556
- }
1557
- qti-inline-choice-interaction::part(select){
1558
- cursor: pointer;
1559
- border-radius: 0.375rem;
1560
- outline: 2px solid transparent;
1561
- outline-offset: 2px;
1562
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1563
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1564
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1565
- --tw-ring-inset: inset;
1566
- --tw-ring-opacity: 1;
1567
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1568
- position: relative;
1569
- -webkit-appearance: none;
1570
- -moz-appearance: none;
1571
- appearance: none;
1572
- padding-left: 0.75rem;
1573
- padding-top: 0.5rem;
1574
- padding-bottom: 0.5rem;
1575
- padding-right: 1.75rem;
1576
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1577
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1578
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1579
- 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")
1580
- no-repeat center right 6px;
1581
- }
1582
- qti-inline-choice-interaction::part(select):hover{
1583
- --tw-bg-opacity: 1;
1584
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1585
- }
1586
- qti-inline-choice-interaction::part(select):focus{
1587
- outline-width: 2px;
1588
- outline-color: #93c5fd;
1589
- }
1590
- qti-inline-choice-interaction::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
589
+ &.qti-unselected-hidden {
590
+ qti-hottext {
591
+ &::part(ch) {display:none !important;
592
+ }
593
+ &[aria-checked='true'] {--qti-bg-opacity:1;background-color:rgb(191 219 254 / var(--qti-bg-opacity));
594
+ }
595
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
596
+ }
597
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
598
+ }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;display:inline-flex;cursor:pointer
599
+ }
600
+ 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;}
601
+ qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
602
+ }
1591
603
  }
1592
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
1593
- display: flex;
1594
- flex-wrap: wrap;
1595
- gap: 0.5rem;
1596
- padding-bottom: 1rem;
1597
- }
1598
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
1599
- cursor: pointer;
1600
- border-radius: 0.375rem;
1601
- outline: 2px solid transparent;
1602
- outline-offset: 2px;
1603
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1604
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1605
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1606
- --tw-ring-inset: inset;
1607
- --tw-ring-opacity: 1;
1608
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1609
- display: inline-block;
1610
- cursor: grab;
1611
- --tw-bg-opacity: 1;
1612
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1613
- font-weight: 600;
1614
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1615
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1616
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1617
- /* @apply select-none; */
1618
- background-image: radial-gradient(
1619
- circle at center,
1620
- rgba(0, 0, 0, 0.1) 0,
1621
- rgb(0, 0, 0, 0.1) 2px,
1622
- white 2px,
1623
- white 100%
1624
- );
1625
- background-repeat: repeat-y;
1626
- background-position: left 2px;
1627
- background-size: 14px 8px;
1628
- padding-top: 0.5rem;
1629
- padding-bottom: 0.5rem;
1630
- padding-left: 1rem;
1631
- padding-right: 0.75rem;
1632
- }
1633
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
1634
- --tw-bg-opacity: 1;
1635
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1636
- }
1637
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
1638
- outline-width: 2px;
1639
- outline-color: #93c5fd;
1640
- }
1641
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
1642
- display: grid;
1643
- grid-auto-columns: minmax(0, 1fr);
1644
- grid-auto-flow: column;
1645
- gap: 0.5rem;
1646
- }
1647
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
1648
- cursor: pointer;
1649
- border-radius: 0.375rem;
1650
- outline: 2px solid transparent;
1651
- outline-offset: 2px;
1652
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1653
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1654
- --tw-ring-inset: inset;
1655
- position: relative;
1656
- --tw-bg-opacity: 1;
1657
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1658
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1659
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1660
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1661
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1662
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1663
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1664
- --tw-ring-opacity: 1;
1665
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1666
- --tw-ring-offset-width: 1px;
1667
- --tw-ring-inset: unset;
1668
- }
1669
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
1670
- --tw-bg-opacity: 1;
1671
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1672
- }
1673
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
1674
- outline-width: 2px;
1675
- outline-color: #93c5fd;
1676
- }
1677
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
1678
- /* @apply flex h-32 flex-col gap-2; */
1679
- display: flex;
1680
- height: 8rem;
1681
- flex-direction: column;
604
+
605
+ qti-inline-choice-interaction {
606
+ &::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-right:1.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
1682
607
  }
1683
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice{
1684
- cursor: pointer;
1685
- border-radius: 0.375rem;
1686
- outline: 2px solid transparent;
1687
- outline-offset: 2px;
1688
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1689
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1690
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1691
- --tw-ring-inset: inset;
1692
- --tw-ring-opacity: 1;
1693
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1694
- display: inline-block;
1695
- cursor: grab;
1696
- --tw-bg-opacity: 1;
1697
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1698
- font-weight: 600;
1699
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1700
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1701
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1702
- /* @apply select-none; */
1703
- background-image: radial-gradient(
1704
- circle at center,
1705
- rgba(0, 0, 0, 0.1) 0,
1706
- rgb(0, 0, 0, 0.1) 2px,
1707
- white 2px,
1708
- white 100%
1709
- );
1710
- background-repeat: repeat-y;
1711
- background-position: left 2px;
1712
- background-size: 14px 8px;
1713
- padding-top: 0.5rem;
1714
- padding-bottom: 0.5rem;
1715
- padding-left: 1rem;
1716
- padding-right: 0.75rem;
1717
- }
1718
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
1719
- --tw-bg-opacity: 1;
1720
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1721
- }
1722
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
1723
- outline-width: 2px;
1724
- outline-color: #93c5fd;
1725
- }
1726
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
1727
- flex-basis: fit-content;
608
+ &::part(select):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
609
+ &::part(select):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
610
+ }
611
+
612
+ qti-match-interaction:not(.qti-match-tabular) {
613
+ & qti-simple-match-set:first-of-type {
614
+
615
+ & qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
616
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
617
+ background-repeat: repeat-y;
618
+ background-position: left 2px;
619
+ background-size: 14px 8px;
620
+ }
621
+
622
+ & qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
623
+
624
+ & qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}padding-bottom:1rem;display:flex;flex-wrap:wrap;gap:0.5rem
1728
625
  }
1729
- qti-order-interaction::part(qti-simple-choice),
1730
- qti-order-interaction qti-simple-choice{
1731
- cursor: pointer;
1732
- border-radius: 0.375rem;
1733
- outline: 2px solid transparent;
1734
- outline-offset: 2px;
1735
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1736
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1737
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1738
- --tw-ring-inset: inset;
1739
- --tw-ring-opacity: 1;
1740
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1741
- display: inline-block;
1742
- cursor: grab;
1743
- --tw-bg-opacity: 1;
1744
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1745
- font-weight: 600;
1746
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1747
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1748
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1749
- /* @apply select-none; */
1750
- background-image: radial-gradient(
1751
- circle at center,
1752
- rgba(0, 0, 0, 0.1) 0,
1753
- rgb(0, 0, 0, 0.1) 2px,
1754
- white 2px,
1755
- white 100%
1756
- );
1757
- background-repeat: repeat-y;
1758
- background-position: left 2px;
1759
- background-size: 14px 8px;
1760
- padding-top: 0.5rem;
1761
- padding-bottom: 0.5rem;
1762
- padding-left: 1rem;
1763
- padding-right: 0.75rem;
1764
- }
1765
- qti-order-interaction::part(qti-simple-choice):hover,
1766
- qti-order-interaction qti-simple-choice:hover{
1767
- --tw-bg-opacity: 1;
1768
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1769
- }
1770
- qti-order-interaction::part(qti-simple-choice):focus,
1771
- qti-order-interaction qti-simple-choice:focus{
1772
- outline-width: 2px;
1773
- outline-color: #93c5fd;
1774
- }
1775
- qti-order-interaction::part(qti-simple-choice){
1776
- display: flex;
1777
- width: 100%;
1778
- align-items: center;
1779
- overflow: hidden;
1780
- text-overflow: ellipsis;
1781
- }
1782
- qti-order-interaction::part(drops){
1783
- gap: 0.5rem;
1784
- }
1785
- qti-order-interaction::part(drags){
1786
- gap: 0.5rem;
1787
- }
1788
- qti-order-interaction::part(drop-list){
1789
- cursor: pointer;
1790
- border-radius: 0.375rem;
1791
- outline: 2px solid transparent;
1792
- outline-offset: 2px;
1793
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1794
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1795
- --tw-ring-inset: inset;
1796
- position: relative;
1797
- --tw-bg-opacity: 1;
1798
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1799
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1800
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1801
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1802
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1803
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1804
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1805
- --tw-ring-opacity: 1;
1806
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1807
- --tw-ring-offset-width: 1px;
1808
- --tw-ring-inset: unset;
1809
- display: flex;
1810
- min-height: 4rem;
1811
- }
1812
- qti-order-interaction::part(drop-list):hover{
1813
- --tw-bg-opacity: 1;
1814
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1815
- }
1816
- qti-order-interaction::part(drop-list):focus{
1817
- outline-width: 2px;
1818
- outline-color: #93c5fd;
1819
- }
1820
- qti-order-interaction::part(active){
1821
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1822
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1823
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1824
- --tw-ring-opacity: 1;
1825
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1826
- }
1827
- qti-associate-interaction::part(qti-simple-associable-choice),
1828
- qti-associate-interaction qti-simple-associable-choice{
1829
- cursor: pointer;
1830
- border-radius: 0.375rem;
1831
- outline: 2px solid transparent;
1832
- outline-offset: 2px;
1833
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1834
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1835
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1836
- --tw-ring-inset: inset;
1837
- --tw-ring-opacity: 1;
1838
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1839
- display: inline-block;
1840
- cursor: grab;
1841
- --tw-bg-opacity: 1;
1842
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1843
- font-weight: 600;
1844
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1845
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1846
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1847
- /* @apply select-none; */
1848
- background-image: radial-gradient(
1849
- circle at center,
1850
- rgba(0, 0, 0, 0.1) 0,
1851
- rgb(0, 0, 0, 0.1) 2px,
1852
- white 2px,
1853
- white 100%
1854
- );
1855
- background-repeat: repeat-y;
1856
- background-position: left 2px;
1857
- background-size: 14px 8px;
1858
- display: flex;
1859
- align-items: center;
1860
- overflow: hidden;
1861
- text-overflow: ellipsis;
1862
- padding-top: 0.5rem;
1863
- padding-bottom: 0.5rem;
1864
- padding-left: 1rem;
1865
- padding-right: 0.75rem;
1866
- }
1867
- qti-associate-interaction::part(qti-simple-associable-choice):hover,
1868
- qti-associate-interaction qti-simple-associable-choice:hover{
1869
- --tw-bg-opacity: 1;
1870
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1871
- }
1872
- qti-associate-interaction::part(qti-simple-associable-choice):focus,
1873
- qti-associate-interaction qti-simple-associable-choice:focus{
1874
- outline-width: 2px;
1875
- outline-color: #93c5fd;
1876
- }
1877
- qti-associate-interaction::part(associables-container){
1878
- margin-top: 0.5rem;
1879
- margin-bottom: 0.5rem;
1880
- display: flex;
1881
- width: 100%;
1882
- justify-content: space-between;
1883
- background: linear-gradient(
1884
- 180deg,
1885
- rgb(0 0 0 / 0%) calc(50% - 1px),
1886
- #000000 calc(50%),
1887
- rgb(0 0 0 / 0%) calc(50% + 1px)
1888
- );
1889
- }
1890
- qti-associate-interaction::part(active){
1891
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1892
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1893
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1894
- --tw-ring-opacity: 1;
1895
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1896
- }
1897
- qti-associate-interaction::part(drop-list){
1898
- cursor: pointer;
1899
- border-radius: 0.375rem;
1900
- outline: 2px solid transparent;
1901
- outline-offset: 2px;
1902
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1903
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1904
- --tw-ring-inset: inset;
1905
- position: relative;
1906
- --tw-bg-opacity: 1;
1907
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1908
- --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1909
- --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1910
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1911
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1912
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1913
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1914
- --tw-ring-opacity: 1;
1915
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1916
- --tw-ring-offset-width: 1px;
1917
- --tw-ring-inset: unset;
1918
- display: grid;
1919
- height: 3rem;
1920
- width: 33.333333%;
1921
- }
1922
- /* @apply my-2; */
1923
- qti-graphic-order-interaction qti-hotspot-choice{
1924
- cursor: pointer;
1925
- border-radius: 0.375rem;
1926
- outline: 2px solid transparent;
1927
- outline-offset: 2px;
1928
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1929
- --tw-ring-inset: inset;
1930
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1931
- height: 100%;
1932
- width: 100%;
1933
- background-color: transparent;
1934
- padding: 0px;
1935
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1936
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1937
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1938
- --tw-ring-opacity: 1;
1939
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1940
- }
1941
- qti-graphic-order-interaction qti-hotspot-choice:hover{
1942
- --tw-bg-opacity: 1;
1943
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1944
- }
1945
- qti-graphic-order-interaction qti-hotspot-choice:focus{
1946
- outline-width: 2px;
1947
- outline-color: #93c5fd;
1948
- }
1949
- qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
1950
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1951
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1952
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1953
- --tw-ring-opacity: 1;
1954
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1955
- }
1956
- qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
1957
- cursor: not-allowed;
1958
- --tw-bg-opacity: 1;
1959
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1960
- --tw-text-opacity: 1;
1961
- color: rgb(107 114 128 / var(--tw-text-opacity));
1962
- --tw-shadow: 0 0 #0000;
1963
- --tw-shadow-colored: 0 0 #0000;
1964
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1965
- --tw-ring-opacity: 1;
1966
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1967
- }
1968
- qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
1969
- --tw-text-opacity: 1 !important;
1970
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1971
- }
1972
- qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
1973
- cursor: pointer;
1974
- --tw-bg-opacity: 1;
1975
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1976
- --tw-shadow: 0 0 #0000;
1977
- --tw-shadow-colored: 0 0 #0000;
1978
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1979
- outline-width: 0px;
1980
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1981
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1982
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1983
- }
1984
- /* &::after {
1985
- content: '';
1986
- @apply absolute top-0 block scale-75 bg-white;
1987
- height: inherit;
1988
- width: inherit;
1989
- clip-path: inherit;
1990
- } */
1991
- qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
1992
- height: 1.5rem;
1993
- width: 1.5rem;
1994
- border-radius: 9999px;
1995
- --tw-bg-opacity: 1;
1996
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1997
- --tw-text-opacity: 1;
1998
- color: rgb(255 255 255 / var(--tw-text-opacity));
1999
- display: flex;
2000
- align-items: center;
2001
- justify-content: center;
2002
- }
2003
- qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
2004
- content: attr(aria-ordervalue) !important;
626
+
627
+ & qti-simple-match-set:last-of-type {
628
+
629
+ & qti-simple-associable-choice {display:flex;flex-direction:column;height:8rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;
630
+ }
631
+
632
+ & qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
633
+
634
+ & qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
635
+
636
+ & qti-simple-associable-choice > qti-simple-associable-choice {
637
+ flex-basis: fit-content;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
638
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
639
+ background-repeat: repeat-y;
640
+ background-position: left 2px;
641
+ background-size: 14px 8px;
642
+ }
643
+
644
+ & qti-simple-associable-choice>qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
645
+
646
+ & qti-simple-associable-choice>qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0.5rem
2005
647
  }
2006
- qti-graphic-associate-interaction{
2007
- position: relative;
2008
- display: block;
2009
- }
2010
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
2011
- /* border-radius: 100%;
648
+ }
649
+
650
+ qti-order-interaction {
651
+ &::part(qti-simple-choice),
652
+ & qti-simple-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
653
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
654
+ background-repeat: repeat-y;
655
+ background-position: left 2px;
656
+ background-size: 14px 8px;
657
+ }
658
+ &::part(qti-simple-choice):hover,& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
659
+ &::part(qti-simple-choice):focus,& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
660
+ &::part(qti-simple-choice) {text-overflow:ellipsis;display:flex;width:100%;overflow:hidden;align-items:center;
661
+ }
662
+ &::part(drops) {gap:0.5rem;
663
+ }
664
+ &::part(drags) {gap:0.5rem;
665
+ }
666
+ &::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:flex;min-height:4rem;
667
+ }
668
+ &::part(drop-list):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
669
+ &::part(drop-list):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
670
+ &::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
671
+ }
672
+ }
673
+
674
+ qti-associate-interaction {
675
+ &::part(qti-simple-associable-choice),
676
+ & qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
677
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
678
+ background-repeat: repeat-y;
679
+ background-position: left 2px;
680
+ background-size: 14px 8px;;text-overflow:ellipsis;display:flex;overflow:hidden;align-items:center;
681
+ }
682
+ &::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));}
683
+ &::part(qti-simple-associable-choice):focus,& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
684
+ &::part(associables-container) {
685
+ background: linear-gradient(
686
+ 180deg,
687
+ rgb(0 0 0 / 0%) calc(50% - 1px),
688
+ #000000 calc(50%),
689
+ rgb(0 0 0 / 0%) calc(50% + 1px)
690
+ );margin-top:0.5rem;margin-bottom:0.5rem;display:flex;width:100%;justify-content:space-between;
691
+ }
692
+ &::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
693
+ }
694
+ &::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:grid;height:3rem;width:33.3333333333%;
695
+ }
696
+ }
697
+
698
+ qti-graphic-order-interaction {
699
+ & qti-hotspot-choice {
700
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
701
+ }
702
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
703
+ }
704
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
705
+ }
706
+ &[aria-ordervalue] {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center;
707
+ }
708
+ &[aria-ordervalue]::after {
709
+ content: attr(aria-ordervalue) !important;
710
+ }padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
711
+ }
712
+ & qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
713
+ & qti-hotspot-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
714
+ }
715
+
716
+ qti-graphic-associate-interaction {
717
+
718
+ & qti-associable-hotspot {
719
+ &[shape='circle'] {
720
+ /* border-radius: 100%;
2012
721
  background-color: green; */
2013
- cursor: pointer;
2014
- border-radius: 0.375rem;
2015
- outline: 2px solid transparent;
2016
- outline-offset: 2px;
2017
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2018
- --tw-ring-inset: inset;
2019
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
2020
- height: 100%;
2021
- width: 100%;
2022
- background-color: transparent;
2023
- padding: 0px;
2024
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2025
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2026
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2027
- --tw-ring-opacity: 1;
2028
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
722
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
723
+ }
724
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
725
+ }
726
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
727
+ }padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
728
+ }
729
+ &[shape="circle"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
730
+ &[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
731
+
732
+ &[shape='square'] {
733
+ /* border-radius: 0; */
734
+ /* background-color: green; */
735
+ &[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
736
+ }
737
+ &[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
738
+ }
739
+ &[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
740
+ }padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
741
+ }
742
+
743
+ &[shape="square"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
744
+
745
+ &[shape="square"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
746
+ }display:block;position:relative
747
+ }
748
+
749
+ qti-graphic-gap-match-interaction {
750
+ & img {padding:0;margin:0;
751
+ }position:relative
752
+ }
753
+
754
+ qti-slider-interaction { /* else no screenshot will be made with html-to-image */
755
+
756
+ --qti-tick-color: rgb(229 231 235 / 1);
757
+ --qti-tick-width: 1px;
758
+
759
+ &::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;
2029
760
  }
2030
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
2031
- --tw-bg-opacity: 1;
2032
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
2033
- }
2034
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
2035
- outline-width: 2px;
2036
- outline-color: #93c5fd;
2037
- }
2038
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
2039
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2040
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2041
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2042
- --tw-ring-opacity: 1;
2043
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
2044
- }
2045
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
2046
- cursor: not-allowed;
2047
- --tw-bg-opacity: 1;
2048
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2049
- --tw-text-opacity: 1;
2050
- color: rgb(107 114 128 / var(--tw-text-opacity));
2051
- --tw-shadow: 0 0 #0000;
2052
- --tw-shadow-colored: 0 0 #0000;
2053
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2054
- --tw-ring-opacity: 1;
2055
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
2056
- }
2057
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
2058
- --tw-text-opacity: 1 !important;
2059
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
2060
- }
2061
- qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
2062
- cursor: pointer;
2063
- --tw-bg-opacity: 1;
2064
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2065
- --tw-shadow: 0 0 #0000;
2066
- --tw-shadow-colored: 0 0 #0000;
2067
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2068
- outline-width: 0px;
2069
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2070
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2071
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2072
- }
2073
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
2074
- /* border-radius: 0; */
2075
- /* background-color: green; */
2076
- cursor: pointer;
2077
- border-radius: 0.375rem;
2078
- outline: 2px solid transparent;
2079
- outline-offset: 2px;
2080
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2081
- --tw-ring-inset: inset;
2082
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
2083
- height: 100%;
2084
- width: 100%;
2085
- background-color: transparent;
2086
- padding: 0px;
2087
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2088
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2089
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2090
- --tw-ring-opacity: 1;
2091
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
761
+
762
+ --show-bounds: true;
763
+ &::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' */display:flex;width:100%;justify-content:space-between;margin-bottom:0.5rem;
2092
764
  }
2093
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
2094
- --tw-bg-opacity: 1;
2095
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
2096
- }
2097
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
2098
- outline-width: 2px;
2099
- outline-color: #93c5fd;
2100
- }
2101
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
2102
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2103
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2104
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2105
- --tw-ring-opacity: 1;
2106
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
2107
- }
2108
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
2109
- cursor: not-allowed;
2110
- --tw-bg-opacity: 1;
2111
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2112
- --tw-text-opacity: 1;
2113
- color: rgb(107 114 128 / var(--tw-text-opacity));
2114
- --tw-shadow: 0 0 #0000;
2115
- --tw-shadow-colored: 0 0 #0000;
2116
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2117
- --tw-ring-opacity: 1;
2118
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
2119
- }
2120
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
2121
- --tw-text-opacity: 1 !important;
2122
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
2123
- }
2124
- qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
2125
- cursor: pointer;
2126
- --tw-bg-opacity: 1;
2127
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2128
- --tw-shadow: 0 0 #0000;
2129
- --tw-shadow-colored: 0 0 #0000;
2130
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2131
- outline-width: 0px;
2132
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2133
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2134
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2135
- }
2136
- qti-graphic-gap-match-interaction{
2137
- position: relative;
2138
- }
2139
- qti-graphic-gap-match-interaction img{
2140
- margin: 0px;
2141
- padding: 0px;
2142
- }
2143
- qti-slider-interaction{
2144
- display: block; /* else no screenshot will be made with html-to-image */
2145
765
 
2146
- /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
766
+ --show-ticks: true;
767
+ &::part(ticks) { /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
768
+ background-position: 0 center;
769
+ background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
770
+ 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;
771
+ }
2147
772
 
2148
- --qti-tick-color: rgb(229 231 235 / 1);
2149
- --qti-tick-width: 1px;
2150
- }
2151
- qti-slider-interaction::part(slider){
2152
- margin-left: 2rem;
2153
- margin-right: 2rem; /* so the slider stays INSIDE of the qti-slider-interaction */ padding-bottom: 1rem; padding-top: 1.25rem; /* this keeps all content in the qti-slider interaction, also for html-to-image */
2154
- }
2155
- qti-slider-interaction{
773
+ &::part(rail) { /* so the knob is neatly centered vertically */
774
+ /* 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;--qti-bg-opacity:1;background-color:rgb(229 231 235 / var(--qti-bg-opacity));border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;height:0.375rem;width:100%;cursor:pointer;
775
+ }
2156
776
 
2157
- --show-bounds: true;
2158
- }
2159
- qti-slider-interaction::part(bounds){
2160
- display: flex;
2161
- width: 100%;
2162
- justify-content: space-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */ margin-bottom: 0.5rem; /* just so it aligns with the value 'knob' */
2163
- }
2164
- qti-slider-interaction{
777
+ &::part(knob) {
778
+ left: var(--value-percentage);--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;position:relative;height:1rem;width:1rem;cursor:pointer;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));
779
+ }
2165
780
 
2166
- --show-ticks: true;
2167
- }
2168
- qti-slider-interaction::part(ticks){
2169
- margin-left: 0.125rem;
2170
- margin-right: 0.125rem;
2171
- margin-bottom: 0.25rem;
2172
- height: 0.5rem; /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
2173
- background-position: 0 center;
2174
- background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
2175
- background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
2176
- }
2177
- qti-slider-interaction::part(rail){
2178
- display: flex;
2179
- align-items: center; /* so the knob is neatly centered vertically */
2180
- /* DESIGN */
2181
- box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.375rem; width: 100%; cursor: pointer; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity));
2182
- }
2183
- qti-slider-interaction::part(knob){
2184
- position: relative;
2185
- height: 1rem;
2186
- width: 1rem;
2187
- transform-origin: center;
2188
- --tw-translate-x: -50%;
2189
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2190
- cursor: pointer;
2191
- border-radius: 9999px;
2192
- --tw-bg-opacity: 1;
2193
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
2194
- left: var(--value-percentage);
2195
- }
2196
- qti-slider-interaction{
781
+ --show-value: true;
782
+ &::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;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));text-align:center;cursor:pointer;--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));
783
+ }display:block
784
+ }
2197
785
 
2198
- --show-value: true;
2199
- }
2200
- qti-slider-interaction::part(value){
2201
- position: absolute;
2202
- bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.5rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity));
2203
- }
2204
- qti-select-point-interaction::part(point):hover{
2205
- background-color: rgb(219 234 254 / var(--tw-bg-opacity));
2206
- --tw-bg-opacity: 0.3;
2207
- }
2208
- qti-select-point-interaction::part(point){
2209
- cursor: pointer;
2210
- border-radius: 0.375rem;
2211
- outline: 2px solid transparent;
2212
- outline-offset: 2px;
2213
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2214
- --tw-ring-inset: inset;
2215
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
2216
- height: 1.5rem;
2217
- width: 1.5rem;
2218
- background-color: transparent;
2219
- padding: 0px;
2220
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2221
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2222
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2223
- --tw-ring-opacity: 1;
2224
- --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
2225
- border-radius: 9999px;
2226
- }
2227
- qti-select-point-interaction::part(point):hover{
2228
- --tw-ring-opacity: 1;
2229
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
2230
- }
2231
- qti-select-point-interaction::part(point):focus{
2232
- outline-width: 2px;
2233
- outline-color: #93c5fd;
2234
- }
2235
- qti-select-point-interaction::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
786
+ qti-select-point-interaction {
787
+ &::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:1.5rem;width:1.5rem;outline:2px solid transparent;outline-offset:2px;border-radius:9999px;
788
+ }
789
+ &::part(point):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
790
+ &::part(point):hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
2236
791
  }
2237
- qti-position-object-stage qti-position-object-interaction {
2238
- /* no styles necessary, only layout styles, defined in the component */
2239
- /* height: 40px; */
792
+
793
+ qti-position-object-stage {
794
+ & qti-position-object-interaction {
795
+ /* no styles necessary, only layout styles, defined in the component */
796
+ /* height: 40px; */
797
+ }
798
+ }
799
+
800
+ qti-prompt {margin-top:0.5rem;margin-bottom:0.5rem;display:block;width:100%;
2240
801
  }
2241
- qti-prompt{
2242
- margin-top: 0.5rem;
2243
- margin-bottom: 0.5rem;
2244
- display: block;
2245
- width: 100%;
2246
- }
2247
- qti-choice-interaction.qti-choices-stacking-2{
2248
- display: grid;
2249
- grid-template-columns: repeat(2, minmax(0, 1fr));
2250
- }
2251
- qti-choice-interaction.qti-choices-stacking-2 qti-prompt{
2252
- grid-column: span 2 / span 2;
2253
- }
2254
- qti-choice-interaction.qti-choices-stacking-3{
2255
- display: grid;
2256
- grid-template-columns: repeat(3, minmax(0, 1fr));
2257
- }
2258
- qti-choice-interaction.qti-choices-stacking-3 qti-prompt{
2259
- grid-column: span 3 / span 3;
2260
- }
2261
- qti-choice-interaction.qti-choices-stacking-4{
2262
- display: grid;
2263
- grid-template-columns: repeat(4, minmax(0, 1fr));
2264
- }
2265
- qti-choice-interaction.qti-choices-stacking-4 qti-prompt{
2266
- grid-column: span 4 / span 4;
2267
- }
2268
- qti-choice-interaction.qti-choices-stacking-5{
2269
- display: grid;
2270
- grid-template-columns: repeat(5, minmax(0, 1fr));
2271
- }
2272
- qti-choice-interaction.qti-choices-stacking-5 qti-prompt{
2273
- grid-column: span 5 / span 5;
2274
802
  }
2275
- qti-choice-interaction.qti-orientation-horizontal {
2276
- /* is the default layout */
803
+
804
+ /* utilities */
805
+
806
+ @layer qti-utilities {
807
+ .qti-underline {
808
+ text-decoration: underline;
2277
809
  }
2278
- qti-choice-interaction[orientation='horizontal'] {
2279
- flex-direction: row;
810
+
811
+ .qti-align-left {
812
+ text-align: left;
813
+ }
814
+
815
+ .qti-align-center {
816
+ text-align: center;
817
+ }
818
+
819
+ .qti-align-right {
820
+ text-align: right;
821
+ }
822
+
823
+ .qti-valign-top {
824
+ vertical-align: top;
825
+ }
826
+
827
+ .qti-valign-middle {
828
+ vertical-align: middle;
829
+ }
830
+
831
+ .qti-valign-baseline {
832
+ vertical-align: baseline;
833
+ }
834
+
835
+ .qti-valign-bottom {
836
+ vertical-align: bottom;
837
+ }
838
+
839
+ .qti-fullwidth {
840
+ width: 100%;
841
+ }
842
+
843
+ .qti-hidden {
844
+ display: none;
845
+ }
846
+
847
+ .qti-visually-hidden {
848
+ position: fixed !important;
849
+ overflow: hidden;
850
+ width: 1px;
851
+ height: 1px;
852
+ border: 0;
853
+ margin: -1px;
854
+ clip: rect(1px 1px 1px 1px);
855
+ }
856
+
857
+ .qti-bordered {
858
+ padding: 2px;
859
+ border: 1px solid #888;
860
+ }
861
+
862
+ .qti-well {padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));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-text-opacity:1;color:rgb(75 85 99 / var(--qti-text-opacity));
2280
863
  }
2281
- qti-item-body{
2282
- color: var(--tw-prose-body);
2283
- max-width: 65ch;
2284
- }
2285
- qti-item-body :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2286
- margin-top: 1.25em;
2287
- margin-bottom: 1.25em;
2288
- }
2289
- qti-item-body :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2290
- color: var(--tw-prose-lead);
2291
- font-size: 1.25em;
2292
- line-height: 1.6;
2293
- margin-top: 1.2em;
2294
- margin-bottom: 1.2em;
2295
- }
2296
- qti-item-body :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2297
- color: var(--tw-prose-links);
2298
- text-decoration: underline;
2299
- font-weight: 500;
2300
- }
2301
- qti-item-body :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2302
- color: var(--tw-prose-bold);
2303
- font-weight: 600;
2304
- }
2305
- qti-item-body :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2306
- color: inherit;
2307
- }
2308
- qti-item-body :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2309
- color: inherit;
2310
- }
2311
- qti-item-body :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2312
- color: inherit;
2313
- }
2314
- qti-item-body :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2315
- list-style-type: decimal;
2316
- margin-top: 1.25em;
2317
- margin-bottom: 1.25em;
2318
- padding-left: 1.625em;
2319
- }
2320
- qti-item-body :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2321
- list-style-type: upper-alpha;
2322
- }
2323
- qti-item-body :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2324
- list-style-type: lower-alpha;
2325
- }
2326
- qti-item-body :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2327
- list-style-type: upper-alpha;
2328
- }
2329
- qti-item-body :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2330
- list-style-type: lower-alpha;
2331
- }
2332
- qti-item-body :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2333
- list-style-type: upper-roman;
2334
- }
2335
- qti-item-body :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2336
- list-style-type: lower-roman;
2337
- }
2338
- qti-item-body :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2339
- list-style-type: upper-roman;
2340
- }
2341
- qti-item-body :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2342
- list-style-type: lower-roman;
2343
- }
2344
- qti-item-body :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2345
- list-style-type: decimal;
2346
- }
2347
- qti-item-body :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2348
- list-style-type: disc;
2349
- margin-top: 1.25em;
2350
- margin-bottom: 1.25em;
2351
- padding-left: 1.625em;
2352
- }
2353
- qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
2354
- font-weight: 400;
2355
- color: var(--tw-prose-counters);
2356
- }
2357
- qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
2358
- color: var(--tw-prose-bullets);
2359
- }
2360
- qti-item-body :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2361
- color: var(--tw-prose-headings);
2362
- font-weight: 600;
2363
- margin-top: 1.25em;
2364
- }
2365
- qti-item-body :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2366
- border-color: var(--tw-prose-hr);
2367
- border-top-width: 1px;
2368
- margin-top: 3em;
2369
- margin-bottom: 3em;
2370
- }
2371
- qti-item-body :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2372
- font-weight: 500;
2373
- font-style: italic;
2374
- color: var(--tw-prose-quotes);
2375
- border-left-width: 0.25rem;
2376
- border-left-color: var(--tw-prose-quote-borders);
2377
- quotes: "\201C""\201D""\2018""\2019";
2378
- margin-top: 1.6em;
2379
- margin-bottom: 1.6em;
2380
- padding-left: 1em;
2381
- }
2382
- qti-item-body :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2383
- content: open-quote;
2384
- }
2385
- qti-item-body :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2386
- content: close-quote;
2387
- }
2388
- qti-item-body :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2389
- color: var(--tw-prose-headings);
2390
- font-weight: 800;
2391
- font-size: 2.25em;
2392
- margin-top: 0;
2393
- margin-bottom: 0.8888889em;
2394
- line-height: 1.1111111;
2395
- }
2396
- qti-item-body :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2397
- font-weight: 900;
2398
- color: inherit;
2399
- }
2400
- qti-item-body :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2401
- color: var(--tw-prose-headings);
2402
- font-weight: 700;
2403
- font-size: 1.5em;
2404
- margin-top: 2em;
2405
- margin-bottom: 1em;
2406
- line-height: 1.3333333;
2407
- }
2408
- qti-item-body :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2409
- font-weight: 800;
2410
- color: inherit;
2411
- }
2412
- qti-item-body :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2413
- color: var(--tw-prose-headings);
2414
- font-weight: 600;
2415
- font-size: 1.25em;
2416
- margin-top: 1.6em;
2417
- margin-bottom: 0.6em;
2418
- line-height: 1.6;
2419
- }
2420
- qti-item-body :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2421
- font-weight: 700;
2422
- color: inherit;
2423
- }
2424
- qti-item-body :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2425
- color: var(--tw-prose-headings);
2426
- font-weight: 600;
2427
- margin-top: 1.5em;
2428
- margin-bottom: 0.5em;
2429
- line-height: 1.5;
2430
- }
2431
- qti-item-body :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2432
- font-weight: 700;
2433
- color: inherit;
2434
- }
2435
- qti-item-body :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2436
- margin-top: 2em;
2437
- margin-bottom: 2em;
2438
- }
2439
- qti-item-body :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2440
- display: block;
2441
- margin-top: 2em;
2442
- margin-bottom: 2em;
2443
- }
2444
- qti-item-body :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2445
- font-weight: 500;
2446
- font-family: inherit;
2447
- color: var(--tw-prose-kbd);
2448
- box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
2449
- font-size: 0.875em;
2450
- border-radius: 0.3125rem;
2451
- padding-top: 0.1875em;
2452
- padding-right: 0.375em;
2453
- padding-bottom: 0.1875em;
2454
- padding-left: 0.375em;
2455
- }
2456
- qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2457
- color: var(--tw-prose-code);
2458
- font-weight: 600;
2459
- font-size: 0.875em;
2460
- }
2461
- qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2462
- content: "`";
2463
- }
2464
- qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2465
- content: "`";
2466
- }
2467
- qti-item-body :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2468
- color: inherit;
2469
- }
2470
- qti-item-body :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2471
- color: inherit;
2472
- }
2473
- qti-item-body :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2474
- color: inherit;
2475
- font-size: 0.875em;
2476
- }
2477
- qti-item-body :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2478
- color: inherit;
2479
- font-size: 0.9em;
2480
- }
2481
- qti-item-body :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2482
- color: inherit;
2483
- }
2484
- qti-item-body :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2485
- color: inherit;
2486
- }
2487
- qti-item-body :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2488
- color: inherit;
2489
- }
2490
- qti-item-body :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2491
- color: var(--tw-prose-pre-code);
2492
- background-color: var(--tw-prose-pre-bg);
2493
- overflow-x: auto;
2494
- font-weight: 400;
2495
- font-size: 0.875em;
2496
- line-height: 1.7142857;
2497
- margin-top: 1.7142857em;
2498
- margin-bottom: 1.7142857em;
2499
- border-radius: 0.375rem;
2500
- padding-top: 0.8571429em;
2501
- padding-right: 1.1428571em;
2502
- padding-bottom: 0.8571429em;
2503
- padding-left: 1.1428571em;
2504
- }
2505
- qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2506
- background-color: transparent;
2507
- border-width: 0;
2508
- border-radius: 0;
2509
- padding: 0;
2510
- font-weight: inherit;
2511
- color: inherit;
2512
- font-size: inherit;
2513
- font-family: inherit;
2514
- line-height: inherit;
2515
- }
2516
- qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2517
- content: none;
2518
- }
2519
- qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2520
- content: none;
2521
- }
2522
- qti-item-body :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2523
- width: 100%;
2524
- table-layout: auto;
2525
- text-align: left;
2526
- margin-top: 2em;
2527
- margin-bottom: 2em;
2528
- font-size: 0.875em;
2529
- line-height: 1.7142857;
2530
- }
2531
- qti-item-body :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2532
- border-bottom-width: 1px;
2533
- border-bottom-color: var(--tw-prose-th-borders);
2534
- }
2535
- qti-item-body :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2536
- color: var(--tw-prose-headings);
2537
- font-weight: 600;
2538
- vertical-align: bottom;
2539
- padding-right: 0.5714286em;
2540
- padding-bottom: 0.5714286em;
2541
- padding-left: 0.5714286em;
2542
- }
2543
- qti-item-body :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2544
- border-bottom-width: 1px;
2545
- border-bottom-color: var(--tw-prose-td-borders);
2546
- }
2547
- qti-item-body :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2548
- border-bottom-width: 0;
2549
- }
2550
- qti-item-body :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2551
- vertical-align: baseline;
2552
- }
2553
- qti-item-body :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2554
- border-top-width: 1px;
2555
- border-top-color: var(--tw-prose-th-borders);
2556
- }
2557
- qti-item-body :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2558
- vertical-align: top;
2559
- }
2560
- qti-item-body :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2561
- margin-top: 0;
2562
- margin-bottom: 0;
2563
- }
2564
- qti-item-body :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2565
- color: var(--tw-prose-captions);
2566
- font-size: 0.875em;
2567
- line-height: 1.4285714;
2568
- margin-top: 0.8571429em;
2569
- }
2570
- qti-item-body{
2571
- --tw-prose-body: #374151;
2572
- --tw-prose-headings: #111827;
2573
- --tw-prose-lead: #4b5563;
2574
- --tw-prose-links: #111827;
2575
- --tw-prose-bold: #111827;
2576
- --tw-prose-counters: #6b7280;
2577
- --tw-prose-bullets: #d1d5db;
2578
- --tw-prose-hr: #e5e7eb;
2579
- --tw-prose-quotes: #111827;
2580
- --tw-prose-quote-borders: #e5e7eb;
2581
- --tw-prose-captions: #6b7280;
2582
- --tw-prose-kbd: #111827;
2583
- --tw-prose-kbd-shadows: 17 24 39;
2584
- --tw-prose-code: #111827;
2585
- --tw-prose-pre-code: #e5e7eb;
2586
- --tw-prose-pre-bg: #1f2937;
2587
- --tw-prose-th-borders: #d1d5db;
2588
- --tw-prose-td-borders: #e5e7eb;
2589
- --tw-prose-invert-body: #d1d5db;
2590
- --tw-prose-invert-headings: #fff;
2591
- --tw-prose-invert-lead: #9ca3af;
2592
- --tw-prose-invert-links: #fff;
2593
- --tw-prose-invert-bold: #fff;
2594
- --tw-prose-invert-counters: #9ca3af;
2595
- --tw-prose-invert-bullets: #4b5563;
2596
- --tw-prose-invert-hr: #374151;
2597
- --tw-prose-invert-quotes: #f3f4f6;
2598
- --tw-prose-invert-quote-borders: #374151;
2599
- --tw-prose-invert-captions: #9ca3af;
2600
- --tw-prose-invert-kbd: #fff;
2601
- --tw-prose-invert-kbd-shadows: 255 255 255;
2602
- --tw-prose-invert-code: #fff;
2603
- --tw-prose-invert-pre-code: #d1d5db;
2604
- --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
2605
- --tw-prose-invert-th-borders: #4b5563;
2606
- --tw-prose-invert-td-borders: #374151;
2607
- font-size: 1rem;
2608
- line-height: 1.75;
2609
- }
2610
- qti-item-body :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2611
- margin-top: 0;
2612
- margin-bottom: 0;
2613
- }
2614
- qti-item-body :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2615
- margin-top: 2em;
2616
- margin-bottom: 2em;
2617
- }
2618
- qti-item-body :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2619
- margin-top: 0.5em;
2620
- margin-bottom: 0.5em;
2621
- }
2622
- qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2623
- padding-left: 0.375em;
2624
- }
2625
- qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2626
- padding-left: 0.375em;
2627
- }
2628
- qti-item-body :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2629
- margin-top: 0.75em;
2630
- margin-bottom: 0.75em;
2631
- }
2632
- qti-item-body :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2633
- margin-top: 1.25em;
2634
- }
2635
- qti-item-body :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2636
- margin-bottom: 1.25em;
2637
- }
2638
- qti-item-body :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2639
- margin-top: 1.25em;
2640
- }
2641
- qti-item-body :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2642
- margin-bottom: 1.25em;
2643
- }
2644
- qti-item-body :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2645
- margin-top: 0.75em;
2646
- margin-bottom: 0.75em;
2647
- }
2648
- qti-item-body :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2649
- margin-top: 1.25em;
2650
- margin-bottom: 1.25em;
2651
- }
2652
- qti-item-body :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2653
- margin-top: 0.5em;
2654
- padding-left: 1.625em;
2655
- }
2656
- qti-item-body :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2657
- margin-top: 0;
2658
- }
2659
- qti-item-body :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2660
- margin-top: 0;
2661
- }
2662
- qti-item-body :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2663
- margin-top: 0;
2664
- }
2665
- qti-item-body :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2666
- margin-top: 0;
2667
- }
2668
- qti-item-body :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2669
- padding-left: 0;
2670
- }
2671
- qti-item-body :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2672
- padding-right: 0;
2673
- }
2674
- qti-item-body :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2675
- padding-top: 0.5714286em;
2676
- padding-right: 0.5714286em;
2677
- padding-bottom: 0.5714286em;
2678
- padding-left: 0.5714286em;
2679
- }
2680
- qti-item-body :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2681
- padding-left: 0;
2682
- }
2683
- qti-item-body :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2684
- padding-right: 0;
2685
- }
2686
- qti-item-body :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2687
- margin-top: 2em;
2688
- margin-bottom: 2em;
2689
- }
2690
- qti-item-body :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2691
- margin-top: 0;
2692
864
  }
2693
- qti-item-body :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2694
- margin-bottom: 0;
865
+
866
+ /* variants */
867
+
868
+ @layer qti-variants {
869
+ .qti-input-width-1 {
870
+ width: 1ch;
871
+ min-width: 1ch;
872
+ }
873
+ .qti-input-width-2 {
874
+ width: 2ch;
875
+ min-width: 2ch;
876
+ }
877
+ .qti-input-width-3 {
878
+ width: 3ch;
879
+ min-width: 3ch;
880
+ }
881
+ .qti-input-width-4 {
882
+ width: 4ch;
883
+ min-width: 4ch;
884
+ }
885
+ .qti-input-width-6 {
886
+ width: 6ch;
887
+ min-width: 6ch;
888
+ }
889
+ .qti-input-width-10 {
890
+ width: 10ch;
891
+ min-width: 10ch;
892
+ }
893
+ .qti-input-width-15 {
894
+ width: 15ch;
895
+ min-width: 15ch;
896
+ }
897
+ .qti-input-width-20 {
898
+ width: 20ch;
899
+ min-width: 20ch;
900
+ }
901
+ .qti-input-width-72 {
902
+ width: 72ch;
903
+ min-width: 72ch;
904
+ }
2695
905
  }
2696
- qti-item-body{
2697
- max-width: none;
906
+
907
+ @layer qti-variants {
908
+ qti-choice-interaction {
909
+ &.qti-choices-stacking-2 {
910
+ qti-prompt {grid-column:span 2/span 2;
911
+ }display:grid;grid-template-columns:repeat(2,minmax(0,1fr))
912
+ }
913
+ &.qti-choices-stacking-3 {
914
+ qti-prompt {grid-column:span 3/span 3;
915
+ }display:grid;grid-template-columns:repeat(3,minmax(0,1fr))
916
+ }
917
+ &.qti-choices-stacking-4 {
918
+ qti-prompt {grid-column:span 4/span 4;
919
+ }display:grid;grid-template-columns:repeat(4,minmax(0,1fr))
920
+ }
921
+ &.qti-choices-stacking-5 {
922
+ qti-prompt {grid-column:span 5/span 5;
923
+ }display:grid;grid-template-columns:repeat(5,minmax(0,1fr))
924
+ }
925
+ &.qti-orientation-horizontal {
926
+ /* is the default layout */
927
+ }
928
+ &[orientation='horizontal'] {flex-direction:row;
929
+ }
930
+ }
2698
931
  }
932
+
933
+ /* layer: shortcuts */
934
+
935
+ .point{padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:1.5rem;width:1.5rem;outline:2px solid transparent;outline-offset:2px;}
936
+
937
+ .spot{padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px;}
938
+
939
+ .text{padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;}
940
+
941
+ .placeholder-text::-moz-placeholder{padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;}
942
+
943
+ .placeholder-text::placeholder{padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;}
944
+
945
+ .button{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px;}
946
+
947
+ .check{padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center;}
948
+
949
+ .drag{padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
950
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
951
+ background-repeat: repeat-y;
952
+ background-position: left 2px;
953
+ background-size: 14px 8px;;}
954
+
955
+ .p-lg{padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;}
956
+
957
+ .select{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-right:1.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;}
958
+
959
+ .drop{margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;}
960
+
961
+ .check-checkbox-checked{--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-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");}
962
+
963
+ .check-radio-checked{--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;}
964
+
965
+ .dis{--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;}
966
+
967
+ .hov{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
968
+
969
+ .order{--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));height:1.5rem;width:1.5rem;}
970
+
971
+ .rdo{--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;}
972
+
973
+ .bordered{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;}
974
+
975
+ .check-checkbox{border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;}
976
+
977
+ .check-radio{border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;}
978
+
979
+ .form{border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;}
980
+
981
+ .act{--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));}
982
+
983
+ .borderinvisible{border-color:transparent;}
984
+
985
+ .foc{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
986
+
987
+ /* layer: default */
988
+
989
+ .p-0,
990
+ .p\[0\]{padding:0;}
991
+
992
+ .p-3{padding:0.75rem;}
993
+
994
+ .p\[\+\+s\]{padding:++s;}
995
+
996
+ .p\[1\]{padding:1;}
997
+
998
+ .px{padding-left:1rem;padding-right:1rem;}
999
+
1000
+ .px-1{padding-left:0.25rem;padding-right:0.25rem;}
1001
+
1002
+ .px-2{padding-left:0.5rem;padding-right:0.5rem;}
1003
+
1004
+ .px-3{padding-left:0.75rem;padding-right:0.75rem;}
1005
+
1006
+ .px-6{padding-left:1.5rem;padding-right:1.5rem;}
1007
+
1008
+ .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
1009
+
1010
+ .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
1011
+
1012
+ .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
1013
+
1014
+ .pe{padding-inline-end:1rem;}
1015
+
1016
+ .pl-4{padding-left:1rem;}
1017
+
1018
+ .pr{padding-right:1rem;}
1019
+
1020
+ .pr-3{padding-right:0.75rem;}
1021
+
1022
+ .pr-7{padding-right:1.75rem;}
1023
+
1024
+ .ps{padding-inline-start:1rem;}
1025
+
1026
+ .pt{padding-top:1rem;}
1027
+
1028
+ .m-2{margin:0.5rem;}
1029
+
1030
+ .m-px{margin:1px;}
1031
+
1032
+ .m\$1\(n\){margin:var(--\31 \(n\));}
1033
+
1034
+ .m157\.22{margin:39.305rem;}
1035
+
1036
+ .m211\.07{margin:52.7675rem;}
1037
+
1038
+ .m254\.27{margin:63.5675rem;}
1039
+
1040
+ .m402\.92{margin:100.73rem;}
1041
+
1042
+ .ma{margin:auto;}
1043
+
1044
+ .my{margin-top:1rem;margin-bottom:1rem;}
1045
+
1046
+ .mb{margin-bottom:1rem;}
1047
+
1048
+ .mb\[c\[u\]\]{margin-bottom:c[u];}
1049
+
1050
+ .mb\[o\]{margin-bottom:o;}
1051
+
1052
+ .me\!{margin-inline-end:1rem !important;}
1053
+
1054
+ .mr{margin-right:1rem;}
1055
+
1056
+ .inline{display:inline;}
1057
+
1058
+ .block{display:block;}
1059
+
1060
+ .inline-block{display:inline-block;}
1061
+
1062
+ .contents{display:contents;}
1063
+
1064
+ .list-item{display:list-item;}
1065
+
1066
+ .hidden{display:none;}
1067
+
1068
+ .bg-blue-500{--qti-bg-opacity:1;background-color:rgb(59 130 246 / var(--qti-bg-opacity));}
1069
+
1070
+ .bg-gray-100{--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));}
1071
+
1072
+ .bg-gray-50{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
1073
+
1074
+ .bg-primary{--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));}
1075
+
1076
+ .bg-transparent{background-color:transparent;}
1077
+
1078
+ .bg-white{--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));}
1079
+
1080
+ .b,
1081
+ .border,
1082
+ .border-1{border-width:1px;}
1083
+
1084
+ .border-0{border-width:0px;}
1085
+
1086
+ .border-2{border-width:2px;}
1087
+
1088
+ .border-gray-200{--qti-border-opacity:1;border-color:rgb(229 231 235 / var(--qti-border-opacity));}
1089
+
1090
+ .border-gray-400{--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));}
1091
+
1092
+ .border-primary{--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));}
1093
+
1094
+ .border-transparent{border-color:transparent;}
1095
+
1096
+ .rd,
1097
+ .rounded{border-radius:0.25rem;}
1098
+
1099
+ .rounded-full{border-radius:9999px;}
1100
+
1101
+ .rounded-lg{border-radius:0.5rem;}
1102
+
1103
+ .rounded-md{border-radius:0.375rem;}
1104
+
1105
+ .rounded-none{border-radius:0;}
1106
+
1107
+ .border-solid{border-style:solid;}
1108
+
1109
+ .text-4xl{font-size:2.25rem;line-height:2.5rem;}
1110
+
1111
+ .text-xs{font-size:0.75rem;line-height:1rem;}
1112
+
1113
+ .text-blue-100{--qti-text-opacity:1;color:rgb(219 234 254 / var(--qti-text-opacity));}
1114
+
1115
+ .text-gray-400{--qti-text-opacity:1;color:rgb(156 163 175 / var(--qti-text-opacity));}
1116
+
1117
+ .text-gray-500{--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));}
1118
+
1119
+ .text-gray-700{--qti-text-opacity:1;color:rgb(55 65 81 / var(--qti-text-opacity));}
1120
+
1121
+ .text-white{--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));}
1122
+
1123
+ .font-bold{font-weight:700;}
1124
+
1125
+ .font-semibold{font-weight:600;}
1126
+
1127
+ .leading-tight{line-height:1.25;}
1128
+
1129
+ .tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
1130
+
1131
+ .indent{text-indent:1.5rem;}
1132
+
1133
+ .underline{text-decoration-line:underline;}
1134
+
1135
+ .text-right{text-align:right;}
1136
+
1137
+ .italic{font-style:italic;}
1138
+
1139
+ .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
1140
+
1141
+ .shadow{--qti-shadow:var(--qti-shadow-inset) 0 1px 3px 0 var(--qti-shadow-color, rgb(0 0 0 / 0.1)),var(--qti-shadow-inset) 0 1px 2px -1px var(--qti-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--qti-ring-offset-shadow), var(--qti-ring-shadow), var(--qti-shadow);}
1142
+
1143
+ .ring{--qti-ring-width:3px;--qti-ring-offset-shadow:var(--qti-ring-inset) 0 0 0 var(--qti-ring-offset-width) var(--qti-ring-offset-color);--qti-ring-shadow:var(--qti-ring-inset) 0 0 0 calc(var(--qti-ring-width) + var(--qti-ring-offset-width)) var(--qti-ring-color);box-shadow:var(--qti-ring-offset-shadow), var(--qti-ring-shadow), var(--qti-shadow);}
1144
+
1145
+ .flex{display:flex;}
1146
+
1147
+ .shrink-0{flex-shrink:0;}
1148
+
1149
+ .basis-1\/4{flex-basis:25%;}
1150
+
1151
+ .basis-3\/4{flex-basis:75%;}
1152
+
1153
+ .flex-col{flex-direction:column;}
1154
+
1155
+ .flex-wrap{flex-wrap:wrap;}
1156
+
1157
+ .grid{display:grid;}
1158
+
1159
+ .grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
1160
+
1161
+ .gap-2{gap:0.5rem;}
1162
+
1163
+ .gap-4{gap:1rem;}
1164
+
1165
+ .absolute{position:absolute;}
1166
+
1167
+ .fixed{position:fixed;}
1168
+
1169
+ .relative{position:relative;}
1170
+
1171
+ .static{position:static;}
1172
+
1173
+ .h-16{height:4rem;}
1174
+
1175
+ .h-5{height:1.25rem;}
1176
+
1177
+ .h-6{height:1.5rem;}
1178
+
1179
+ .h-full{height:100%;}
1180
+
1181
+ .h\[0\]{height:0;}
1182
+
1183
+ .h\[1\]{height:1;}
1184
+
1185
+ .h\[b\]{height:b;}
1186
+
1187
+ .h\[o\]{height:o;}
1188
+
1189
+ .max-w-\[2rem\]{max-width:2rem;}
1190
+
1191
+ .min-w-\[2rem\]{min-width:2rem;}
1192
+
1193
+ .w-16{width:4rem;}
1194
+
1195
+ .w-5{width:1.25rem;}
1196
+
1197
+ .w-6{width:1.5rem;}
1198
+
1199
+ .w-full{width:100%;}
1200
+
1201
+ .w\$1\(n\,l\,u\,i\,t\,r\,o\,f\,s\,a\){width:var(--\31 \(n, l);}
1202
+
1203
+ .cursor-pointer{cursor:pointer;}
1204
+
1205
+ .cursor-text{cursor:text;}
1206
+
1207
+ .cursor-not-allowed{cursor:not-allowed;}
1208
+
1209
+ .cursor-grab{cursor:grab;}
1210
+
1211
+ .visible{visibility:visible;}
1212
+
1213
+ .resize{resize:both;}
1214
+
1215
+ .whitespace-nowrap{white-space:nowrap;}
1216
+
1217
+ .overflow-x-auto{overflow-x:auto;}
1218
+
1219
+ .outline-0{outline-width:0px;}
1220
+
1221
+ .outline-2{outline-width:2px;}
1222
+
1223
+ .outline-focus{--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
1224
+
1225
+ .outline{outline-style:solid;}
1226
+
1227
+ .outline-none{outline:2px solid transparent;outline-offset:2px;}
1228
+
1229
+ .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
1230
+
1231
+ .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
1232
+
1233
+ .justify-end{justify-content:flex-end;}
1234
+
1235
+ .justify-center{justify-content:center;}
1236
+
1237
+ .items-center{align-items:center;}
1238
+
1239
+ .transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
1240
+
1241
+ .ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
1242
+
1243
+ .transform{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));}
1244
+
1245
+ .text-wrap{text-wrap:wrap;}
1246
+
1247
+ .chevron{background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;}
1248
+
1249
+ .handle{background-image:
1250
+ radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
1251
+ background-repeat: repeat-y;
1252
+ background-position: left 2px;
1253
+ background-size: 14px 8px;;}
1254
+
1255
+ .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");}