@citolab/qti-components 6.9.1-beta.9 → 7.0.2

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