@citolab/qti-components 6.0.2 → 6.0.3-1

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 (23) hide show
  1. package/dist/themes/qti.css +1460 -1138
  2. package/package.json +10 -1
  3. package/dist/ExpressionResult-2192c3d8.d.ts +0 -33
  4. package/dist/chunk-2TX3IEPD.cjs +0 -1
  5. package/dist/chunk-HOQW4KDA.cjs +0 -1
  6. package/dist/chunk-JLKCCEGG.cjs +0 -1
  7. package/dist/chunk-JQY6IKDF.js +0 -1
  8. package/dist/chunk-L6436D6O.js +0 -1
  9. package/dist/chunk-NMCIOGD2.js +0 -1
  10. package/dist/custom-elements.json +0 -20077
  11. package/dist/qti-assessment-item-e9f437d6.d.ts +0 -117
  12. package/dist/qti-components/index.cjs +0 -403
  13. package/dist/qti-components/index.d.ts +0 -786
  14. package/dist/qti-components/index.js +0 -403
  15. package/dist/qti-item/index.cjs +0 -17
  16. package/dist/qti-item/index.d.ts +0 -27
  17. package/dist/qti-item/index.js +0 -17
  18. package/dist/qti-test/index.cjs +0 -12
  19. package/dist/qti-test/index.d.ts +0 -61
  20. package/dist/qti-test/index.js +0 -12
  21. package/dist/qti-transform/index.cjs +0 -102
  22. package/dist/qti-transform/index.d.ts +0 -18
  23. package/dist/qti-transform/index.js +0 -102
package/dist/themes/qti.css CHANGED
@@ -1,4 +1,151 @@
1
- @charset "UTF-8";
1
+ /* PK: Tailwind theming file for all qti-components
2
+ Uses tailwind components and utilities from the other files
3
+
4
+ https://play.tailwindcss.com/OFThGk8CbR
5
+ https://play.tailwindcss.com/CeHVrnwgXR
6
+ https://play.tailwindcss.com/JOgoCf81JM
7
+
8
+ We make use of the default prose stylesheet, since it is much better looking then
9
+ the default HTML styling.
10
+ https://play.tailwindcss.com/uj1vGACRJA?layout=preview
11
+
12
+ So first we ( as tailwind does ) reset ALL styling on all default elements
13
+ Then we add the prose stylesheet: the Interaction will / or will not have a no-prose declaration, don't know about that yet
14
+ Then we create tailwind components
15
+ Then we consume these components in our qti-webcomponents
16
+
17
+ outline: used for focus
18
+ ring: used for border around the elements, can be active, its an inner ring, except for
19
+ the dropping well, because that has to surround the drag with the inner ring
20
+
21
+ There are 6 types
22
+ - text : text-entry and extended-text
23
+ - select : inline-choice
24
+ - button : .input-control-hidden qti-choice, qti-hotspot
25
+ - check : qti-choice, qti-hotspot
26
+ - drag : gap-match, match, order, associate
27
+ - drop : gap-match, match, order, associate
28
+ - spot : gap-select-point, graphic-order, qti-graphic-associate
29
+
30
+ trying to get the follower modifiers to work:
31
+
32
+ - sm , for elements inside text
33
+ - lg, , for large readable containers
34
+ - in , inline in text
35
+
36
+ taking into account cursors, select-none for some of the elements
37
+ */
38
+
39
+ /* FIXMEs
40
+ Outline always on top, sometimes it slips under the hover background
41
+ Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
42
+ modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
43
+ */
44
+
45
+ @layer base, components, variants, states, utilities;
46
+
47
+ /** default styles for all components */
48
+
49
+ *, ::before, ::after{
50
+ --tw-border-spacing-x: 0;
51
+ --tw-border-spacing-y: 0;
52
+ --tw-translate-x: 0;
53
+ --tw-translate-y: 0;
54
+ --tw-rotate: 0;
55
+ --tw-skew-x: 0;
56
+ --tw-skew-y: 0;
57
+ --tw-scale-x: 1;
58
+ --tw-scale-y: 1;
59
+ --tw-pan-x: ;
60
+ --tw-pan-y: ;
61
+ --tw-pinch-zoom: ;
62
+ --tw-scroll-snap-strictness: proximity;
63
+ --tw-gradient-from-position: ;
64
+ --tw-gradient-via-position: ;
65
+ --tw-gradient-to-position: ;
66
+ --tw-ordinal: ;
67
+ --tw-slashed-zero: ;
68
+ --tw-numeric-figure: ;
69
+ --tw-numeric-spacing: ;
70
+ --tw-numeric-fraction: ;
71
+ --tw-ring-inset: ;
72
+ --tw-ring-offset-width: 0px;
73
+ --tw-ring-offset-color: #fff;
74
+ --tw-ring-color: rgb(59 130 246 / 0.5);
75
+ --tw-ring-offset-shadow: 0 0 #0000;
76
+ --tw-ring-shadow: 0 0 #0000;
77
+ --tw-shadow: 0 0 #0000;
78
+ --tw-shadow-colored: 0 0 #0000;
79
+ --tw-blur: ;
80
+ --tw-brightness: ;
81
+ --tw-contrast: ;
82
+ --tw-grayscale: ;
83
+ --tw-hue-rotate: ;
84
+ --tw-invert: ;
85
+ --tw-saturate: ;
86
+ --tw-sepia: ;
87
+ --tw-drop-shadow: ;
88
+ --tw-backdrop-blur: ;
89
+ --tw-backdrop-brightness: ;
90
+ --tw-backdrop-contrast: ;
91
+ --tw-backdrop-grayscale: ;
92
+ --tw-backdrop-hue-rotate: ;
93
+ --tw-backdrop-invert: ;
94
+ --tw-backdrop-opacity: ;
95
+ --tw-backdrop-saturate: ;
96
+ --tw-backdrop-sepia: ;
97
+ }
98
+
99
+ ::backdrop{
100
+ --tw-border-spacing-x: 0;
101
+ --tw-border-spacing-y: 0;
102
+ --tw-translate-x: 0;
103
+ --tw-translate-y: 0;
104
+ --tw-rotate: 0;
105
+ --tw-skew-x: 0;
106
+ --tw-skew-y: 0;
107
+ --tw-scale-x: 1;
108
+ --tw-scale-y: 1;
109
+ --tw-pan-x: ;
110
+ --tw-pan-y: ;
111
+ --tw-pinch-zoom: ;
112
+ --tw-scroll-snap-strictness: proximity;
113
+ --tw-gradient-from-position: ;
114
+ --tw-gradient-via-position: ;
115
+ --tw-gradient-to-position: ;
116
+ --tw-ordinal: ;
117
+ --tw-slashed-zero: ;
118
+ --tw-numeric-figure: ;
119
+ --tw-numeric-spacing: ;
120
+ --tw-numeric-fraction: ;
121
+ --tw-ring-inset: ;
122
+ --tw-ring-offset-width: 0px;
123
+ --tw-ring-offset-color: #fff;
124
+ --tw-ring-color: rgb(59 130 246 / 0.5);
125
+ --tw-ring-offset-shadow: 0 0 #0000;
126
+ --tw-ring-shadow: 0 0 #0000;
127
+ --tw-shadow: 0 0 #0000;
128
+ --tw-shadow-colored: 0 0 #0000;
129
+ --tw-blur: ;
130
+ --tw-brightness: ;
131
+ --tw-contrast: ;
132
+ --tw-grayscale: ;
133
+ --tw-hue-rotate: ;
134
+ --tw-invert: ;
135
+ --tw-saturate: ;
136
+ --tw-sepia: ;
137
+ --tw-drop-shadow: ;
138
+ --tw-backdrop-blur: ;
139
+ --tw-backdrop-brightness: ;
140
+ --tw-backdrop-contrast: ;
141
+ --tw-backdrop-grayscale: ;
142
+ --tw-backdrop-hue-rotate: ;
143
+ --tw-backdrop-invert: ;
144
+ --tw-backdrop-opacity: ;
145
+ --tw-backdrop-saturate: ;
146
+ --tw-backdrop-sepia: ;
147
+ }
148
+
2
149
  .qti-underline {
3
150
  text-decoration: underline;
4
151
  }
@@ -61,1330 +208,1505 @@
61
208
  border-radius: 4px;
62
209
  margin-bottom: 20px;
63
210
  background-color: #f5f5f5;
64
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
211
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
65
212
  }
66
213
 
