@citolab/qti-components 6.9.1-beta.7 → 6.9.1-beta.70

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