@citolab/qti-components 6.9.1-beta.6 → 6.9.1-beta.61

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