67
- .qti-layout-row {
68
- display: flow-root;
69
- width: 100%;
70
- }
71
- .qti-layout-row [class*=qti-layout-col] {
72
- margin-left: 2.1276595745%;
73
- float: left;
74
- }
75
- .qti-layout-row [class*=qti-layout-col]:first-child {
76
- margin-left: 0;
77
- }
78
- .qti-layout-row .qti-layout-col12 {
79
- width: 100%;
80
- }
81
- .qti-layout-row .qti-layout-offset12 {
82
- margin-left: 104.2553191489%;
83
- }
84
- .qti-layout-row .qti-layout-offset12:first-child {
85
- margin-left: 102.1276595745%;
86
- }
87
- .qti-layout-row .qti-layout-col11 {
88
- width: 91.4893617021%;
89
- }
90
- .qti-layout-row .qti-layout-offset11 {
91
- margin-left: 95.7446808511%;
92
- }
93
- .qti-layout-row .qti-layout-offset11:first-child {
94
- margin-left: 93.6170212766%;
95
- }
96
- .qti-layout-row .qti-layout-col10 {
97
- width: 82.9787234043%;
98
- }
99
- .qti-layout-row .qti-layout-offset10 {
100
- margin-left: 87.2340425532%;
101
- }
102
- .qti-layout-row .qti-layout-offset10:first-child {
103
- margin-left: 85.1063829787%;
104
- }
105
- .qti-layout-row .qti-layout-col9 {
106
- width: 74.4680851064%;
107
- }
108
- .qti-layout-row .qti-layout-offset9 {
109
- margin-left: 78.7234042553%;
110
- }
111
- .qti-layout-row .qti-layout-offset9:first-child {
112
- margin-left: 76.5957446809%;
113
- }
114
- .qti-layout-row .qti-layout-col8 {
115
- width: 65.9574468085%;
116
- }
117
- .qti-layout-row .qti-layout-offset8 {
118
- margin-left: 70.2127659574%;
119
- }
120
- .qti-layout-row .qti-layout-offset8:first-child {
121
- margin-left: 68.085106383%;
122
- }
123
- .qti-layout-row .qti-layout-col7 {
124
- width: 57.4468085106%;
125
- }
126
- .qti-layout-row .qti-layout-offset7 {
127
- margin-left: 61.7021276596%;
128
- }
129
- .qti-layout-row .qti-layout-offset7:first-child {
130
- margin-left: 59.5744680851%;
131
- }
132
- .qti-layout-row .qti-layout-col6 {
133
- width: 48.9361702128%;
134
- }
135
- .qti-layout-row .qti-layout-offset6 {
136
- margin-left: 53.1914893617%;
137
- }
138
- .qti-layout-row .qti-layout-offset6:first-child {
139
- margin-left: 51.0638297872%;
140
- }
141
- .qti-layout-row .qti-layout-col5 {
142
- width: 40.4255319149%;
143
- }
144
- .qti-layout-row .qti-layout-offset5 {
145
- margin-left: 44.6808510638%;
146
- }
147
- .qti-layout-row .qti-layout-offset5:first-child {
148
- margin-left: 42.5531914894%;
149
- }
150
- .qti-layout-row .qti-layout-col4 {
151
- width: 31.914893617%;
152
- }
153
- .qti-layout-row .qti-layout-offset4 {
154
- margin-left: 36.170212766%;
155
- }
156
- .qti-layout-row .qti-layout-offset4:first-child {
157
- margin-left: 34.0425531915%;
158
- }
159
- .qti-layout-row .qti-layout-col3 {
160
- width: 23.4042553191%;
214
+ /** The different components, you can choose only one */
215
+
216
+ /* - button : .input-control-hidden qti-choice, qti-hotspot */
217
+
218
+ /* - select : inline-choice */
219
+
220
+ /* - check : qti-choice, qti-hotspot */
221
+
222
+ /* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
223
+
224
+ /* - text : text-entry and extended-text */
225
+
226
+ /* - spot : gap-select-point, graphic-order, qti-graphic-associate */
227
+
228
+ /* - drag : gap-match, match, order, associate */
229
+
230
+ /* - drop : gap-match, match, order, associate */
231
+
232
+ /** End components */
233
+
234
+ /** Modifiers */
235
+
236
+ /* intext for elements which has to appear in text
237
+ - intext : gap-match > qti-gap, hottext > hottext, select
238
+ */
239
+
240
+ /* small for elements which has to appear in text
241
+ - intext : gap-match > qti-gap, hottext > hottext, select
242
+ */
243
+
244
+ /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
245
+
246
+ /* hover, every element has a hover, except disabled( which overrides hover */
247
+
248
+ /* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
249
+
250
+ /* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
251
+
252
+ /* readonly, overwrites cursor, hover background, outline for focus and ring */
253
+
254
+ /* disabled, make gray state */
255
+
256
+ /* drag in the drop, else the drag in the drop was black and not gray */
257
+
258
+ /* PK: There was no utility to reset the ring-inset
259
+ We use this for the drop container, where we want the ring to have an outset
260
+ So the drag, with ring-inset, snugs neatly into the drop with ring-'outset'
261
+ by unsetting the ring-inset */
262
+
263
+ /* PK: we use prose so we get fancy styling on all the defulat HTML elements, like
264
+ table, ul, ol, p, blockquote etc..
265
+ */
266
+
267
+ /* qti-item-body {
268
+ @apply prose;
269
+ } */
270
+
271
+ qti-choice-interaction{
272
+ margin-top: 0.5rem;
273
+ margin-bottom: 0.5rem;
274
+ display: grid;
275
+ gap: 0.5rem;
161
276
  }
162
- .qti-layout-row .qti-layout-offset3 {
163
- margin-left: 27.6595744681%;
277
+
278
+ qti-choice-interaction.qti-choices-stacking-2{
279
+ grid-template-columns: repeat(2, minmax(0, 1fr));
164
280
  }
165
- .qti-layout-row .qti-layout-offset3:first-child {
166
- margin-left: 25.5319148936%;
281
+
282
+ qti-choice-interaction.qti-choices-stacking-3{
283
+ grid-template-columns: repeat(3, minmax(0, 1fr));
167
284
  }
168
- .qti-layout-row .qti-layout-col2 {
169
- width: 14.8936170213%;
285
+
286
+ qti-choice-interaction.qti-choices-stacking-4{
287
+ grid-template-columns: repeat(4, minmax(0, 1fr));
170
288
  }
171
- .qti-layout-row .qti-layout-offset2 {
172
- margin-left: 19.1489361702%;
289
+
290
+ qti-choice-interaction.qti-choices-stacking-5{
291
+ grid-template-columns: repeat(5, minmax(0, 1fr));
173
292
  }
174
- .qti-layout-row .qti-layout-offset2:first-child {
175
- margin-left: 17.0212765957%;
293
+
294
+ qti-choice-interaction.qti-orientation-horizontal{
295
+ display: flex;
176
296
  }
177
- .qti-layout-row .qti-layout-col1 {
178
- width: 6.3829787234%;
297
+
298
+ qti-choice-interaction[orientation='horizontal']{
299
+ display: flex;
179
300
  }
180
- .qti-layout-row .qti-layout-offset1 {
181
- margin-left: 10.6382978723%;
301
+
302
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
303
+ cursor: pointer;
304
+ border-radius: 0.375rem;
305
+ --tw-text-opacity: 1;
306
+ color: rgb(17 24 39 / var(--tw-text-opacity));
307
+ outline: 2px solid transparent;
308
+ outline-offset: 2px;
309
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
310
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
311
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
312
+ --tw-ring-inset: inset;
313
+ --tw-ring-opacity: 1;
314
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
315
+ -webkit-user-select: none;
316
+ -moz-user-select: none;
317
+ user-select: none;
318
+ padding-left: 0.75rem;
319
+ padding-right: 0.75rem;
320
+ padding-top: 0.5rem;
321
+ padding-bottom: 0.5rem;
322
+ font-weight: 600;
323
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
324
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
325
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
182
326
  }
183
- .qti-layout-row .qti-layout-offset1:first-child {
184
- margin-left: 8.5106382979%;
327
+
328
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
329
+ --tw-bg-opacity: 1;
330
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
185
331
  }
186
332
 
187
- :root {
188
- /**
189
- * @tokens Colors
190
- * @presenter Color
191
- */
192
- --qti-primary: rgb(30, 80, 127);
193
- --qti-primary-color: var(--qti-primary);
194
- --qti-focus-color: #98cbfa;
195
- --qti-border-color: #cdd5df;
196
- --qti-shadow-color: #838c96;
197
- --qti-text-color: #4a5a69;
198
- --qti-background: #f2f4f5;
199
- --qti-placeholder-text: var(--qti-border-color);
200
- --qti-white: #fff;
201
- /**
202
- * @tokens Others
203
- */
204
- --qti-padding-x: 0.7rem;
205
- --qti-padding-y: 0.5rem;
206
- --qti-border-width: 2px;
207
- --qti-shadow-blur: 2px;
208
- --qti-border-radius: 2px;
209
- --qti-gap: 2px;
333
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
334
+ outline-width: 2px;
335
+ outline-color: #fca5a5;
210
336
  }
211
337
 
212
- html,
213
- body,
214
- #root,
215
- #root-inner,
216
- qti-test {
217
- height: 100%;
338
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
339
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
340
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
341
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
342
+ --tw-ring-opacity: 1;
343
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
218
344
  }
219
345
 
220
- qti-test {
221
- display: flex;
222
- flex-direction: column;
223
- gap: 1rem;
346
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
347
+ cursor: not-allowed;
348
+ --tw-bg-opacity: 1;
349
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
350
+ --tw-text-opacity: 1;
351
+ color: rgb(107 114 128 / var(--tw-text-opacity));
352
+ --tw-shadow: 0 0 #0000;
353
+ --tw-shadow-colored: 0 0 #0000;
354
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
355
+ --tw-ring-opacity: 1;
356
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
224
357
  }
225
- qti-test qti-assessment-item {
226
- display: block; /* necessary to calculate scaling position */
227
- flex: 1;
228
- gap: 1rem;
229
- overflow-y: scroll;
358
+
359
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
360
+ --tw-text-opacity: 1 !important;
361
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
230
362
  }
231
- qti-test qti-assessment-item qti-item-body {
232
- display: block;
363
+
364
+ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
365
+ cursor: pointer;
366
+ --tw-bg-opacity: 1;
367
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
368
+ --tw-shadow: 0 0 #0000;
369
+ --tw-shadow-colored: 0 0 #0000;
370
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
371
+ outline-width: 0px;
372
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
373
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
374
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
233
375
  }
234
- qti-test qti-test-nav {
376
+
377
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
378
+ cursor: pointer;
379
+ border-radius: 0.375rem;
380
+ --tw-text-opacity: 1;
381
+ color: rgb(17 24 39 / var(--tw-text-opacity));
382
+ outline: 2px solid transparent;
383
+ outline-offset: 2px;
384
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
385
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
386
+ --tw-ring-inset: inset;
387
+ --tw-ring-opacity: 1;
388
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
235
389
  display: flex;
236
- justify-content: space-between;
237
- gap: 1rem;
390
+ -webkit-user-select: none;
391
+ -moz-user-select: none;
392
+ user-select: none;
393
+ align-items: center;
394
+ gap: 0.5rem;
395
+ border-radius: 9999px;
396
+ padding-left: 0.25rem;
397
+ padding-right: 0.25rem;
398
+ padding-top: 0.125rem;
399
+ padding-bottom: 0.125rem;
400
+ --tw-shadow: 0 0 #0000;
401
+ --tw-shadow-colored: 0 0 #0000;
402
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
403
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
404
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
405
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
238
406
  }
239
- qti-test qti-test-nav qti-test-check,
240
- qti-test qti-test-nav qti-test-score,
241
- qti-test qti-test-nav qti-test-prev,
242
- qti-test qti-test-nav qti-test-show-correct,
243
- qti-test qti-test-nav qti-test-next {
407
+
408
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(cha) {
409
+ /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
410
+ height: 66.666667%;
411
+ width: 66.666667%;
412
+ }
413
+
414
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
244
415
  display: flex;
416
+ height: 1.25rem;
417
+ width: 1.25rem;
418
+ flex-shrink: 0;
245
419
  align-items: center;
246
420
  justify-content: center;
247
- padding: 5px 10px;
248
- border-radius: 3px;
249
- color: rgb(56, 56, 56);
250
- text-decoration: none;
251
- display: inline-block;
252
- padding: 8px 16px;
253
- border: 0;
254
- background: #eeeeee;
255
- color: rgb(83, 83, 83);
256
- cursor: pointer;
257
- font-size: 16px;
258
- font-weight: 700;
259
- }
260
- qti-test qti-test-nav qti-test-check:hover,
261
- qti-test qti-test-nav qti-test-score:hover,
262
- qti-test qti-test-nav qti-test-prev:hover,
263
- qti-test qti-test-nav qti-test-show-correct:hover,
264
- qti-test qti-test-nav qti-test-next:hover {
265
- background: #dadada;
266
- transition: all 0.3s ease;
267
- }
268
- qti-test qti-test-nav qti-test-check:active,
269
- qti-test qti-test-nav qti-test-score:active,
270
- qti-test qti-test-nav qti-test-prev:active,
271
- qti-test qti-test-nav qti-test-show-correct:active,
272
- qti-test qti-test-nav qti-test-next:active {
273
- background: #aeaeae;
274
- }
275
- qti-test qti-test-nav qti-test-progress {
276
- display: flex;
277
- overflow-x: scroll;
421
+ border-radius: 9999px;
422
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
423
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
424
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
425
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
426
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
427
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
428
+ --tw-ring-inset: inset;
429
+ --tw-ring-opacity: 1;
430
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
431
+ }
432
+
433
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
434
+ border-radius: 9999px;
435
+ --tw-bg-opacity: 1;
436
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
278
437
  }
279
- qti-test qti-test-nav qti-test-progress qti-test-item {
438
+
439
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
280
440
  display: flex;
441
+ height: 1.25rem;
442
+ width: 1.25rem;
443
+ flex-shrink: 0;
281
444
  align-items: center;
282
445
  justify-content: center;
283
- padding: 5px 10px;
284
- border-radius: 3px;
285
- color: rgb(56, 56, 56);
286
- text-decoration: none;
287
- display: inline-block;
288
- padding: 8px 16px;
289
- border: 0;
290
- background: #eeeeee;
291
- color: rgb(83, 83, 83);
292
- cursor: pointer;
293
- font-size: 16px;
294
- font-weight: 700;
295
- }
296
- qti-test qti-test-nav qti-test-progress qti-test-item:hover {
297
- background: #dadada;
298
- transition: all 0.3s ease;
446
+ border-radius: 0.25rem;
447
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
448
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
449
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
450
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
451
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
452
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
453
+ --tw-ring-inset: inset;
454
+ --tw-ring-opacity: 1;
455
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
299
456
  }
300
- qti-test qti-test-nav qti-test-progress qti-test-item:active {
301
- background: #aeaeae;
457
+
458
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox'][aria-checked='true']::part(cha) {
459
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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");
460
+ }
461
+
462
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
463
+ --tw-bg-opacity: 1;
464
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
302
465
  }
303
- qti-test qti-test-nav qti-test-progress qti-test-item[checked] {
304
- background: darkblue;
305
- color: white;
466
+
467
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
468
+ outline-width: 2px;
469
+ outline-color: #fca5a5;
306
470
  }
307
471
 
308
- .qti-theme-raised {
309
- /* < usabled classes to extend in qti-components > */
472
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
473
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
474
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
475
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
476
+ --tw-ring-opacity: 1;
477
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
310
478
  }
311
- .qti-theme-raised qti-text-entry-interaction {
312
- position: relative;
313
- display: inline-block;
314
- border-radius: var(--qti-border-radius);
315
- color: var(--qti-text-color);
316
- background: var(--qti-background);
317
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
318
- border-radius: calc(var(--qti-border-radius) * 3);
319
- }
320
- .qti-theme-raised qti-text-entry-interaction[disabled] {
321
- box-shadow: unset !important;
322
- color: var(--qti-border-color);
323
- cursor: unset !important;
324
- }
325
- .qti-theme-raised qti-text-entry-interaction:focus {
326
- outline-color: rgb(var(--qti-primary) 0.4);
327
- outline-offset: 2px;
328
- outline-style: solid;
329
- outline-width: var(--qti-border-width);
479
+
480
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
481
+ cursor: not-allowed;
482
+ --tw-bg-opacity: 1;
483
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
484
+ --tw-text-opacity: 1;
485
+ color: rgb(107 114 128 / var(--tw-text-opacity));
486
+ --tw-shadow: 0 0 #0000;
487
+ --tw-shadow-colored: 0 0 #0000;
488
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
489
+ --tw-ring-opacity: 1;
490
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
330
491
  }
331
- .qti-theme-raised qti-text-entry-interaction:hover:not([disabled]) {
332
- outline-color: rgb(var(--qti-primary) 0.4);
333
- outline-offset: 0;
334
- outline-style: solid;
335
- outline-width: calc(var(--qti-border-width) * 2);
492
+
493
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
494
+ --tw-text-opacity: 1 !important;
495
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
336
496
  }
337
- .qti-theme-raised .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-raised qti-simple-choice, .qti-theme-raised .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-raised qti-hottext {
338
- position: relative;
339
- display: inline-block;
340
- border-radius: var(--qti-border-radius);
341
- color: var(--qti-text-color);
342
- padding: var(--qti-padding-x) var(--qti-padding-y);
497
+
498
+ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
343
499
  cursor: pointer;
344
- background: var(--qti-background);
345
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
346
- border-radius: calc(var(--qti-border-radius) * 3);
500
+ --tw-bg-opacity: 1;
501
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
502
+ --tw-shadow: 0 0 #0000;
503
+ --tw-shadow-colored: 0 0 #0000;
504
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
505
+ outline-width: 0px;
506
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
507
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
508
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
347
509
  }
348
- .qti-theme-raised .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-raised qti-hottext[disabled] {
349
- box-shadow: unset !important;
350
- color: var(--qti-border-color);
351
- cursor: unset !important;
510
+
511
+ qti-text-entry-interaction{
512
+ margin-top: 0.5rem;
513
+ margin-bottom: 0.5rem;
352
514
  }
353
- .qti-theme-raised .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-raised qti-hottext:focus {
354
- outline-color: rgb(var(--qti-primary) 0.4);
515
+
516
+ qti-text-entry-interaction::part(input){
517
+ cursor: pointer;
518
+ color: rgb(17 24 39 / var(--tw-text-opacity));
519
+ outline: 2px solid transparent;
355
520
  outline-offset: 2px;
356
- outline-style: solid;
357
- outline-width: var(--qti-border-width);
358
- }
359
- .qti-theme-raised .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-hottext:hover:not([disabled]) {
360
- outline-color: rgb(var(--qti-primary) 0.4);
361
- outline-offset: 0;
362
- outline-style: solid;
363
- outline-width: calc(var(--qti-border-width) * 2);
521
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
522
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
523
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
524
+ --tw-ring-inset: inset;
525
+ --tw-ring-opacity: 1;
526
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
527
+ cursor: text;
528
+ border-radius: 0.125rem;
529
+ padding: 0.75rem;
530
+ --tw-text-opacity: 1;
531
+ color: rgb(75 85 99 / var(--tw-text-opacity));
532
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
533
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
534
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
364
535
  }
365
- .qti-theme-raised .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[aria-checked=true], .qti-theme-raised .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-hottext[aria-checked=true] {
366
- --qti-border-color: var(--qti-primary-color);
536
+
537
+ qti-text-entry-interaction::part(input):hover{
538
+ --tw-bg-opacity: 1;
539
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
367
540
  }
368
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice, .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-hottext {
369
- cursor: pointer;
370
- --width: 22px;
371
- --height: 22px;
372
- display: inline-flex;
373
- width: fit-content;
374
- align-items: center;
375
- gap: 0.2rem;
541
+
542
+ qti-text-entry-interaction::part(input):focus{
543
+ outline-width: 2px;
544
+ outline-color: #fca5a5;
376
545
  }
377
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[disabled], .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-hottext[disabled] {
378
- box-shadow: unset !important;
379
- color: var(--qti-border-color);
380
- cursor: unset !important;
546
+
547
+ qti-extended-text-interaction{
548
+ margin-top: 0.5rem;
549
+ margin-bottom: 0.5rem;
381
550
  }
382
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:focus, .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-hottext:focus {
383
- outline-color: rgb(var(--qti-primary) 0.4);
551
+
552
+ qti-extended-text-interaction::part(textarea){
553
+ cursor: pointer;
554
+ color: rgb(17 24 39 / var(--tw-text-opacity));
555
+ outline: 2px solid transparent;
384
556
  outline-offset: 2px;
385
- outline-style: solid;
386
- outline-width: var(--qti-border-width);
557
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
558
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
559
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
560
+ --tw-ring-inset: inset;
561
+ --tw-ring-opacity: 1;
562
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
563
+ cursor: text;
564
+ border-radius: 0.125rem;
565
+ padding: 0.75rem;
566
+ --tw-text-opacity: 1;
567
+ color: rgb(75 85 99 / var(--tw-text-opacity));
568
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
569
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
570
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
387
571
  }
388
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]), .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-hottext:hover:not([disabled]) {
389
- outline-color: rgb(var(--qti-primary) 0.4);
390
- outline-offset: 0;
391
- outline-style: solid;
392
- outline-width: calc(var(--qti-border-width) * 2);
572
+
573
+ qti-extended-text-interaction::part(textarea):hover{
574
+ --tw-bg-opacity: 1;
575
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
393
576
  }
394
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before, .qti-theme-raised qti-simple-choice::before, .qti-theme-raised qti-hottext::before {
395
- position: relative;
396
- display: inline-block;
397
- border-radius: var(--qti-border-radius);
398
- color: var(--qti-text-color);
399
- background: var(--qti-background);
400
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
577
+
578
+ qti-extended-text-interaction::part(textarea):focus{
579
+ outline-width: 2px;
580
+ outline-color: #fca5a5;
401
581
  }
402
- .qti-theme-raised qti-inline-choice-interaction {
403
- position: relative;
404
- display: inline-block;
405
- border-radius: var(--qti-border-radius);
406
- color: var(--qti-text-color);
407
- background: var(--qti-background);
408
- box-shadow: 0 var(--qti-border-width) var(--qti-border-color);
409
- border-radius: calc(var(--qti-border-radius) * 3);
410
- }
411
- .qti-theme-raised qti-inline-choice-interaction[disabled] {
412
- box-shadow: unset !important;
413
- color: var(--qti-border-color);
414
- cursor: unset !important;
415
- }
416
- .qti-theme-raised qti-inline-choice-interaction:focus {
417
- outline-color: rgb(var(--qti-primary) 0.4);
418
- outline-offset: 2px;
419
- outline-style: solid;
420
- outline-width: var(--qti-border-width);
421
- }
422
- .qti-theme-raised qti-inline-choice-interaction:hover:not([disabled]) {
423
- outline-color: rgb(var(--qti-primary) 0.4);
424
- outline-offset: 0;
425
- outline-style: solid;
426
- outline-width: calc(var(--qti-border-width) * 2);
427
- }
428
- .qti-theme-raised qti-inline-choice-interaction::after {
429
- border-left: 5px solid transparent;
430
- border-right: 5px solid transparent;
431
- border-top: 8px solid var(--qti-border-color);
432
- clear: both;
433
- content: "";
434
- pointer-events: none;
435
- position: absolute;
436
- right: 5%;
437
- top: calc(50% - 3px);
582
+
583
+ qti-gap-match-interaction{
584
+ margin-top: 0.5rem;
585
+ margin-bottom: 0.5rem;
586
+ line-height: 2rem;
438
587
  }
439
- .qti-theme-raised qti-order-interaction::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-raised qti-gap, .qti-theme-raised qti-associate-interaction::part(drop-list) {
440
- position: relative;
441
- display: inline-block;
442
- border-radius: var(--qti-border-radius);
443
- color: var(--qti-text-color);
444
- background: var(--qti-background);
445
- box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
446
- }
447
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:empty::after, .qti-theme-raised qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-raised qti-gap:empty::after {
448
- padding: var(--qti-padding-x) var(--qti-padding-y);
449
- /* when empty, put a space in it, so the height remains the same */
450
- display: inline-block;
451
- content: " ";
452
- }
453
- .qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty), .qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty), .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) {
454
- display: flex;
588
+
589
+ qti-gap-match-interaction qti-gap-text{
590
+ cursor: pointer;
591
+ border-radius: 0.375rem;
592
+ --tw-text-opacity: 1;
593
+ color: rgb(17 24 39 / var(--tw-text-opacity));
594
+ outline: 2px solid transparent;
595
+ outline-offset: 2px;
596
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
597
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
598
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
599
+ --tw-ring-inset: inset;
600
+ --tw-ring-opacity: 1;
601
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
602
+ cursor: grab;
603
+ -webkit-user-select: none;
604
+ -moz-user-select: none;
605
+ user-select: none;
606
+ --tw-bg-opacity: 1;
607
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
608
+ padding-top: 0.25rem;
609
+ padding-bottom: 0.25rem;
610
+ font-weight: 600;
611
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
612
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
613
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
614
+ background-image: radial-gradient(
615
+ circle at center,
616
+ rgba(0, 0, 0, 0.1) 0,
617
+ rgb(0, 0, 0, 0.1) 2px,
618
+ white 2px,
619
+ white 100%
620
+ );
621
+ background-repeat: repeat-y;
622
+ background-position: left 2px;
623
+ background-size: 14px 8px;
624
+ padding-left: 0.75rem;
625
+ padding-right: 0.5rem;
626
+ line-height: 1.5;
455
627
  }
456
- .qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty) > *, .qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty) > *, .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) > * {
457
- box-shadow: unset;
458
- flex-grow: 1;
459
- margin: 2px;
628
+
629
+ qti-gap-match-interaction qti-gap-text:hover{
630
+ --tw-bg-opacity: 1;
631
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
460
632
  }
461
- .qti-theme-raised qti-order-interaction[active]::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice[active], .qti-theme-raised qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-raised qti-gap[active], .qti-theme-raised qti-associate-interaction[active]::part(drop-list) {
462
- background: var(--qti-background);
633
+
634
+ qti-gap-match-interaction qti-gap-text:focus{
635
+ outline-width: 2px;
636
+ outline-color: #fca5a5;
463
637
  }
464
- .qti-theme-raised qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-order-interaction::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-raised qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-raised qti-gap-text, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-associate-interaction::part(qti-simple-associable-choice) {
465
- position: relative;
466
- display: inline-block;
467
- border-radius: var(--qti-border-radius);
468
- color: var(--qti-text-color);
469
- padding: var(--qti-padding-x) var(--qti-padding-y);
638
+
639
+ qti-gap-match-interaction qti-gap{
470
640
  cursor: pointer;
471
- background: var(--qti-background);
472
- user-select: none;
473
- box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
474
- }
475
- .qti-theme-raised qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-raised qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-raised qti-gap-text[disabled], .qti-theme-raised qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
476
- box-shadow: unset !important;
477
- color: var(--qti-border-color);
478
- cursor: unset !important;
479
- }
480
- .qti-theme-raised qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-order-interaction:focus::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:focus, .qti-theme-raised qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-raised qti-gap-text:focus, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-associate-interaction:focus::part(qti-simple-associable-choice) {
481
- outline-color: rgb(var(--qti-primary) 0.4);
641
+ border-radius: 0.375rem;
642
+ --tw-text-opacity: 1;
643
+ color: rgb(17 24 39 / var(--tw-text-opacity));
644
+ outline: 2px solid transparent;
482
645
  outline-offset: 2px;
483
- outline-style: solid;
484
- outline-width: var(--qti-border-width);
646
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
647
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
648
+ --tw-ring-inset: inset;
649
+ position: relative;
650
+ --tw-bg-opacity: 1;
651
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
652
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
653
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
654
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
655
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
656
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
657
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
658
+ --tw-ring-opacity: 1;
659
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
660
+ --tw-ring-offset-width: 1px;
661
+ --tw-ring-inset: unset;
662
+ display: inline-flex;
663
+ line-height: 1.5;
485
664
  }
486
- .qti-theme-raised qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-raised qti-gap-text:hover:not([disabled]), .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
487
- outline-color: rgb(var(--qti-primary) 0.4);
488
- outline-offset: 0;
489
- outline-style: solid;
490
- outline-width: calc(var(--qti-border-width) * 2);
665
+
666
+ qti-gap-match-interaction qti-gap:hover{
667
+ --tw-bg-opacity: 1;
668
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
491
669
  }
492
- .qti-theme-raised qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-raised qti-simple-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice::before, .qti-theme-raised qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-raised qti-gap-text::before, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice::before {
493
- position: absolute;
494
- bottom: 0.2rem;
495
- top: 0.2rem;
496
- left: 0.2rem;
497
- width: 0.3rem;
498
- max-height: 2rem;
499
- background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
500
- background-repeat: repeat;
501
- background-size: 0.3rem 0.3rem;
502
- content: "";
503
- }
504
- .qti-theme-raised qti-slider-interaction[disabled] {
505
- box-shadow: unset !important;
506
- color: var(--qti-border-color);
507
- cursor: unset !important;
508
- }
509
- .qti-theme-raised qti-slider-interaction:focus {
510
- outline-color: rgb(var(--qti-primary) 0.4);
511
- outline-offset: 2px;
512
- outline-style: solid;
513
- outline-width: var(--qti-border-width);
670
+
671
+ qti-gap-match-interaction qti-gap:focus{
672
+ outline-width: 2px;
673
+ outline-color: #fca5a5;
514
674
  }
515
- .qti-theme-raised qti-slider-interaction:hover:not([disabled]) {
516
- outline-color: rgb(var(--qti-primary) 0.4);
517
- outline-offset: 0;
518
- outline-style: solid;
519
- outline-width: calc(var(--qti-border-width) * 2);
675
+
676
+ qti-gap-match-interaction qti-gap{
677
+ width: 8rem;
520
678
  }
521
- .qti-theme-raised qti-slider-interaction::before {
522
- position: relative;
523
- display: inline-block;
524
- border-radius: var(--qti-border-radius);
525
- color: var(--qti-text-color);
526
- cursor: pointer;
527
- border-radius: calc(var(--qti-border-radius) * 3);
528
- background: var(--qti-background);
529
- box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
679
+
680
+ /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
681
+
682
+ qti-gap-match-interaction qti-gap:empty:after {
683
+ content: '\0000a0'; /* when empty, put a space in it */
684
+ }
685
+
686
+ qti-gap-match-interaction qti-gap:not(:empty){
687
+ display: inline-flex;
688
+ width: auto;
689
+ padding: 0px;
690
+ --tw-shadow: 0 0 #0000;
691
+ --tw-shadow-colored: 0 0 #0000;
692
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
530
693
  }
531
694
 
532
- /* </ end test classes for storybook> */
533
- .qti-theme-subtle {
534
- /* < usabled classes to extend in qti-components */
695
+ qti-gap-match-interaction qti-gap:not(:empty) > *{
696
+ flex: 1 1 0%;
697
+ --tw-rotate: 0deg;
698
+ 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));
699
+ --tw-shadow: 0 0 #0000;
700
+ --tw-shadow-colored: 0 0 #0000;
701
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
702
+ --tw-ring-opacity: 1;
703
+ --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
535
704
  }
536
- .qti-theme-subtle qti-text-entry-interaction {
537
- position: relative;
538
- display: inline-block;
539
- border-radius: var(--qti-border-radius);
540
- color: var(--qti-text-color);
541
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
542
- }
543
- .qti-theme-subtle qti-text-entry-interaction[disabled] {
544
- --qti-border-color: transparent;
545
- box-shadow: unset !important;
546
- color: var(--qti-shadow-color);
547
- cursor: unset !important;
548
- }
549
- .qti-theme-subtle qti-text-entry-interaction:focus {
550
- outline-color: rgb(var(--qti-primary) 0.4);
551
- outline-offset: 2px;
552
- outline-style: solid;
553
- outline-width: var(--qti-border-width);
705
+
706
+ qti-hotspot-interaction{
707
+ margin-top: 0.5rem;
708
+ margin-bottom: 0.5rem;
554
709
  }
555
- .qti-theme-subtle qti-text-entry-interaction:hover:not([disabled]) {
556
- outline-color: rgb(var(--qti-primary) 0.4);
557
- outline-offset: 0;
558
- outline-style: solid;
559
- outline-width: calc(var(--qti-border-width) * 2);
710
+
711
+ qti-hotspot-interaction qti-hotspot-choice:hover{
712
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity));
713
+ --tw-bg-opacity: 0.3;
560
714
  }
561
- .qti-theme-subtle .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice, .qti-theme-subtle .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-subtle qti-hottext {
562
- position: relative;
563
- display: inline-block;
564
- border-radius: var(--qti-border-radius);
565
- color: var(--qti-text-color);
566
- padding: var(--qti-padding-x) var(--qti-padding-y);
567
- cursor: pointer;
568
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
715
+
716
+ qti-hotspot-interaction qti-hotspot-choice[aria-checked='true']{
717
+ --tw-bg-opacity: 1;
718
+ background-color: rgb(220 38 38 / var(--tw-bg-opacity));
569
719
  }
570
- .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-subtle qti-hottext[disabled] {
571
- --qti-border-color: transparent;
572
- box-shadow: unset !important;
573
- color: var(--qti-shadow-color);
574
- cursor: unset !important;
720
+
721
+ qti-hottext-interaction{
722
+ margin-top: 0.5rem;
723
+ margin-bottom: 0.5rem;
575
724
  }
576
- .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-subtle qti-hottext:focus {
577
- outline-color: rgb(var(--qti-primary) 0.4);
725
+
726
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext{
727
+ cursor: pointer;
728
+ border-radius: 0.375rem;
729
+ --tw-text-opacity: 1;
730
+ color: rgb(17 24 39 / var(--tw-text-opacity));
731
+ outline: 2px solid transparent;
578
732
  outline-offset: 2px;
579
- outline-style: solid;
580
- outline-width: var(--qti-border-width);
733
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
734
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
735
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
736
+ --tw-ring-inset: inset;
737
+ --tw-ring-opacity: 1;
738
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
739
+ -webkit-user-select: none;
740
+ -moz-user-select: none;
741
+ user-select: none;
742
+ padding-left: 0.75rem;
743
+ padding-right: 0.75rem;
744
+ padding-top: 0.5rem;
745
+ padding-bottom: 0.5rem;
746
+ font-weight: 600;
747
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
748
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
749
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
750
+ display: inline-flex;
751
+
752
+ /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
753
+ /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
581
754
  }
582
- .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-hottext:hover:not([disabled]) {
583
- outline-color: rgb(var(--qti-primary) 0.4);
584
- outline-offset: 0;
585
- outline-style: solid;
586
- outline-width: calc(var(--qti-border-width) * 2);
755
+
756
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
757
+ --tw-bg-opacity: 1;
758
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
587
759
  }
588
- .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[aria-checked=true], .qti-theme-subtle .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-hottext[aria-checked=true] {
589
- --qti-border-color: var(--qti-primary-color);
590
- background-color: rgb(var(--qti-primary) 0.1);
760
+
761
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
762
+ outline-width: 2px;
763
+ outline-color: #fca5a5;
591
764
  }
592
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice, .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-hottext {
593
- cursor: pointer;
594
- --width: 22px;
595
- --height: 22px;
596
- display: inline-flex;
597
- width: fit-content;
598
- align-items: center;
599
- gap: 0.2rem;
765
+
766
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
767
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
768
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
769
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
770
+ --tw-ring-opacity: 1;
771
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
600
772
  }
601
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[disabled], .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-hottext[disabled] {
602
- --qti-border-color: transparent;
603
- box-shadow: unset !important;
604
- color: var(--qti-shadow-color);
605
- cursor: unset !important;
773
+
774
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
775
+ cursor: not-allowed;
776
+ --tw-bg-opacity: 1;
777
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
778
+ --tw-text-opacity: 1;
779
+ color: rgb(107 114 128 / var(--tw-text-opacity));
780
+ --tw-shadow: 0 0 #0000;
781
+ --tw-shadow-colored: 0 0 #0000;
782
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
783
+ --tw-ring-opacity: 1;
784
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
606
785
  }
607
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:focus, .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-hottext:focus {
608
- outline-color: rgb(var(--qti-primary) 0.4);
609
- outline-offset: 2px;
610
- outline-style: solid;
611
- outline-width: var(--qti-border-width);
786
+
787
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
788
+ --tw-text-opacity: 1 !important;
789
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
612
790
  }
613
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]), .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-hottext:hover:not([disabled]) {
614
- outline-color: rgb(var(--qti-primary) 0.4);
615
- outline-offset: 0;
616
- outline-style: solid;
617
- outline-width: calc(var(--qti-border-width) * 2);
791
+
792
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
793
+ cursor: pointer;
794
+ --tw-bg-opacity: 1;
795
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
796
+ --tw-shadow: 0 0 #0000;
797
+ --tw-shadow-colored: 0 0 #0000;
798
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
799
+ outline-width: 0px;
800
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
801
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
802
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
618
803
  }
619
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before, .qti-theme-subtle qti-simple-choice::before, .qti-theme-subtle qti-hottext::before {
620
- position: relative;
621
- display: inline-block;
622
- border-radius: var(--qti-border-radius);
623
- color: var(--qti-text-color);
624
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
804
+
805
+ qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
806
+ display: none !important;
625
807
  }
626
- .qti-theme-subtle qti-inline-choice-interaction {
627
- position: relative;
628
- display: inline-block;
629
- border-radius: var(--qti-border-radius);
630
- color: var(--qti-text-color);
631
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
632
- }
633
- .qti-theme-subtle qti-inline-choice-interaction[disabled] {
634
- --qti-border-color: transparent;
635
- box-shadow: unset !important;
636
- color: var(--qti-shadow-color);
637
- cursor: unset !important;
638
- }
639
- .qti-theme-subtle qti-inline-choice-interaction:focus {
640
- outline-color: rgb(var(--qti-primary) 0.4);
808
+
809
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
810
+ cursor: pointer;
811
+ border-radius: 0.375rem;
812
+ --tw-text-opacity: 1;
813
+ color: rgb(17 24 39 / var(--tw-text-opacity));
814
+ outline: 2px solid transparent;
641
815
  outline-offset: 2px;
642
- outline-style: solid;
643
- outline-width: var(--qti-border-width);
644
- }
645
- .qti-theme-subtle qti-inline-choice-interaction:hover:not([disabled]) {
646
- outline-color: rgb(var(--qti-primary) 0.4);
647
- outline-offset: 0;
648
- outline-style: solid;
649
- outline-width: calc(var(--qti-border-width) * 2);
650
- }
651
- .qti-theme-subtle qti-inline-choice-interaction::after {
652
- border-left: 5px solid transparent;
653
- border-right: 5px solid transparent;
654
- border-top: 8px solid var(--qti-border-color);
655
- clear: both;
656
- content: "";
657
- pointer-events: none;
658
- position: absolute;
659
- right: 5%;
660
- top: calc(50% - 3px);
661
- }
662
- .qti-theme-subtle qti-order-interaction::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-subtle qti-gap, .qti-theme-subtle qti-associate-interaction::part(drop-list) {
663
- position: relative;
664
- display: inline-block;
665
- border-radius: var(--qti-border-radius);
666
- color: var(--qti-text-color);
667
- background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
668
- transition: all 0.2s ease-out;
669
- }
670
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:empty::after, .qti-theme-subtle qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-subtle qti-gap:empty::after {
671
- padding: var(--qti-padding-x) var(--qti-padding-y);
672
- /* when empty, put a space in it, so the height remains the same */
673
- display: inline-block;
674
- content: " ";
675
- }
676
- .qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty), .qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty), .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) {
816
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
817
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
818
+ --tw-ring-inset: inset;
819
+ --tw-ring-opacity: 1;
820
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
677
821
  display: flex;
822
+ -webkit-user-select: none;
823
+ -moz-user-select: none;
824
+ user-select: none;
825
+ align-items: center;
826
+ gap: 0.5rem;
827
+ border-radius: 9999px;
828
+ padding-left: 0.25rem;
829
+ padding-right: 0.25rem;
830
+ padding-top: 0.125rem;
831
+ padding-bottom: 0.125rem;
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-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
836
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
837
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
678
838
  }
679
- .qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty) > *, .qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty) > *, .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) > * {
680
- flex-grow: 1;
681
- margin: 2px;
682
- }
683
- .qti-theme-subtle qti-order-interaction[active]::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice[active], .qti-theme-subtle qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-subtle qti-gap[active], .qti-theme-subtle qti-associate-interaction[active]::part(drop-list) {
684
- background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
685
- transform: scale(1.02);
839
+
840
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
841
+ /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
842
+ height: 66.666667%;
843
+ width: 66.666667%;
844
+ }
845
+
846
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
847
+ display: flex;
848
+ height: 1.25rem;
849
+ width: 1.25rem;
850
+ flex-shrink: 0;
851
+ align-items: center;
852
+ justify-content: center;
853
+ border-radius: 9999px;
854
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
855
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
856
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
857
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
858
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
859
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
860
+ --tw-ring-inset: inset;
861
+ --tw-ring-opacity: 1;
862
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
686
863
  }
687
- .qti-theme-subtle qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-order-interaction::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-subtle qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-subtle qti-gap-text, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-associate-interaction::part(qti-simple-associable-choice) {
688
- position: relative;
689
- display: inline-block;
690
- border-radius: var(--qti-border-radius);
691
- color: var(--qti-text-color);
692
- padding: var(--qti-padding-x) var(--qti-padding-y);
693
- cursor: pointer;
694
- user-select: none;
695
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
864
+
865
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
866
+ border-radius: 9999px;
867
+ --tw-bg-opacity: 1;
868
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
696
869
  }
697
- .qti-theme-subtle qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-subtle qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-subtle qti-gap-text[disabled], .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
698
- --qti-border-color: transparent;
699
- box-shadow: unset !important;
700
- color: var(--qti-shadow-color);
701
- cursor: unset !important;
870
+
871
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
872
+ display: flex;
873
+ height: 1.25rem;
874
+ width: 1.25rem;
875
+ flex-shrink: 0;
876
+ align-items: center;
877
+ justify-content: center;
878
+ border-radius: 0.25rem;
879
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
880
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
881
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
882
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
883
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
884
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
885
+ --tw-ring-inset: inset;
886
+ --tw-ring-opacity: 1;
887
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
702
888
  }
703
- .qti-theme-subtle qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-order-interaction:focus::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:focus, .qti-theme-subtle qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-subtle qti-gap-text:focus, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-associate-interaction:focus::part(qti-simple-associable-choice) {
704
- outline-color: rgb(var(--qti-primary) 0.4);
705
- outline-offset: 2px;
706
- outline-style: solid;
707
- outline-width: var(--qti-border-width);
889
+
890
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox'][aria-checked='true']::part(cha) {
891
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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");
892
+ }
893
+
894
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
895
+ display: inline-flex;
896
+
897
+ /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
898
+
899
+ gap: 0.125rem;
900
+
901
+ outline-offset: 0px;
902
+
903
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
904
+
905
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
906
+
907
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
708
908
  }
709
- .qti-theme-subtle qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-subtle qti-gap-text:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
710
- outline-color: rgb(var(--qti-primary) 0.4);
711
- outline-offset: 0;
712
- outline-style: solid;
713
- outline-width: calc(var(--qti-border-width) * 2);
909
+
910
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
911
+ height: 1rem !important;
912
+ width: 1rem !important;
913
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
914
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
915
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
714
916
  }
715
- .qti-theme-subtle qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-subtle qti-simple-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice::before, .qti-theme-subtle qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-subtle qti-gap-text::before, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice::before {
716
- position: absolute;
717
- bottom: 0.2rem;
718
- top: 0.2rem;
719
- left: 0.2rem;
720
- width: 0.3rem;
721
- max-height: 2rem;
722
- background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
723
- background-repeat: repeat;
724
- background-size: 0.3rem 0.3rem;
725
- content: "";
726
- }
727
- .qti-theme-subtle qti-slider-interaction {
728
- cursor: pointer;
917
+
918
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
919
+ --tw-bg-opacity: 1;
920
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
729
921
  }
730
- .qti-theme-subtle qti-slider-interaction[aria-checked=true] {
731
- --qti-border-color: var(--qti-primary-color);
732
- background-color: rgb(var(--qti-primary) 0.1);
922
+
923
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
924
+ outline-width: 2px;
925
+ outline-color: #fca5a5;
733
926
  }
734
- .qti-theme-subtle qti-slider-interaction[disabled] {
735
- --qti-border-color: transparent;
736
- box-shadow: unset !important;
737
- color: var(--qti-shadow-color);
738
- cursor: unset !important;
927
+
928
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
929
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
930
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
931
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
932
+ --tw-ring-opacity: 1;
933
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
739
934
  }
740
- .qti-theme-subtle qti-slider-interaction:focus {
741
- outline-color: rgb(var(--qti-primary) 0.4);
742
- outline-offset: 2px;
743
- outline-style: solid;
744
- outline-width: var(--qti-border-width);
935
+
936
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
937
+ cursor: not-allowed;
938
+ --tw-bg-opacity: 1;
939
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
940
+ --tw-text-opacity: 1;
941
+ color: rgb(107 114 128 / var(--tw-text-opacity));
942
+ --tw-shadow: 0 0 #0000;
943
+ --tw-shadow-colored: 0 0 #0000;
944
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
945
+ --tw-ring-opacity: 1;
946
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
745
947
  }
746
- .qti-theme-subtle qti-slider-interaction:hover:not([disabled]) {
747
- outline-color: rgb(var(--qti-primary) 0.4);
748
- outline-offset: 0;
749
- outline-style: solid;
750
- outline-width: calc(var(--qti-border-width) * 2);
948
+
949
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
950
+ --tw-text-opacity: 1 !important;
951
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
751
952
  }
752
- .qti-theme-subtle qti-slider-interaction::before {
753
- position: relative;
754
- display: inline-block;
755
- border-radius: var(--qti-border-radius);
756
- color: var(--qti-text-color);
953
+
954
+ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
757
955
  cursor: pointer;
758
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
956
+ --tw-bg-opacity: 1;
957
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
958
+ --tw-shadow: 0 0 #0000;
959
+ --tw-shadow-colored: 0 0 #0000;
960
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
961
+ outline-width: 0px;
962
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
963
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
964
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
759
965
  }
760
966
 
761
- .qti-theme-ims {
762
- /* < usabled classes to extend in qti-components > */
763
- }
764
- .qti-theme-ims qti-text-entry-interaction {
765
- position: relative;
766
- display: inline-block;
767
- border-radius: var(--qti-border-radius);
768
- color: var(--qti-text-color);
769
- background: var(--qti-background);
770
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
771
- }
772
- .qti-theme-ims qti-text-entry-interaction[disabled] {
773
- --qti-border-color: var(--qti-shadow-color);
774
- color: var(--qti-shadow-color);
775
- cursor: unset !important;
776
- filter: grayscale(100%);
777
- }
778
- .qti-theme-ims qti-text-entry-interaction:focus-within {
779
- outline-color: rgb(var(--qti-primary) 0.6);
780
- outline-offset: 4px;
781
- outline-style: solid;
782
- outline-width: var(--qti-border-width);
783
- /* applies to all before elements, choice round and circle, slider thumb */
784
- }
785
- .qti-theme-ims qti-text-entry-interaction:focus-within::before {
786
- background-color: rgb(var(--qti-primary) 0.2);
787
- }
788
- .qti-theme-ims qti-text-entry-interaction:hover:not([disabled]) {
789
- outline-color: rgb(var(--qti-primary) 0.4);
790
- outline-offset: 2px;
791
- outline-style: solid;
792
- outline-width: calc(var(--qti-border-width) * 2);
793
- }
794
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-ims qti-simple-choice, .qti-theme-ims .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-ims qti-hottext {
795
- position: relative;
796
- display: inline-block;
797
- border-radius: var(--qti-border-radius);
798
- color: var(--qti-text-color);
799
- padding: var(--qti-padding-x) var(--qti-padding-y);
967
+ qti-inline-choice-interaction::part(select){
800
968
  cursor: pointer;
801
- background: var(--qti-background);
802
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
803
- }
804
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-ims qti-hottext[disabled] {
805
- --qti-border-color: var(--qti-shadow-color);
806
- color: var(--qti-shadow-color);
807
- cursor: unset !important;
808
- filter: grayscale(100%);
809
- }
810
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within {
811
- outline-color: rgb(var(--qti-primary) 0.6);
812
- outline-offset: 4px;
813
- outline-style: solid;
814
- outline-width: var(--qti-border-width);
815
- /* applies to all before elements, choice round and circle, slider thumb */
816
- }
817
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within::before {
818
- background-color: rgb(var(--qti-primary) 0.2);
819
- }
820
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-hottext:hover:not([disabled]) {
821
- outline-color: rgb(var(--qti-primary) 0.4);
969
+ border-radius: 0.375rem;
970
+ --tw-text-opacity: 1;
971
+ color: rgb(17 24 39 / var(--tw-text-opacity));
972
+ outline: 2px solid transparent;
822
973
  outline-offset: 2px;
823
- outline-style: solid;
824
- outline-width: calc(var(--qti-border-width) * 2);
825
- }
826
- .qti-theme-ims .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[aria-checked=true], .qti-theme-ims .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-hottext[aria-checked=true] {
827
- --qti-border-color: var(--qti-primary-color);
828
- background-color: var(--qti-primary-color);
829
- color: #fff;
974
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
975
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
976
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
977
+ --tw-ring-inset: inset;
978
+ --tw-ring-opacity: 1;
979
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
980
+ position: relative;
981
+ -webkit-appearance: none;
982
+ -moz-appearance: none;
983
+ appearance: none;
984
+ padding-left: 0.75rem;
985
+ padding-top: 0.5rem;
986
+ padding-bottom: 0.5rem;
987
+ padding-right: 1.75rem;
988
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
989
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
990
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
991
+ 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")
992
+ no-repeat center right 6px;
830
993
  }
831
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice {
832
- padding: var(--qti-padding-x) var(--qti-padding-y);
833
- cursor: pointer;
834
- background: var(--qti-background);
835
- }
836
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled] {
837
- --qti-border-color: var(--qti-shadow-color);
838
- color: var(--qti-shadow-color);
839
- cursor: unset !important;
840
- filter: grayscale(100%);
841
- }
842
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within {
843
- outline-color: rgb(var(--qti-primary) 0.6);
844
- outline-offset: 4px;
845
- outline-style: solid;
846
- outline-width: var(--qti-border-width);
847
- /* applies to all before elements, choice round and circle, slider thumb */
848
- }
849
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before {
850
- background-color: rgb(var(--qti-primary) 0.2);
851
- }
852
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]) {
853
- outline-color: rgb(var(--qti-primary) 0.4);
854
- outline-offset: 2px;
855
- outline-style: solid;
856
- outline-width: calc(var(--qti-border-width) * 2);
994
+
995
+ qti-inline-choice-interaction::part(select):hover{
996
+ --tw-bg-opacity: 1;
997
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
857
998
  }
858
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[aria-checked=true] {
859
- --qti-border-color: var(--qti-primary-color);
860
- background-color: var(--qti-primary-color);
861
- color: #fff;
999
+
1000
+ qti-inline-choice-interaction::part(select):focus{
1001
+ outline-width: 2px;
1002
+ outline-color: #fca5a5;
862
1003
  }
863
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice, .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-hottext {
864
- cursor: pointer;
865
- --width: 22px;
866
- --height: 22px;
867
- display: inline-flex;
868
- width: fit-content;
869
- align-items: center;
870
- gap: 0.2rem;
871
- }
872
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[disabled], .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-hottext[disabled] {
873
- --qti-border-color: var(--qti-shadow-color);
874
- color: var(--qti-shadow-color);
875
- cursor: unset !important;
876
- filter: grayscale(100%);
877
- }
878
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within, .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-hottext:focus-within {
879
- outline-color: rgb(var(--qti-primary) 0.6);
880
- outline-offset: 4px;
881
- outline-style: solid;
882
- outline-width: var(--qti-border-width);
883
- /* applies to all before elements, choice round and circle, slider thumb */
884
- }
885
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before, .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims qti-hottext:focus-within::before {
886
- background-color: rgb(var(--qti-primary) 0.2);
887
- }
888
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]), .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-hottext:hover:not([disabled]) {
889
- outline-color: rgb(var(--qti-primary) 0.4);
890
- outline-offset: 2px;
891
- outline-style: solid;
892
- outline-width: calc(var(--qti-border-width) * 2);
893
- }
894
- .qti-theme-ims qti-simple-choice[role=checkbox]::before, .qti-theme-ims qti-hottext[role=checkbox]::before {
895
- content: "";
896
- min-height: var(--width);
897
- min-width: var(--width);
898
- transition: border-radius 1s ease-in;
899
- }
900
- .qti-theme-ims qti-simple-choice[role=checkbox]::after, .qti-theme-ims qti-hottext[role=checkbox]::after {
901
- border-bottom: 3px solid var(--qti-primary-color);
902
- border-left: 3px solid var(--qti-primary-color);
903
- content: "";
904
- display: inline-block;
905
- height: 6px;
906
- opacity: 0;
907
- position: absolute;
908
- transform: translate(6px, -2px) rotate(-45deg);
909
- transition: all 0.2s ease;
910
- width: 10px;
911
- }
912
- .qti-theme-ims qti-simple-choice[role=checkbox][aria-checked=true]::after, .qti-theme-ims qti-hottext[role=checkbox][aria-checked=true]::after {
913
- border-bottom: 2px solid var(--qti-primary-color);
914
- border-left: 2px solid var(--qti-primary-color);
915
- opacity: 1;
916
- }
917
- .qti-theme-ims qti-simple-choice[role=radio]::before, .qti-theme-ims qti-hottext[role=radio]::before {
918
- border-radius: 100%;
919
- content: "";
920
- min-height: 22px;
921
- min-width: 22px;
922
- }
923
- .qti-theme-ims qti-simple-choice[role=radio]::after, .qti-theme-ims qti-hottext[role=radio]::after {
924
- background: var(--qti-primary-color);
925
- border-radius: 100%;
926
- content: "";
927
- display: inline-block;
928
- height: 14px;
929
- margin-left: 4px;
930
- opacity: 0;
931
- position: absolute;
932
- transform: scale(0.8);
933
- transition: all 0.1s ease-out;
934
- width: 14px;
1004
+
1005
+ qti-inline-choice-interaction[aria-checked="true"]::part(select){
1006
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1007
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1008
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1009
+ --tw-ring-opacity: 1;
1010
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
935
1011
  }
936
- .qti-theme-ims qti-simple-choice[role=radio][aria-checked=true]::after, .qti-theme-ims qti-hottext[role=radio][aria-checked=true]::after {
937
- opacity: 1;
938
- transform: scale(1);
1012
+
1013
+ qti-inline-choice-interaction[aria-disabled="true"]::part(select){
1014
+ cursor: not-allowed;
1015
+ --tw-bg-opacity: 1;
1016
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1017
+ --tw-text-opacity: 1;
1018
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1019
+ --tw-shadow: 0 0 #0000;
1020
+ --tw-shadow-colored: 0 0 #0000;
1021
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1022
+ --tw-ring-opacity: 1;
1023
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
939
1024
  }
940
- .qti-theme-ims qti-simple-choice::before, .qti-theme-ims qti-hottext::before {
941
- position: relative;
942
- display: inline-block;
943
- border-radius: var(--qti-border-radius);
944
- color: var(--qti-text-color);
945
- background: var(--qti-background);
946
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
1025
+
1026
+ qti-inline-choice-interaction::part(select)[aria-disabled="true"] > *{
1027
+ --tw-text-opacity: 1 !important;
1028
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
947
1029
  }
948
- .qti-theme-ims qti-inline-choice-interaction {
949
- position: relative;
950
- display: inline-block;
951
- border-radius: var(--qti-border-radius);
952
- color: var(--qti-text-color);
1030
+
1031
+ qti-inline-choice-interaction[aria-readonly="true"]::part(select){
953
1032
  cursor: pointer;
954
- background: var(--qti-background);
955
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
956
- }
957
- .qti-theme-ims qti-inline-choice-interaction[disabled] {
958
- --qti-border-color: var(--qti-shadow-color);
959
- color: var(--qti-shadow-color);
960
- cursor: unset !important;
961
- filter: grayscale(100%);
962
- }
963
- .qti-theme-ims qti-inline-choice-interaction:focus-within {
964
- outline-color: rgb(var(--qti-primary) 0.6);
965
- outline-offset: 4px;
966
- outline-style: solid;
967
- outline-width: var(--qti-border-width);
968
- /* applies to all before elements, choice round and circle, slider thumb */
969
- }
970
- .qti-theme-ims qti-inline-choice-interaction:focus-within::before {
971
- background-color: rgb(var(--qti-primary) 0.2);
972
- }
973
- .qti-theme-ims qti-inline-choice-interaction:hover:not([disabled]) {
974
- outline-color: rgb(var(--qti-primary) 0.4);
975
- outline-offset: 2px;
976
- outline-style: solid;
977
- outline-width: calc(var(--qti-border-width) * 2);
978
- }
979
- .qti-theme-ims qti-inline-choice-interaction::after {
980
- border-left: 5px solid transparent;
981
- border-right: 5px solid transparent;
982
- border-top: 8px solid var(--qti-border-color);
983
- clear: both;
984
- content: "";
985
- pointer-events: none;
986
- position: absolute;
987
- right: 5%;
988
- top: calc(50% - 3px);
1033
+ --tw-bg-opacity: 1;
1034
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1035
+ --tw-shadow: 0 0 #0000;
1036
+ --tw-shadow-colored: 0 0 #0000;
1037
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1038
+ outline-width: 0px;
1039
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1040
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1041
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
989
1042
  }
990
- .qti-theme-ims qti-order-interaction::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-ims qti-gap, .qti-theme-ims qti-associate-interaction::part(drop-list) {
991
- position: relative;
992
- display: inline-block;
993
- border-radius: var(--qti-border-radius);
994
- color: var(--qti-text-color);
995
- border-radius: 0;
996
- background: var(--qti-white);
997
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
998
- }
999
- .qti-theme-ims qti-order-interaction[disabled]::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-gap-match-interaction qti-gap[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(drop-list) {
1000
- --qti-border-color: var(--qti-shadow-color);
1001
- color: var(--qti-shadow-color);
1002
- cursor: unset !important;
1003
- filter: grayscale(100%);
1004
- }
1005
- .qti-theme-ims qti-order-interaction:focus-within::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-gap-match-interaction qti-gap:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(drop-list) {
1006
- outline-color: rgb(var(--qti-primary) 0.6);
1007
- outline-offset: 4px;
1008
- outline-style: solid;
1009
- outline-width: var(--qti-border-width);
1010
- /* applies to all before elements, choice round and circle, slider thumb */
1011
- }
1012
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-gap-match-interaction qti-gap:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within::before {
1013
- background-color: rgb(var(--qti-primary) 0.2);
1014
- }
1015
- .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-gap-match-interaction qti-gap:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(drop-list) {
1016
- outline-color: rgb(var(--qti-primary) 0.4);
1017
- outline-offset: 2px;
1018
- outline-style: solid;
1019
- outline-width: calc(var(--qti-border-width) * 2);
1043
+
1044
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
1045
+ display: flex;
1046
+ flex-wrap: wrap;
1047
+ gap: 0.5rem;
1048
+ padding-bottom: 1rem;
1020
1049
  }
1021
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:empty::after, .qti-theme-ims qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-ims qti-gap:empty::after {
1022
- padding: var(--qti-padding-x) var(--qti-padding-y);
1023
- /* when empty, put a space in it, so the height remains the same */
1024
- display: inline-block;
1025
- content: " ";
1050
+
1051
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
1052
+ cursor: pointer;
1053
+ border-radius: 0.375rem;
1054
+ --tw-text-opacity: 1;
1055
+ color: rgb(17 24 39 / var(--tw-text-opacity));
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
+ cursor: grab;
1065
+ -webkit-user-select: none;
1066
+ -moz-user-select: none;
1067
+ user-select: none;
1068
+ --tw-bg-opacity: 1;
1069
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
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
+ background-image: radial-gradient(
1075
+ circle at center,
1076
+ rgba(0, 0, 0, 0.1) 0,
1077
+ rgb(0, 0, 0, 0.1) 2px,
1078
+ white 2px,
1079
+ white 100%
1080
+ );
1081
+ background-repeat: repeat-y;
1082
+ background-position: left 2px;
1083
+ background-size: 14px 8px;
1084
+ padding-top: 0.5rem;
1085
+ padding-bottom: 0.5rem;
1086
+ padding-left: 1rem;
1087
+ padding-right: 0.75rem;
1026
1088
  }
1027
- .qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty), .qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty), .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) {
1028
- display: inline-flex;
1089
+
1090
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
1091
+ --tw-bg-opacity: 1;
1092
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1029
1093
  }
1030
- .qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty) > *, .qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty) > *, .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) > * {
1031
- flex-grow: 1;
1032
- margin: 2px;
1094
+
1095
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
1096
+ outline-width: 2px;
1097
+ outline-color: #fca5a5;
1033
1098
  }
1034
- .qti-theme-ims qti-order-interaction[active]::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-ims qti-gap[active], .qti-theme-ims qti-associate-interaction[active]::part(drop-list) {
1035
- background: rgb(var(--qti-primary) 0.4) !important;
1099
+
1100
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
1101
+ display: grid;
1102
+ grid-auto-columns: minmax(0, 1fr);
1103
+ grid-auto-flow: column;
1104
+ gap: 0.5rem;
1036
1105
  }
1037
- .qti-theme-ims qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-order-interaction::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-ims qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-ims qti-gap-text, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-associate-interaction::part(qti-simple-associable-choice) {
1038
- position: relative;
1039
- display: inline-block;
1040
- border-radius: var(--qti-border-radius);
1041
- color: var(--qti-text-color);
1106
+
1107
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
1042
1108
  cursor: pointer;
1043
- padding: var(--qti-padding-x) var(--qti-padding-y);
1044
- background: var(--qti-background);
1045
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
1046
- }
1047
- .qti-theme-ims qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-ims qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap-text[disabled], .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
1048
- --qti-border-color: var(--qti-shadow-color);
1049
- color: var(--qti-shadow-color);
1050
- cursor: unset !important;
1051
- filter: grayscale(100%);
1052
- }
1053
- .qti-theme-ims qti-order-interaction qti-simple-choice:focus-within, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-order-interaction:focus-within::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within, .qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(qti-simple-associable-choice) {
1054
- outline-color: rgb(var(--qti-primary) 0.6);
1055
- outline-offset: 4px;
1056
- outline-style: solid;
1057
- outline-width: var(--qti-border-width);
1058
- /* applies to all before elements, choice round and circle, slider thumb */
1059
- }
1060
- .qti-theme-ims qti-order-interaction qti-simple-choice:focus-within::before, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within::before, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within::before, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within::before {
1061
- background-color: rgb(var(--qti-primary) 0.2);
1062
- }
1063
- .qti-theme-ims qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap-text:hover:not([disabled]), .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
1064
- outline-color: rgb(var(--qti-primary) 0.4);
1109
+ border-radius: 0.375rem;
1110
+ --tw-text-opacity: 1;
1111
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1112
+ outline: 2px solid transparent;
1065
1113
  outline-offset: 2px;
1066
- outline-style: solid;
1067
- outline-width: calc(var(--qti-border-width) * 2);
1068
- }
1069
- .qti-theme-ims qti-order-interaction qti-simple-choice[active], qti-order-interaction .qti-theme-ims qti-simple-choice[active], .qti-theme-ims qti-order-interaction[active]::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[active], .qti-theme-ims qti-gap-match-interaction qti-gap-text[active], qti-gap-match-interaction .qti-theme-ims qti-gap-text[active], .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[active], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-associate-interaction[active]::part(qti-simple-associable-choice) {
1070
- background: rgb(var(--qti-primary) 0.4) !important;
1071
- }
1072
- .qti-theme-ims qti-slider-interaction {
1073
- cursor: pointer;
1114
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1115
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1116
+ --tw-ring-inset: inset;
1117
+ position: relative;
1118
+ --tw-bg-opacity: 1;
1119
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1120
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1121
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1122
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1123
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1124
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1125
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1126
+ --tw-ring-opacity: 1;
1127
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1128
+ --tw-ring-offset-width: 1px;
1129
+ --tw-ring-inset: unset;
1074
1130
  }
1075
- .qti-theme-ims qti-slider-interaction[disabled] {
1076
- --qti-border-color: var(--qti-shadow-color);
1077
- color: var(--qti-shadow-color);
1078
- cursor: unset !important;
1079
- filter: grayscale(100%);
1131
+
1132
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
1133
+ --tw-bg-opacity: 1;
1134
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1080
1135
  }
1081
- .qti-theme-ims qti-slider-interaction:focus-within {
1082
- outline-color: rgb(var(--qti-primary) 0.6);
1083
- outline-offset: 4px;
1084
- outline-style: solid;
1085
- outline-width: var(--qti-border-width);
1086
- /* applies to all before elements, choice round and circle, slider thumb */
1136
+
1137
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
1138
+ outline-width: 2px;
1139
+ outline-color: #fca5a5;
1087
1140
  }
1088
- .qti-theme-ims qti-slider-interaction:focus-within::before {
1089
- background-color: rgb(var(--qti-primary) 0.2);
1141
+
1142
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
1143
+ display: flex;
1144
+ flex-direction: column;
1145
+ gap: 0.5rem;
1090
1146
  }
1091
- .qti-theme-ims qti-slider-interaction:hover:not([disabled]) {
1092
- outline-color: rgb(var(--qti-primary) 0.4);
1147
+
1148
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice{
1149
+ cursor: pointer;
1150
+ border-radius: 0.375rem;
1151
+ --tw-text-opacity: 1;
1152
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1153
+ outline: 2px solid transparent;
1093
1154
  outline-offset: 2px;
1094
- outline-style: solid;
1095
- outline-width: calc(var(--qti-border-width) * 2);
1155
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1156
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1157
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1158
+ --tw-ring-inset: inset;
1159
+ --tw-ring-opacity: 1;
1160
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1161
+ cursor: grab;
1162
+ -webkit-user-select: none;
1163
+ -moz-user-select: none;
1164
+ user-select: none;
1165
+ --tw-bg-opacity: 1;
1166
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1167
+ padding-top: 0.25rem;
1168
+ padding-bottom: 0.25rem;
1169
+ padding-left: 1rem;
1170
+ padding-right: 0.5rem;
1171
+ font-weight: 600;
1172
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1173
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1174
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1175
+ background-image: radial-gradient(
1176
+ circle at center,
1177
+ rgba(0, 0, 0, 0.1) 0,
1178
+ rgb(0, 0, 0, 0.1) 2px,
1179
+ white 2px,
1180
+ white 100%
1181
+ );
1182
+ background-repeat: repeat-y;
1183
+ background-position: left 2px;
1184
+ background-size: 14px 8px;
1096
1185
  }
1097
- .qti-theme-ims qti-slider-interaction::part(knob) {
1098
- position: relative;
1099
- display: inline-block;
1100
- border-radius: var(--qti-border-radius);
1101
- color: var(--qti-text-color);
1102
- cursor: pointer;
1103
- border-radius: calc(var(--qti-border-radius) * 3);
1104
- background: var(--qti-background);
1105
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
1106
- width: 24px;
1107
- height: 24px;
1108
- border-radius: 100%;
1109
- aspect-ratio: 1/1;
1110
- transform: translateX(-50%);
1111
- transform-origin: center;
1186
+
1187
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
1188
+ --tw-bg-opacity: 1;
1189
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1112
1190
  }
1113
1191
 
1114
- /* Choice as checkbox */
1115
- qti-hottext {
1116
- position: relative;
1117
- vertical-align: bottom;
1192
+ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
1193
+ outline-width: 2px;
1194
+ outline-color: #fca5a5;
1118
1195
  }
1119
1196
 
1120
- .qti-input-control-hidden qti-hottext {
1121
- vertical-align: unset;
1197
+ qti-order-interaction::part(qti-simple-choice),
1198
+ qti-order-interaction qti-simple-choice{
1199
+ cursor: pointer;
1200
+ border-radius: 0.375rem;
1201
+ --tw-text-opacity: 1;
1202
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1203
+ outline: 2px solid transparent;
1204
+ outline-offset: 2px;
1205
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1206
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1207
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1208
+ --tw-ring-inset: inset;
1209
+ --tw-ring-opacity: 1;
1210
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1211
+ cursor: grab;
1212
+ -webkit-user-select: none;
1213
+ -moz-user-select: none;
1214
+ user-select: none;
1215
+ --tw-bg-opacity: 1;
1216
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1217
+ font-weight: 600;
1218
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1219
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1220
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1221
+ background-image: radial-gradient(
1222
+ circle at center,
1223
+ rgba(0, 0, 0, 0.1) 0,
1224
+ rgb(0, 0, 0, 0.1) 2px,
1225
+ white 2px,
1226
+ white 100%
1227
+ );
1228
+ background-repeat: repeat-y;
1229
+ background-position: left 2px;
1230
+ background-size: 14px 8px;
1231
+ padding-top: 0.5rem;
1232
+ padding-bottom: 0.5rem;
1233
+ padding-left: 1rem;
1234
+ padding-right: 0.75rem;
1122
1235
  }
1123
- .qti-input-control-hidden qti-hottext::before, .qti-input-control-hidden qti-hottext::after {
1124
- content: unset !important;
1236
+
1237
+ qti-order-interaction::part(qti-simple-choice):hover,
1238
+ qti-order-interaction qti-simple-choice:hover{
1239
+ --tw-bg-opacity: 1;
1240
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1125
1241
  }
1126
1242
 
1127
- qti-modal-feedback[showstatus=on] {
1128
- position: absolute;
1129
- top: 2rem;
1130
- right: 0;
1131
- left: 0;
1132
- width: 400px;
1133
- height: 300px;
1134
- border: 1px solid #ddd;
1135
- border-radius: 10px;
1136
- margin-right: auto;
1137
- margin-left: auto;
1138
- background-color: white;
1139
- text-align: center;
1243
+ qti-order-interaction::part(qti-simple-choice):focus,
1244
+ qti-order-interaction qti-simple-choice:focus{
1245
+ outline-width: 2px;
1246
+ outline-color: #fca5a5;
1140
1247
  }
1141
1248
 
1142
- qti-associate-interaction::part(associables-container) {
1249
+ qti-order-interaction::part(qti-simple-choice){
1143
1250
  display: flex;
1144
1251
  width: 100%;
1145
- height: 100%;
1146
- justify-content: space-between;
1147
- margin-top: 1rem;
1148
- background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(50% - 1px), var(--qti-border-color) 50%, rgba(0, 0, 0, 0) calc(50% + 1px));
1252
+ align-items: center;
1253
+ overflow: hidden;
1254
+ text-overflow: ellipsis;
1149
1255
  }
1150
1256
 
1151
- qti-associate-interaction::part(drop-list) {
1152
- width: 30%;
1153
- height: 40px;
1257
+ qti-order-interaction::part(drops){
1258
+ gap: 0.5rem;
1154
1259
  }
1155
1260
 
1156
- /* Choice as checkbox */
1157
- qti-simple-choice {
1158
- position: relative;
1261
+ qti-order-interaction::part(drags){
1262
+ gap: 0.5rem;
1159
1263
  }
1160
1264
 
1161
- .qti-input-control-hidden qti-simple-choice::before, .qti-input-control-hidden qti-simple-choice::after {
1162
- content: unset !important;
1265
+ qti-order-interaction::part(drop-list){
1266
+ cursor: pointer;
1267
+ border-radius: 0.375rem;
1268
+ --tw-text-opacity: 1;
1269
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1270
+ outline: 2px solid transparent;
1271
+ outline-offset: 2px;
1272
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1273
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1274
+ --tw-ring-inset: inset;
1275
+ position: relative;
1276
+ --tw-bg-opacity: 1;
1277
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1278
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1279
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1280
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1281
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1282
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1283
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1284
+ --tw-ring-opacity: 1;
1285
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1286
+ --tw-ring-offset-width: 1px;
1287
+ --tw-ring-inset: unset;
1288
+ display: flex;
1289
+ min-height: 4rem;
1163
1290
  }
1164
1291
 
1165
- qti-choice-interaction {
1166
- display: grid;
1167
- grid-auto-flow: row dense;
1168
- grid-gap: 10px;
1169
- grid-template-rows: auto auto;
1170
- }
1171
- qti-choice-interaction.qti-choices-stacking-2 {
1172
- grid-template-columns: repeat(2, 1fr);
1173
- }
1174
- qti-choice-interaction.qti-choices-stacking-3 {
1175
- grid-template-columns: repeat(3, 1fr);
1292
+ qti-order-interaction::part(drop-list):hover{
1293
+ --tw-bg-opacity: 1;
1294
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1176
1295
  }
1177
- qti-choice-interaction.qti-choices-stacking-4 {
1178
- grid-template-columns: repeat(4, 1fr);
1296
+
1297
+ qti-order-interaction::part(drop-list):focus{
1298
+ outline-width: 2px;
1299
+ outline-color: #fca5a5;
1179
1300
  }
1180
- qti-choice-interaction.qti-choices-stacking-5 {
1181
- grid-template-columns: repeat(5, 1fr);
1301
+
1302
+ qti-order-interaction::part(active){
1303
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1304
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1306
+ --tw-ring-opacity: 1;
1307
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
1182
1308
  }
1183
- qti-choice-interaction.qti-orientation-horizontal {
1184
- display: flex;
1309
+
1310
+ qti-associate-interaction::part(qti-simple-associable-choice),
1311
+ qti-associate-interaction qti-simple-associable-choice{
1312
+ cursor: pointer;
1313
+ border-radius: 0.375rem;
1314
+ --tw-text-opacity: 1;
1315
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1316
+ outline: 2px solid transparent;
1317
+ outline-offset: 2px;
1318
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1319
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1320
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1321
+ --tw-ring-inset: inset;
1322
+ --tw-ring-opacity: 1;
1323
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1324
+ cursor: grab;
1325
+ -webkit-user-select: none;
1326
+ -moz-user-select: none;
1327
+ user-select: none;
1328
+ --tw-bg-opacity: 1;
1329
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1330
+ font-weight: 600;
1331
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1332
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1333
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1334
+ background-image: radial-gradient(
1335
+ circle at center,
1336
+ rgba(0, 0, 0, 0.1) 0,
1337
+ rgb(0, 0, 0, 0.1) 2px,
1338
+ white 2px,
1339
+ white 100%
1340
+ );
1341
+ background-repeat: repeat-y;
1342
+ background-position: left 2px;
1343
+ background-size: 14px 8px;
1344
+ display: flex;
1345
+ align-items: center;
1346
+ overflow: hidden;
1347
+ text-overflow: ellipsis;
1348
+ padding-top: 0.5rem;
1349
+ padding-bottom: 0.5rem;
1350
+ padding-left: 1rem;
1351
+ padding-right: 0.75rem;
1185
1352
  }
1186
- qti-choice-interaction[orientation=horizontal] {
1187
- display: flex;
1353
+
1354
+ qti-associate-interaction::part(qti-simple-associable-choice):hover,
1355
+ qti-associate-interaction qti-simple-associable-choice:hover{
1356
+ --tw-bg-opacity: 1;
1357
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1188
1358
  }
1189
1359
 
1190
- .qti-height-lines-3 {
1191
- width: 100%;
1360
+ qti-associate-interaction::part(qti-simple-associable-choice):focus,
1361
+ qti-associate-interaction qti-simple-associable-choice:focus{
1362
+ outline-width: 2px;
1363
+ outline-color: #fca5a5;
1192
1364
  }
1193
1365
 
1194
- .qti-height-lines-6 {
1366
+ qti-associate-interaction::part(associables-container){
1367
+ margin-top: 0.5rem;
1368
+ margin-bottom: 0.5rem;
1369
+ display: flex;
1195
1370
  width: 100%;
1371
+ justify-content: space-between;
1372
+ background: linear-gradient(
1373
+ 180deg,
1374
+ rgb(0 0 0 / 0%) calc(50% - 1px),
1375
+ #ff0000 calc(50%),
1376
+ rgb(0 0 0 / 0%) calc(50% + 1px)
1377
+ );
1196
1378
  }
1197
1379
 
1198
- .qti-height-lines-15 {
1199
- width: 100%;
1380
+ qti-associate-interaction::part(active){
1381
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1382
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1383
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1384
+ --tw-ring-opacity: 1;
1385
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
1200
1386
  }
1201
1387
 
1202
- qti-gap-match-interaction {
1203
- display: block;
1388
+ qti-associate-interaction::part(drop-list){
1389
+ cursor: pointer;
1390
+ border-radius: 0.375rem;
1391
+ --tw-text-opacity: 1;
1392
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1393
+ outline: 2px solid transparent;
1394
+ outline-offset: 2px;
1395
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1396
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1397
+ --tw-ring-inset: inset;
1398
+ position: relative;
1399
+ --tw-bg-opacity: 1;
1400
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1401
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1402
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1403
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1404
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1405
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1406
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1407
+ --tw-ring-opacity: 1;
1408
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1409
+ --tw-ring-offset-width: 1px;
1410
+ --tw-ring-inset: unset;
1411
+ display: grid;
1412
+ height: 3rem;
1413
+ width: 33.333333%;
1204
1414
  }
1205
- qti-gap-match-interaction qti-gap {
1206
- width: 20%;
1415
+
1416
+ /* @apply my-2; */
1417
+
1418
+ qti-graphic-order-interaction qti-hotspot-choice{
1419
+ cursor: pointer;
1420
+ border-radius: 0.375rem;
1421
+ --tw-text-opacity: 1;
1422
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1423
+ outline: 2px solid transparent;
1424
+ outline-offset: 2px;
1425
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1426
+ --tw-ring-inset: inset;
1427
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1428
+ height: 1.5rem !important;
1429
+ width: 1.5rem !important;
1430
+ border-radius: 9999px !important;
1431
+ background-color: transparent;
1432
+ padding: 0px;
1433
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1434
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1435
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1436
+ --tw-ring-opacity: 1;
1437
+ --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1207
1438
  }
1208
1439
 
1209
- qti-graphic-associate-interaction {
1210
- position: relative;
1211
- display: block;
1440
+ qti-graphic-order-interaction qti-hotspot-choice:hover{
1441
+ --tw-bg-opacity: 1;
1442
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1212
1443
  }
1213
- qti-graphic-associate-interaction [qti-choice] {
1214
- position: absolute;
1444
+
1445
+ qti-graphic-order-interaction qti-hotspot-choice:focus{
1446
+ outline-width: 2px;
1447
+ outline-color: #fca5a5;
1215
1448
  }
1216
- qti-graphic-associate-interaction [qti-choice][shape=circle]::before {
1217
- border-radius: 100%;
1218
- background: transparent;
1449
+
1450
+ qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
1451
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1452
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1453
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1454
+ --tw-ring-opacity: 1;
1455
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
1219
1456
  }
1220
- qti-graphic-associate-interaction [qti-choice][shape=square]::before {
1221
- border-radius: 0;
1222
- background: transparent;
1457
+
1458
+ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
1459
+ cursor: not-allowed;
1460
+ --tw-bg-opacity: 1;
1461
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1462
+ --tw-text-opacity: 1;
1463
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1464
+ --tw-shadow: 0 0 #0000;
1465
+ --tw-shadow-colored: 0 0 #0000;
1466
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1467
+ --tw-ring-opacity: 1;
1468
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1223
1469
  }
1224
- qti-graphic-associate-interaction [qti-choice]::after {
1225
- display: flex !important;
1226
- width: unset !important;
1227
- min-width: var(--width);
1228
- height: unset !important;
1229
- min-height: var(--width);
1230
- align-items: center;
1231
- justify-content: center;
1232
- border: unset !important;
1233
- content: attr(aria-ordervalue) !important;
1234
- opacity: unset !important;
1235
- transform: unset !important;
1236
- transition: unset !important;
1470
+
1471
+ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
1472
+ --tw-text-opacity: 1 !important;
1473
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1237
1474
  }
1238
1475
 
1239
- qti-graphic-gap-match-interaction {
1240
- position: relative;
1241
- display: block;
1476
+ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
1477
+ cursor: pointer;
1478
+ --tw-bg-opacity: 1;
1479
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1480
+ --tw-shadow: 0 0 #0000;
1481
+ --tw-shadow-colored: 0 0 #0000;
1482
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1483
+ outline-width: 0px;
1484
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1485
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1486
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1242
1487
  }
1243
- qti-graphic-order-interaction {
1488
+
1489
+ qti-graphic-order-interaction qti-hotspot-choice {
1490
+ /* &::after {
1491
+ content: '';
1492
+ @apply absolute top-0 block scale-75 bg-white;
1493
+ height: inherit;
1494
+ width: inherit;
1495
+ clip-path: inherit;
1496
+ } */
1497
+ }
1498
+
1499
+ qti-graphic-associate-interaction{
1244
1500
  position: relative;
1245
1501
  display: block;
1246
1502
  }
1247
- qti-graphic-order-interaction qti-hotspot-choice {
1248
- position: absolute;
1249
- }
1250
- qti-graphic-order-interaction qti-hotspot-choice[shape=circle]::before {
1251
- border-radius: 100%;
1252
- background: transparent;
1253
- }
1254
- qti-graphic-order-interaction qti-hotspot-choice[shape=square]::before {
1255
- border-radius: 0;
1256
- background: transparent;
1257
- }
1258
- qti-graphic-order-interaction qti-hotspot-choice::before {
1259
- content: unset !important;
1260
- }
1261
- qti-graphic-order-interaction qti-hotspot-choice::after {
1262
- display: flex !important;
1263
- width: unset !important;
1264
- min-width: var(--width);
1265
- height: unset !important;
1266
- min-height: var(--width);
1267
- align-items: center;
1268
- justify-content: center;
1269
- border: unset !important;
1270
- background: unset;
1271
- background: rgba(21, 0, 255, 0.067);
1272
- content: attr(aria-ordervalue) !important;
1273
- opacity: unset !important;
1274
- transform: unset !important;
1275
- transition: unset !important;
1276
- }
1277
1503
 
1278
- qti-hotspot-interaction qti-hotspot-choice {
1279
- position: absolute;
1280
- }
1504
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
1505
+ /* border-radius: 100%;
1506
+ background-color: green; */
1507
+ cursor: pointer;
1508
+ border-radius: 0.375rem;
1509
+ --tw-text-opacity: 1;
1510
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1511
+ outline: 2px solid transparent;
1512
+ outline-offset: 2px;
1513
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1514
+ --tw-ring-inset: inset;
1515
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1516
+ height: 1.5rem !important;
1517
+ width: 1.5rem !important;
1518
+ border-radius: 9999px !important;
1519
+ background-color: transparent;
1520
+ padding: 0px;
1521
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1522
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1523
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1524
+ --tw-ring-opacity: 1;
1525
+ --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1526
+ }
1281
1527
 
1282
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
1283
- display: flex;
1284
- gap: var(--qti-gap, 0.5rem);
1285
- flex-wrap: wrap;
1286
- padding-bottom: var(--qti-gap, 0.5rem);
1287
- }
1288
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
1289
- display: flex;
1290
- gap: var(--qti-gap, 0.5rem);
1291
- flex-wrap: wrap;
1292
- }
1293
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
1294
- padding: var(--qti-padding-x) var(--qti-padding-y);
1295
- flex: 1 1 0px;
1296
- display: flex;
1297
- flex-wrap: wrap;
1298
- flex-direction: column;
1528
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
1529
+ --tw-bg-opacity: 1;
1530
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1299
1531
  }
1300
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
1301
- height: auto;
1532
+
1533
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
1534
+ outline-width: 2px;
1535
+ outline-color: #fca5a5;
1302
1536
  }
1303
1537
 
1304
- qti-match-interaction.qti-match-tabular qti-simple-match-set:first-of-type {
1305
- display: flex;
1306
- margin-left: 4rem;
1307
- font-weight: bold;
1308
- gap: 2rem;
1538
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
1539
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1540
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1541
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1542
+ --tw-ring-opacity: 1;
1543
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
1309
1544
  }
1310
- qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type {
1311
- display: flex;
1312
- flex-direction: column;
1313
- gap: 0.2rem;
1545
+
1546
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
1547
+ cursor: not-allowed;
1548
+ --tw-bg-opacity: 1;
1549
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1550
+ --tw-text-opacity: 1;
1551
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1552
+ --tw-shadow: 0 0 #0000;
1553
+ --tw-shadow-colored: 0 0 #0000;
1554
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1555
+ --tw-ring-opacity: 1;
1556
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1314
1557
  }
1315
- qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice {
1316
- display: unset !important;
1558
+
1559
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
1560
+ --tw-text-opacity: 1 !important;
1561
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1317
1562
  }
1318
- qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice > * {
1319
- display: block !important;
1563
+
1564
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
1565
+ cursor: pointer;
1566
+ --tw-bg-opacity: 1;
1567
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1568
+ --tw-shadow: 0 0 #0000;
1569
+ --tw-shadow-colored: 0 0 #0000;
1570
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1571
+ outline-width: 0px;
1572
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1573
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1574
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1320
1575
  }
1321
1576
 
1322
- qti-order-interaction::part(drop-list) {
1323
- width: 30%;
1324
- height: 40px;
1577
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
1578
+ /* border-radius: 0; */
1579
+ /* background-color: green; */
1580
+ cursor: pointer;
1581
+ border-radius: 0.375rem;
1582
+ --tw-text-opacity: 1;
1583
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1584
+ outline: 2px solid transparent;
1585
+ outline-offset: 2px;
1586
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1587
+ --tw-ring-inset: inset;
1588
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
1589
+ height: 1.5rem !important;
1590
+ width: 1.5rem !important;
1591
+ border-radius: 9999px !important;
1592
+ background-color: transparent;
1593
+ padding: 0px;
1594
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1595
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1596
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1597
+ --tw-ring-opacity: 1;
1598
+ --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
1599
+ }
1600
+
1601
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
1602
+ --tw-bg-opacity: 1;
1603
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1325
1604
  }
1326
1605
 
1327
- qti-order-interaction::part(drop-list) {
1328
- display: block;
1329
- background: var(--qti-background, #eee);
1330
- padding: var(--qti-padding-x, 0.7rem) var(--qti-padding-y, 0.5rem);
1606
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
1607
+ outline-width: 2px;
1608
+ outline-color: #fca5a5;
1331
1609
  }
1332
1610
 
1333
- qti-select-point-interaction {
1334
- position: relative;
1335
- display: block;
1611
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
1612
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1613
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1614
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1615
+ --tw-ring-opacity: 1;
1616
+ --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
1336
1617
  }
1337
1618
 
1338
- qti-slider-interaction {
1339
- width: 100%;
1340
- display: block;
1619
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
1620
+ cursor: not-allowed;
1621
+ --tw-bg-opacity: 1;
1622
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1623
+ --tw-text-opacity: 1;
1624
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1625
+ --tw-shadow: 0 0 #0000;
1626
+ --tw-shadow-colored: 0 0 #0000;
1627
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1628
+ --tw-ring-opacity: 1;
1629
+ --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1341
1630
  }
1342
1631
 
1343
- qti-slider-interaction::part(knob) {
1344
- position: absolute;
1632
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
1633
+ --tw-text-opacity: 1 !important;
1634
+ color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1345
1635
  }
1346
1636
 
1347
- qti-slider-interaction::part(rail) {
1348
- background-position: 0 center;
1349
- /* ticks */
1350
- background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
1351
- background-size: calc((100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
1637
+ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
1638
+ cursor: pointer;
1639
+ --tw-bg-opacity: 1;
1640
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1641
+ --tw-shadow: 0 0 #0000;
1642
+ --tw-shadow-colored: 0 0 #0000;
1643
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1644
+ outline-width: 0px;
1645
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1646
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1647
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1352
1648
  }
1353
1649
 
1354
- qti-prompt {
1355
- display: block;
1650
+ qti-graphic-gap-match-interaction{
1651
+ position: relative;
1356
1652
  }
1357
1653
 
1358
- qti-content-body {
1359
- display: block;
1654
+ qti-graphic-gap-match-interaction img{
1655
+ margin: 0px;
1656
+ padding: 0px;
1360
1657
  }
1361
1658
 
1362
- qti-rubric-block qti-content-body:not(:empty) {
1659
+ qti-slider-interaction{
1660
+ position: relative;
1661
+ width: 100%;
1363
1662
  display: block;
1364
- padding: 1rem;
1365
- border: 1px solid #ddd;
1366
- margin-bottom: 1rem;
1367
1663
  }
1368
1664
 
1369
- .qti-theme-ims {
1370
- --qti-border-width: 1px;
1371
- --qti-border-color: var(--qti-primary-color);
1372
- --qti-text-color: var(--qti-primary-color);
1373
- --qti-background: #f6f6f6;
1665
+ qti-slider-interaction::part(knob){
1666
+ position: absolute;
1667
+ height: 1rem;
1668
+ width: 1rem;
1669
+ transform-origin: center;
1670
+ --tw-translate-x: -50%;
1671
+ 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));
1672
+ cursor: pointer;
1673
+ border-radius: 9999px;
1674
+ --tw-bg-opacity: 1;
1675
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
1374
1676
  }
1375
1677
 
1376
- .qti-theme-subtle {
1377
- --qti-border-radius: 0;
1378
- --qti-border-width: 2px;
1379
- --qti-background: #fcfcfc;
1380
- --qti-padding-x: 0.5rem;
1381
- --qti-padding-y: 0.8rem;
1678
+ qti-slider-interaction::part(rail){
1679
+ height: 1rem;
1680
+ background-position: 0 center;
1681
+ --qti-border-color: #ff0000;
1682
+ --qti-border-width: 2px;
1683
+ /* ticks */
1684
+ background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x,
1685
+ linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
1686
+ background-size: calc(calc(100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
1382
1687
  }
1383
1688
 
1384
- .qti-theme-raised {
1385
- --qti-border-radius: 0;
1386
- --qti-border-width: 2px;
1387
- --qti-background: #ebebeb;
1388
- --qti-padding-x: 0.5rem;
1389
- --qti-padding-y: 0.8rem;
1390
- }
1689
+ /* qti-match-interaction {
1690
+ &.qti-match-tabular {
1691
+ qti-simple-match-set:first-of-type {
1692
+ display: flex;
1693
+ margin-left: 4rem;
1694
+ font-weight: bold;
1695
+ gap: 2rem;
1696
+ }
1697
+
1698
+ qti-simple-match-set:last-of-type {
1699
+ display: flex;
1700
+ flex-direction: column;
1701
+ gap: 0.2rem;
1702
+
1703
+ qti-simple-associable-choice {
1704
+ display: unset !important;
1705
+ }
1706
+
1707
+ qti-simple-associable-choice > * {
1708
+ display: block !important;
1709
+ }
1710
+ }
1711
+ }
1712
+ } */