@citolab/qti-components 3.0.52 → 3.0.54

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 (16) hide show
  1. package/index.css +212 -1094
  2. package/index.js +91 -75
  3. package/index.umd.css +212 -1094
  4. package/index.umd.js +111 -94
  5. package/lab/qti-manual-scoring/qti-manual-scoring.d.ts +2 -0
  6. package/lib/qti-base/qti-preview/qti-associate-interaction/qti-associate-interaction.d.ts +2 -3
  7. package/lib/qti-base/qti-preview/qti-associate-interaction/qti-simple-associable-choice.d.ts +1 -0
  8. package/lib/qti-base/qti-preview/qti-gap-match-interaction/qti-gap-match-interaction.d.ts +1 -1
  9. package/lib/qti-base/qti-preview/qti-gap-match-interaction/qti-gap-text.d.ts +4 -1
  10. package/lib/qti-base/qti-preview/qti-gap-match-interaction/qti-gap.d.ts +3 -1
  11. package/lib/qti-base/qti-preview/qti-slider-interaction/qti-slider-interaction.d.ts +17 -10
  12. package/lib/utilities/{watch → decorators}/watch.d.ts +0 -0
  13. package/lib/utilities/drag-drop/drag-drop-api.d.ts +83 -0
  14. package/lib/utilities/drag-drop/drag-drop-interaction-mixin.d.ts +1 -1
  15. package/lib/utilities/drag-drop/droppables-mixin.d.ts +1 -1
  16. package/package.json +1 -1
package/index.css CHANGED
@@ -304,52 +304,6 @@ qti-prompt {
304
304
  outline-style: solid;
305
305
  outline-width: calc(var(--qti-border-width) * 2);
306
306
  }
307
- .qti-theme-raised qti-choice[role=checkbox]::before {
308
- content: "";
309
- min-height: var(--width);
310
- min-width: var(--width);
311
- transition: border-radius 1s ease-in;
312
- }
313
- .qti-theme-raised qti-choice[role=checkbox]::after {
314
- border-bottom: 3px solid var(--qti-primary-color);
315
- border-left: 3px solid var(--qti-primary-color);
316
- content: "";
317
- display: inline-block;
318
- height: 6px;
319
- opacity: 0;
320
- position: absolute;
321
- transform: translate(6px, -2px) rotate(-45deg);
322
- transition: all 0.2s ease;
323
- width: 10px;
324
- }
325
- .qti-theme-raised qti-choice[role=checkbox][aria-checked=true]::after {
326
- border-bottom: 2px solid var(--qti-primary-color);
327
- border-left: 2px solid var(--qti-primary-color);
328
- opacity: 1;
329
- }
330
- .qti-theme-raised qti-choice[role=radio]::before {
331
- border-radius: 100%;
332
- content: "";
333
- min-height: 22px;
334
- min-width: 22px;
335
- }
336
- .qti-theme-raised qti-choice[role=radio]::after {
337
- background: var(--qti-primary-color);
338
- border-radius: 100%;
339
- content: "";
340
- display: inline-block;
341
- height: 14px;
342
- margin-left: 4px;
343
- opacity: 0;
344
- position: absolute;
345
- transform: scale(0.8);
346
- transition: all 0.1s ease-out;
347
- width: 14px;
348
- }
349
- .qti-theme-raised qti-choice[role=radio][aria-checked=true]::after {
350
- opacity: 1;
351
- transform: scale(1);
352
- }
353
307
  .qti-theme-raised qti-choice::before {
354
308
  position: relative;
355
309
  display: inline-block;
@@ -421,52 +375,6 @@ qti-prompt {
421
375
  outline-style: solid;
422
376
  outline-width: calc(var(--qti-border-width) * 2);
423
377
  }
424
- .qti-theme-subtle qti-choice[role=checkbox]::before {
425
- content: "";
426
- min-height: var(--width);
427
- min-width: var(--width);
428
- transition: border-radius 1s ease-in;
429
- }
430
- .qti-theme-subtle qti-choice[role=checkbox]::after {
431
- border-bottom: 3px solid var(--qti-primary-color);
432
- border-left: 3px solid var(--qti-primary-color);
433
- content: "";
434
- display: inline-block;
435
- height: 6px;
436
- opacity: 0;
437
- position: absolute;
438
- transform: translate(6px, -2px) rotate(-45deg);
439
- transition: all 0.2s ease;
440
- width: 10px;
441
- }
442
- .qti-theme-subtle qti-choice[role=checkbox][aria-checked=true]::after {
443
- border-bottom: 2px solid var(--qti-primary-color);
444
- border-left: 2px solid var(--qti-primary-color);
445
- opacity: 1;
446
- }
447
- .qti-theme-subtle qti-choice[role=radio]::before {
448
- border-radius: 100%;
449
- content: "";
450
- min-height: 22px;
451
- min-width: 22px;
452
- }
453
- .qti-theme-subtle qti-choice[role=radio]::after {
454
- background: var(--qti-primary-color);
455
- border-radius: 100%;
456
- content: "";
457
- display: inline-block;
458
- height: 14px;
459
- margin-left: 4px;
460
- opacity: 0;
461
- position: absolute;
462
- transform: scale(0.8);
463
- transition: all 0.1s ease-out;
464
- width: 14px;
465
- }
466
- .qti-theme-subtle qti-choice[role=radio][aria-checked=true]::after {
467
- opacity: 1;
468
- transform: scale(1);
469
- }
470
378
  .qti-theme-subtle qti-choice::before {
471
379
  position: relative;
472
380
  display: inline-block;
@@ -546,60 +454,6 @@ qti-prompt {
546
454
  outline-style: solid;
547
455
  outline-width: calc(var(--qti-border-width) * 2);
548
456
  }
549
- .qti-theme-ims qti-choice[role=checkbox]::before {
550
- content: "";
551
- min-height: var(--width);
552
- min-width: var(--width);
553
- transition: border-radius 1s ease-in;
554
- }
555
- .qti-theme-ims qti-choice[role=checkbox]::after {
556
- border-bottom: 3px solid var(--qti-primary-color);
557
- border-left: 3px solid var(--qti-primary-color);
558
- content: "";
559
- display: inline-block;
560
- height: 6px;
561
- opacity: 0;
562
- position: absolute;
563
- transform: translate(6px, -2px) rotate(-45deg);
564
- transition: all 0.2s ease;
565
- width: 10px;
566
- }
567
- .qti-theme-ims qti-choice[role=checkbox][aria-checked=true]::after {
568
- border-bottom: 2px solid var(--qti-primary-color);
569
- border-left: 2px solid var(--qti-primary-color);
570
- opacity: 1;
571
- }
572
- .qti-theme-ims qti-choice[role=radio]::before {
573
- border-radius: 100%;
574
- content: "";
575
- min-height: 22px;
576
- min-width: 22px;
577
- }
578
- .qti-theme-ims qti-choice[role=radio]::after {
579
- background: var(--qti-primary-color);
580
- border-radius: 100%;
581
- content: "";
582
- display: inline-block;
583
- height: 14px;
584
- margin-left: 4px;
585
- opacity: 0;
586
- position: absolute;
587
- transform: scale(0.8);
588
- transition: all 0.1s ease-out;
589
- width: 14px;
590
- }
591
- .qti-theme-ims qti-choice[role=radio][aria-checked=true]::after {
592
- opacity: 1;
593
- transform: scale(1);
594
- }
595
- .qti-theme-ims qti-choice::before {
596
- position: relative;
597
- display: inline-block;
598
- border-radius: var(--qti-border-radius);
599
- color: var(--qti-text-color);
600
- background: var(--qti-background);
601
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
602
- }
603
457
  /* Choice as checkbox */
604
458
  /* with qti-input-control-hidden */
605
459
  .qti-input-control-hidden qti-choice::before, .qti-input-control-hidden qti-choice::after {
@@ -882,52 +736,6 @@ qti-modal-feedback[showstatus=on] {
882
736
  outline-style: solid;
883
737
  outline-width: calc(var(--qti-border-width) * 2);
884
738
  }
885
- .qti-theme-raised qti-hottext[role=checkbox]::before {
886
- content: "";
887
- min-height: var(--width);
888
- min-width: var(--width);
889
- transition: border-radius 1s ease-in;
890
- }
891
- .qti-theme-raised qti-hottext[role=checkbox]::after {
892
- border-bottom: 3px solid var(--qti-primary-color);
893
- border-left: 3px solid var(--qti-primary-color);
894
- content: "";
895
- display: inline-block;
896
- height: 6px;
897
- opacity: 0;
898
- position: absolute;
899
- transform: translate(6px, -2px) rotate(-45deg);
900
- transition: all 0.2s ease;
901
- width: 10px;
902
- }
903
- .qti-theme-raised qti-hottext[role=checkbox][aria-checked=true]::after {
904
- border-bottom: 2px solid var(--qti-primary-color);
905
- border-left: 2px solid var(--qti-primary-color);
906
- opacity: 1;
907
- }
908
- .qti-theme-raised qti-hottext[role=radio]::before {
909
- border-radius: 100%;
910
- content: "";
911
- min-height: 22px;
912
- min-width: 22px;
913
- }
914
- .qti-theme-raised qti-hottext[role=radio]::after {
915
- background: var(--qti-primary-color);
916
- border-radius: 100%;
917
- content: "";
918
- display: inline-block;
919
- height: 14px;
920
- margin-left: 4px;
921
- opacity: 0;
922
- position: absolute;
923
- transform: scale(0.8);
924
- transition: all 0.1s ease-out;
925
- width: 14px;
926
- }
927
- .qti-theme-raised qti-hottext[role=radio][aria-checked=true]::after {
928
- opacity: 1;
929
- transform: scale(1);
930
- }
931
739
  .qti-theme-raised qti-hottext::before {
932
740
  position: relative;
933
741
  display: inline-block;
@@ -999,52 +807,6 @@ qti-modal-feedback[showstatus=on] {
999
807
  outline-style: solid;
1000
808
  outline-width: calc(var(--qti-border-width) * 2);
1001
809
  }
1002
- .qti-theme-subtle qti-hottext[role=checkbox]::before {
1003
- content: "";
1004
- min-height: var(--width);
1005
- min-width: var(--width);
1006
- transition: border-radius 1s ease-in;
1007
- }
1008
- .qti-theme-subtle qti-hottext[role=checkbox]::after {
1009
- border-bottom: 3px solid var(--qti-primary-color);
1010
- border-left: 3px solid var(--qti-primary-color);
1011
- content: "";
1012
- display: inline-block;
1013
- height: 6px;
1014
- opacity: 0;
1015
- position: absolute;
1016
- transform: translate(6px, -2px) rotate(-45deg);
1017
- transition: all 0.2s ease;
1018
- width: 10px;
1019
- }
1020
- .qti-theme-subtle qti-hottext[role=checkbox][aria-checked=true]::after {
1021
- border-bottom: 2px solid var(--qti-primary-color);
1022
- border-left: 2px solid var(--qti-primary-color);
1023
- opacity: 1;
1024
- }
1025
- .qti-theme-subtle qti-hottext[role=radio]::before {
1026
- border-radius: 100%;
1027
- content: "";
1028
- min-height: 22px;
1029
- min-width: 22px;
1030
- }
1031
- .qti-theme-subtle qti-hottext[role=radio]::after {
1032
- background: var(--qti-primary-color);
1033
- border-radius: 100%;
1034
- content: "";
1035
- display: inline-block;
1036
- height: 14px;
1037
- margin-left: 4px;
1038
- opacity: 0;
1039
- position: absolute;
1040
- transform: scale(0.8);
1041
- transition: all 0.1s ease-out;
1042
- width: 14px;
1043
- }
1044
- .qti-theme-subtle qti-hottext[role=radio][aria-checked=true]::after {
1045
- opacity: 1;
1046
- transform: scale(1);
1047
- }
1048
810
  .qti-theme-subtle qti-hottext::before {
1049
811
  position: relative;
1050
812
  display: inline-block;
@@ -1402,52 +1164,6 @@ qti-choice-interaction[orientation=horizontal] {
1402
1164
  outline-style: solid;
1403
1165
  outline-width: calc(var(--qti-border-width) * 2);
1404
1166
  }
1405
- .qti-theme-raised qti-simple-choice[role=checkbox]::before {
1406
- content: "";
1407
- min-height: var(--width);
1408
- min-width: var(--width);
1409
- transition: border-radius 1s ease-in;
1410
- }
1411
- .qti-theme-raised qti-simple-choice[role=checkbox]::after {
1412
- border-bottom: 3px solid var(--qti-primary-color);
1413
- border-left: 3px solid var(--qti-primary-color);
1414
- content: "";
1415
- display: inline-block;
1416
- height: 6px;
1417
- opacity: 0;
1418
- position: absolute;
1419
- transform: translate(6px, -2px) rotate(-45deg);
1420
- transition: all 0.2s ease;
1421
- width: 10px;
1422
- }
1423
- .qti-theme-raised qti-simple-choice[role=checkbox][aria-checked=true]::after {
1424
- border-bottom: 2px solid var(--qti-primary-color);
1425
- border-left: 2px solid var(--qti-primary-color);
1426
- opacity: 1;
1427
- }
1428
- .qti-theme-raised qti-simple-choice[role=radio]::before {
1429
- border-radius: 100%;
1430
- content: "";
1431
- min-height: 22px;
1432
- min-width: 22px;
1433
- }
1434
- .qti-theme-raised qti-simple-choice[role=radio]::after {
1435
- background: var(--qti-primary-color);
1436
- border-radius: 100%;
1437
- content: "";
1438
- display: inline-block;
1439
- height: 14px;
1440
- margin-left: 4px;
1441
- opacity: 0;
1442
- position: absolute;
1443
- transform: scale(0.8);
1444
- transition: all 0.1s ease-out;
1445
- width: 14px;
1446
- }
1447
- .qti-theme-raised qti-simple-choice[role=radio][aria-checked=true]::after {
1448
- opacity: 1;
1449
- transform: scale(1);
1450
- }
1451
1167
  .qti-theme-raised qti-simple-choice::before {
1452
1168
  position: relative;
1453
1169
  display: inline-block;
@@ -1519,52 +1235,6 @@ qti-choice-interaction[orientation=horizontal] {
1519
1235
  outline-style: solid;
1520
1236
  outline-width: calc(var(--qti-border-width) * 2);
1521
1237
  }
1522
- .qti-theme-subtle qti-simple-choice[role=checkbox]::before {
1523
- content: "";
1524
- min-height: var(--width);
1525
- min-width: var(--width);
1526
- transition: border-radius 1s ease-in;
1527
- }
1528
- .qti-theme-subtle qti-simple-choice[role=checkbox]::after {
1529
- border-bottom: 3px solid var(--qti-primary-color);
1530
- border-left: 3px solid var(--qti-primary-color);
1531
- content: "";
1532
- display: inline-block;
1533
- height: 6px;
1534
- opacity: 0;
1535
- position: absolute;
1536
- transform: translate(6px, -2px) rotate(-45deg);
1537
- transition: all 0.2s ease;
1538
- width: 10px;
1539
- }
1540
- .qti-theme-subtle qti-simple-choice[role=checkbox][aria-checked=true]::after {
1541
- border-bottom: 2px solid var(--qti-primary-color);
1542
- border-left: 2px solid var(--qti-primary-color);
1543
- opacity: 1;
1544
- }
1545
- .qti-theme-subtle qti-simple-choice[role=radio]::before {
1546
- border-radius: 100%;
1547
- content: "";
1548
- min-height: 22px;
1549
- min-width: 22px;
1550
- }
1551
- .qti-theme-subtle qti-simple-choice[role=radio]::after {
1552
- background: var(--qti-primary-color);
1553
- border-radius: 100%;
1554
- content: "";
1555
- display: inline-block;
1556
- height: 14px;
1557
- margin-left: 4px;
1558
- opacity: 0;
1559
- position: absolute;
1560
- transform: scale(0.8);
1561
- transition: all 0.1s ease-out;
1562
- width: 14px;
1563
- }
1564
- .qti-theme-subtle qti-simple-choice[role=radio][aria-checked=true]::after {
1565
- opacity: 1;
1566
- transform: scale(1);
1567
- }
1568
1238
  .qti-theme-subtle qti-simple-choice::before {
1569
1239
  position: relative;
1570
1240
  display: inline-block;
@@ -1704,14 +1374,10 @@ qti-simple-choice {
1704
1374
  }
1705
1375
 
1706
1376
  /* with qti-input-control-hidden */
1707
- .qti-input-control-hidden qti-simple-choice::before, .qti-input-control-hidden qti-simple-choice::after {
1708
- content: unset !important;
1709
- }
1710
-
1711
1377
  .qti-theme-raised {
1712
1378
  /* < usabled classes to extend in qti-components > */
1713
1379
  }
1714
- .qti-theme-raised qti-associate-interaction .associables-gap, qti-associate-interaction .qti-theme-raised .associables-gap {
1380
+ .qti-theme-raised qti-associate-interaction::part(drop-list) {
1715
1381
  position: relative;
1716
1382
  display: inline-block;
1717
1383
  border-radius: var(--qti-border-radius);
@@ -1719,24 +1385,18 @@ qti-simple-choice {
1719
1385
  background: var(--qti-background);
1720
1386
  box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
1721
1387
  }
1722
- .qti-theme-raised qti-associate-interaction .associables-gap:empty::after, qti-associate-interaction .qti-theme-raised .associables-gap:empty::after {
1723
- padding: var(--qti-padding-x) var(--qti-padding-y);
1724
- /* when empty, put a space in it, so the height remains the same */
1725
- display: inline-block;
1726
- content: " ";
1727
- }
1728
- .qti-theme-raised qti-associate-interaction .associables-gap:not(:empty), qti-associate-interaction .qti-theme-raised .associables-gap:not(:empty) {
1388
+ .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) {
1729
1389
  display: flex;
1730
1390
  }
1731
- .qti-theme-raised qti-associate-interaction .associables-gap:not(:empty) > *, qti-associate-interaction .qti-theme-raised .associables-gap:not(:empty) > * {
1391
+ .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) > * {
1732
1392
  box-shadow: unset;
1733
1393
  flex-grow: 1;
1734
1394
  margin: 2px;
1735
1395
  }
1736
- .qti-theme-raised qti-associate-interaction [active].associables-gap, qti-associate-interaction .qti-theme-raised [active].associables-gap {
1396
+ .qti-theme-raised qti-associate-interaction[active]::part(drop-list) {
1737
1397
  background: var(--qti-background);
1738
1398
  }
1739
- .qti-theme-raised qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice {
1399
+ .qti-theme-raised qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-associate-interaction::part(qti-simple-associable-choice) {
1740
1400
  position: relative;
1741
1401
  display: inline-block;
1742
1402
  border-radius: var(--qti-border-radius);
@@ -1744,20 +1404,22 @@ qti-simple-choice {
1744
1404
  padding: var(--qti-padding-x) var(--qti-padding-y);
1745
1405
  cursor: pointer;
1746
1406
  background: var(--qti-background);
1407
+ -webkit-user-select: none;
1408
+ user-select: none;
1747
1409
  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
1748
1410
  }
1749
- .qti-theme-raised qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-raised qti-simple-associable-choice[disabled] {
1411
+ .qti-theme-raised qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
1750
1412
  box-shadow: unset !important;
1751
1413
  color: var(--qti-border-color);
1752
1414
  cursor: unset !important;
1753
1415
  }
1754
- .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:focus {
1416
+ .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-associate-interaction:focus::part(qti-simple-associable-choice) {
1755
1417
  outline-color: rgb(var(--qti-primary) 0.4);
1756
1418
  outline-offset: 2px;
1757
1419
  outline-style: solid;
1758
1420
  outline-width: var(--qti-border-width);
1759
1421
  }
1760
- .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]) {
1422
+ .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
1761
1423
  outline-color: rgb(var(--qti-primary) 0.4);
1762
1424
  outline-offset: 0;
1763
1425
  outline-style: solid;
@@ -1779,7 +1441,7 @@ qti-simple-choice {
1779
1441
  .qti-theme-subtle {
1780
1442
  /* < usabled classes to extend in qti-components */
1781
1443
  }
1782
- .qti-theme-subtle qti-associate-interaction .associables-gap, qti-associate-interaction .qti-theme-subtle .associables-gap {
1444
+ .qti-theme-subtle qti-associate-interaction::part(drop-list) {
1783
1445
  position: relative;
1784
1446
  display: inline-block;
1785
1447
  border-radius: var(--qti-border-radius);
@@ -1787,45 +1449,41 @@ qti-simple-choice {
1787
1449
  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
1788
1450
  transition: all 0.2s ease-out;
1789
1451
  }
1790
- .qti-theme-subtle qti-associate-interaction .associables-gap:empty::after, qti-associate-interaction .qti-theme-subtle .associables-gap:empty::after {
1791
- padding: var(--qti-padding-x) var(--qti-padding-y);
1792
- /* when empty, put a space in it, so the height remains the same */
1793
- display: inline-block;
1794
- content: " ";
1795
- }
1796
- .qti-theme-subtle qti-associate-interaction .associables-gap:not(:empty), qti-associate-interaction .qti-theme-subtle .associables-gap:not(:empty) {
1452
+ .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) {
1797
1453
  display: flex;
1798
1454
  }
1799
- .qti-theme-subtle qti-associate-interaction .associables-gap:not(:empty) > *, qti-associate-interaction .qti-theme-subtle .associables-gap:not(:empty) > * {
1455
+ .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) > * {
1800
1456
  flex-grow: 1;
1801
1457
  margin: 2px;
1802
1458
  }
1803
- .qti-theme-subtle qti-associate-interaction [active].associables-gap, qti-associate-interaction .qti-theme-subtle [active].associables-gap {
1459
+ .qti-theme-subtle qti-associate-interaction[active]::part(drop-list) {
1804
1460
  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
1805
1461
  transform: scale(1.02);
1806
1462
  }
1807
- .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice {
1463
+ .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-associate-interaction::part(qti-simple-associable-choice) {
1808
1464
  position: relative;
1809
1465
  display: inline-block;
1810
1466
  border-radius: var(--qti-border-radius);
1811
1467
  color: var(--qti-text-color);
1812
1468
  padding: var(--qti-padding-x) var(--qti-padding-y);
1813
1469
  cursor: pointer;
1470
+ -webkit-user-select: none;
1471
+ user-select: none;
1814
1472
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
1815
1473
  }
1816
- .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice[disabled] {
1474
+ .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
1817
1475
  --qti-border-color: transparent;
1818
1476
  box-shadow: unset !important;
1819
1477
  color: var(--qti-shadow-color);
1820
1478
  cursor: unset !important;
1821
1479
  }
1822
- .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:focus {
1480
+ .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-associate-interaction:focus::part(qti-simple-associable-choice) {
1823
1481
  outline-color: rgb(var(--qti-primary) 0.4);
1824
1482
  outline-offset: 2px;
1825
1483
  outline-style: solid;
1826
1484
  outline-width: var(--qti-border-width);
1827
1485
  }
1828
- .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]) {
1486
+ .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
1829
1487
  outline-color: rgb(var(--qti-primary) 0.4);
1830
1488
  outline-offset: 0;
1831
1489
  outline-style: solid;
@@ -1846,7 +1504,7 @@ qti-simple-choice {
1846
1504
  .qti-theme-ims {
1847
1505
  /* < usabled classes to extend in qti-components > */
1848
1506
  }
1849
- .qti-theme-ims qti-associate-interaction .associables-gap, qti-associate-interaction .qti-theme-ims .associables-gap {
1507
+ .qti-theme-ims qti-associate-interaction::part(drop-list) {
1850
1508
  position: relative;
1851
1509
  display: inline-block;
1852
1510
  border-radius: var(--qti-border-radius);
@@ -1855,45 +1513,36 @@ qti-simple-choice {
1855
1513
  background: var(--qti-white);
1856
1514
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
1857
1515
  }
1858
- .qti-theme-ims qti-associate-interaction [disabled].associables-gap, qti-associate-interaction .qti-theme-ims [disabled].associables-gap {
1516
+ .qti-theme-ims qti-associate-interaction[disabled]::part(drop-list) {
1859
1517
  --qti-border-color: var(--qti-shadow-color);
1860
1518
  color: var(--qti-shadow-color);
1861
1519
  cursor: unset !important;
1862
1520
  filter: grayscale(100%);
1863
1521
  }
1864
- .qti-theme-ims qti-associate-interaction .associables-gap:focus-within, qti-associate-interaction .qti-theme-ims .associables-gap:focus-within {
1522
+ .qti-theme-ims qti-associate-interaction:focus-within::part(drop-list) {
1865
1523
  outline-color: rgb(var(--qti-primary) 0.6);
1866
1524
  outline-offset: 4px;
1867
1525
  outline-style: solid;
1868
1526
  outline-width: var(--qti-border-width);
1869
1527
  /* applies to all before elements, choice round and circle, slider thumb */
1870
1528
  }
1871
- .qti-theme-ims qti-associate-interaction .associables-gap:focus-within::before, qti-associate-interaction .qti-theme-ims .associables-gap:focus-within::before {
1872
- background-color: rgb(var(--qti-primary) 0.2);
1873
- }
1874
- .qti-theme-ims qti-associate-interaction .associables-gap:hover:not([disabled]), qti-associate-interaction .qti-theme-ims .associables-gap:hover:not([disabled]) {
1529
+ .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(drop-list) {
1875
1530
  outline-color: rgb(var(--qti-primary) 0.4);
1876
1531
  outline-offset: 2px;
1877
1532
  outline-style: solid;
1878
1533
  outline-width: calc(var(--qti-border-width) * 2);
1879
1534
  }
1880
- .qti-theme-ims qti-associate-interaction .associables-gap:empty::after, qti-associate-interaction .qti-theme-ims .associables-gap:empty::after {
1881
- padding: var(--qti-padding-x) var(--qti-padding-y);
1882
- /* when empty, put a space in it, so the height remains the same */
1883
- display: inline-block;
1884
- content: " ";
1885
- }
1886
- .qti-theme-ims qti-associate-interaction .associables-gap:not(:empty), qti-associate-interaction .qti-theme-ims .associables-gap:not(:empty) {
1535
+ .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) {
1887
1536
  display: inline-flex;
1888
1537
  }
1889
- .qti-theme-ims qti-associate-interaction .associables-gap:not(:empty) > *, qti-associate-interaction .qti-theme-ims .associables-gap:not(:empty) > * {
1538
+ .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) > * {
1890
1539
  flex-grow: 1;
1891
1540
  margin: 2px;
1892
1541
  }
1893
- .qti-theme-ims qti-associate-interaction [active].associables-gap, qti-associate-interaction .qti-theme-ims [active].associables-gap {
1542
+ .qti-theme-ims qti-associate-interaction[active]::part(drop-list) {
1894
1543
  background: rgb(var(--qti-primary) 0.4) !important;
1895
1544
  }
1896
- .qti-theme-ims qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice {
1545
+ .qti-theme-ims qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-associate-interaction::part(qti-simple-associable-choice) {
1897
1546
  position: relative;
1898
1547
  display: inline-block;
1899
1548
  border-radius: var(--qti-border-radius);
@@ -1903,13 +1552,13 @@ qti-simple-choice {
1903
1552
  background: var(--qti-background);
1904
1553
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
1905
1554
  }
1906
- .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[disabled] {
1555
+ .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
1907
1556
  --qti-border-color: var(--qti-shadow-color);
1908
1557
  color: var(--qti-shadow-color);
1909
1558
  cursor: unset !important;
1910
1559
  filter: grayscale(100%);
1911
1560
  }
1912
- .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within {
1561
+ .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(qti-simple-associable-choice) {
1913
1562
  outline-color: rgb(var(--qti-primary) 0.6);
1914
1563
  outline-offset: 4px;
1915
1564
  outline-style: solid;
@@ -1919,27 +1568,27 @@ qti-simple-choice {
1919
1568
  .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within::before, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within::before {
1920
1569
  background-color: rgb(var(--qti-primary) 0.2);
1921
1570
  }
1922
- .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]) {
1571
+ .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
1923
1572
  outline-color: rgb(var(--qti-primary) 0.4);
1924
1573
  outline-offset: 2px;
1925
1574
  outline-style: solid;
1926
1575
  outline-width: calc(var(--qti-border-width) * 2);
1927
1576
  }
1928
- .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[active], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[active] {
1577
+ .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[active], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-associate-interaction[active]::part(qti-simple-associable-choice) {
1929
1578
  background: rgb(var(--qti-primary) 0.4) !important;
1930
1579
  }
1931
- qti-associate-interaction qti-simple-associable-choice {
1932
- margin-right: 0.2rem;
1933
- }
1934
- qti-associate-interaction .associables-container {
1580
+ qti-associate-interaction::part(associables-container) {
1935
1581
  display: flex;
1936
1582
  width: 100%;
1583
+ height: 100%;
1937
1584
  justify-content: space-between;
1938
1585
  margin-top: 1rem;
1939
1586
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(50% - 1px), var(--qti-border-color) 50%, rgba(0, 0, 0, 0) calc(50% + 1px));
1940
1587
  }
1941
- qti-associate-interaction .associables-gap {
1588
+
1589
+ qti-associate-interaction::part(drop-list) {
1942
1590
  width: 30%;
1591
+ height: 40px;
1943
1592
  }
1944
1593
 
1945
1594
  .qti-theme-raised {
@@ -1978,6 +1627,8 @@ qti-associate-interaction .associables-gap {
1978
1627
  padding: var(--qti-padding-x) var(--qti-padding-y);
1979
1628
  cursor: pointer;
1980
1629
  background: var(--qti-background);
1630
+ -webkit-user-select: none;
1631
+ user-select: none;
1981
1632
  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
1982
1633
  }
1983
1634
  .qti-theme-raised qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-raised qti-gap-text[disabled] {
@@ -2045,6 +1696,8 @@ qti-associate-interaction .associables-gap {
2045
1696
  color: var(--qti-text-color);
2046
1697
  padding: var(--qti-padding-x) var(--qti-padding-y);
2047
1698
  cursor: pointer;
1699
+ -webkit-user-select: none;
1700
+ user-select: none;
2048
1701
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
2049
1702
  }
2050
1703
  .qti-theme-subtle qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-subtle qti-gap-text[disabled] {
@@ -2198,52 +1851,6 @@ qti-gap-match-interaction qti-gap {
2198
1851
  outline-style: solid;
2199
1852
  outline-width: calc(var(--qti-border-width) * 2);
2200
1853
  }
2201
- .qti-theme-raised qti-graphic-associate-interaction [role=checkbox][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-raised [role=checkbox][qti-choice]::before {
2202
- content: "";
2203
- min-height: var(--width);
2204
- min-width: var(--width);
2205
- transition: border-radius 1s ease-in;
2206
- }
2207
- .qti-theme-raised qti-graphic-associate-interaction [role=checkbox][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-raised [role=checkbox][qti-choice]::after {
2208
- border-bottom: 3px solid var(--qti-primary-color);
2209
- border-left: 3px solid var(--qti-primary-color);
2210
- content: "";
2211
- display: inline-block;
2212
- height: 6px;
2213
- opacity: 0;
2214
- position: absolute;
2215
- transform: translate(6px, -2px) rotate(-45deg);
2216
- transition: all 0.2s ease;
2217
- width: 10px;
2218
- }
2219
- .qti-theme-raised qti-graphic-associate-interaction [role=checkbox][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-raised [role=checkbox][aria-checked=true][qti-choice]::after {
2220
- border-bottom: 2px solid var(--qti-primary-color);
2221
- border-left: 2px solid var(--qti-primary-color);
2222
- opacity: 1;
2223
- }
2224
- .qti-theme-raised qti-graphic-associate-interaction [role=radio][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-raised [role=radio][qti-choice]::before {
2225
- border-radius: 100%;
2226
- content: "";
2227
- min-height: 22px;
2228
- min-width: 22px;
2229
- }
2230
- .qti-theme-raised qti-graphic-associate-interaction [role=radio][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-raised [role=radio][qti-choice]::after {
2231
- background: var(--qti-primary-color);
2232
- border-radius: 100%;
2233
- content: "";
2234
- display: inline-block;
2235
- height: 14px;
2236
- margin-left: 4px;
2237
- opacity: 0;
2238
- position: absolute;
2239
- transform: scale(0.8);
2240
- transition: all 0.1s ease-out;
2241
- width: 14px;
2242
- }
2243
- .qti-theme-raised qti-graphic-associate-interaction [role=radio][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-raised [role=radio][aria-checked=true][qti-choice]::after {
2244
- opacity: 1;
2245
- transform: scale(1);
2246
- }
2247
1854
  .qti-theme-raised qti-graphic-associate-interaction [qti-choice]::before, qti-graphic-associate-interaction .qti-theme-raised [qti-choice]::before {
2248
1855
  position: relative;
2249
1856
  display: inline-block;
@@ -2284,52 +1891,6 @@ qti-gap-match-interaction qti-gap {
2284
1891
  outline-style: solid;
2285
1892
  outline-width: calc(var(--qti-border-width) * 2);
2286
1893
  }
2287
- .qti-theme-subtle qti-graphic-associate-interaction [role=checkbox][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-subtle [role=checkbox][qti-choice]::before {
2288
- content: "";
2289
- min-height: var(--width);
2290
- min-width: var(--width);
2291
- transition: border-radius 1s ease-in;
2292
- }
2293
- .qti-theme-subtle qti-graphic-associate-interaction [role=checkbox][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-subtle [role=checkbox][qti-choice]::after {
2294
- border-bottom: 3px solid var(--qti-primary-color);
2295
- border-left: 3px solid var(--qti-primary-color);
2296
- content: "";
2297
- display: inline-block;
2298
- height: 6px;
2299
- opacity: 0;
2300
- position: absolute;
2301
- transform: translate(6px, -2px) rotate(-45deg);
2302
- transition: all 0.2s ease;
2303
- width: 10px;
2304
- }
2305
- .qti-theme-subtle qti-graphic-associate-interaction [role=checkbox][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-subtle [role=checkbox][aria-checked=true][qti-choice]::after {
2306
- border-bottom: 2px solid var(--qti-primary-color);
2307
- border-left: 2px solid var(--qti-primary-color);
2308
- opacity: 1;
2309
- }
2310
- .qti-theme-subtle qti-graphic-associate-interaction [role=radio][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-subtle [role=radio][qti-choice]::before {
2311
- border-radius: 100%;
2312
- content: "";
2313
- min-height: 22px;
2314
- min-width: 22px;
2315
- }
2316
- .qti-theme-subtle qti-graphic-associate-interaction [role=radio][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-subtle [role=radio][qti-choice]::after {
2317
- background: var(--qti-primary-color);
2318
- border-radius: 100%;
2319
- content: "";
2320
- display: inline-block;
2321
- height: 14px;
2322
- margin-left: 4px;
2323
- opacity: 0;
2324
- position: absolute;
2325
- transform: scale(0.8);
2326
- transition: all 0.1s ease-out;
2327
- width: 14px;
2328
- }
2329
- .qti-theme-subtle qti-graphic-associate-interaction [role=radio][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-subtle [role=radio][aria-checked=true][qti-choice]::after {
2330
- opacity: 1;
2331
- transform: scale(1);
2332
- }
2333
1894
  .qti-theme-subtle qti-graphic-associate-interaction [qti-choice]::before, qti-graphic-associate-interaction .qti-theme-subtle [qti-choice]::before {
2334
1895
  position: relative;
2335
1896
  display: inline-block;
@@ -2372,60 +1933,6 @@ qti-gap-match-interaction qti-gap {
2372
1933
  outline-style: solid;
2373
1934
  outline-width: calc(var(--qti-border-width) * 2);
2374
1935
  }
2375
- .qti-theme-ims qti-graphic-associate-interaction [role=checkbox][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-ims [role=checkbox][qti-choice]::before {
2376
- content: "";
2377
- min-height: var(--width);
2378
- min-width: var(--width);
2379
- transition: border-radius 1s ease-in;
2380
- }
2381
- .qti-theme-ims qti-graphic-associate-interaction [role=checkbox][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-ims [role=checkbox][qti-choice]::after {
2382
- border-bottom: 3px solid var(--qti-primary-color);
2383
- border-left: 3px solid var(--qti-primary-color);
2384
- content: "";
2385
- display: inline-block;
2386
- height: 6px;
2387
- opacity: 0;
2388
- position: absolute;
2389
- transform: translate(6px, -2px) rotate(-45deg);
2390
- transition: all 0.2s ease;
2391
- width: 10px;
2392
- }
2393
- .qti-theme-ims qti-graphic-associate-interaction [role=checkbox][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-ims [role=checkbox][aria-checked=true][qti-choice]::after {
2394
- border-bottom: 2px solid var(--qti-primary-color);
2395
- border-left: 2px solid var(--qti-primary-color);
2396
- opacity: 1;
2397
- }
2398
- .qti-theme-ims qti-graphic-associate-interaction [role=radio][qti-choice]::before, qti-graphic-associate-interaction .qti-theme-ims [role=radio][qti-choice]::before {
2399
- border-radius: 100%;
2400
- content: "";
2401
- min-height: 22px;
2402
- min-width: 22px;
2403
- }
2404
- .qti-theme-ims qti-graphic-associate-interaction [role=radio][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-ims [role=radio][qti-choice]::after {
2405
- background: var(--qti-primary-color);
2406
- border-radius: 100%;
2407
- content: "";
2408
- display: inline-block;
2409
- height: 14px;
2410
- margin-left: 4px;
2411
- opacity: 0;
2412
- position: absolute;
2413
- transform: scale(0.8);
2414
- transition: all 0.1s ease-out;
2415
- width: 14px;
2416
- }
2417
- .qti-theme-ims qti-graphic-associate-interaction [role=radio][aria-checked=true][qti-choice]::after, qti-graphic-associate-interaction .qti-theme-ims [role=radio][aria-checked=true][qti-choice]::after {
2418
- opacity: 1;
2419
- transform: scale(1);
2420
- }
2421
- .qti-theme-ims qti-graphic-associate-interaction [qti-choice]::before, qti-graphic-associate-interaction .qti-theme-ims [qti-choice]::before {
2422
- position: relative;
2423
- display: inline-block;
2424
- border-radius: var(--qti-border-radius);
2425
- color: var(--qti-text-color);
2426
- background: var(--qti-background);
2427
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
2428
- }
2429
1936
  qti-graphic-associate-interaction {
2430
1937
  position: relative;
2431
1938
  display: block;
@@ -2499,52 +2006,6 @@ qti-graphic-gap-match-interaction {
2499
2006
  outline-style: solid;
2500
2007
  outline-width: calc(var(--qti-border-width) * 2);
2501
2008
  }
2502
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox]::before {
2503
- content: "";
2504
- min-height: var(--width);
2505
- min-width: var(--width);
2506
- transition: border-radius 1s ease-in;
2507
- }
2508
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::after, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox]::after {
2509
- border-bottom: 3px solid var(--qti-primary-color);
2510
- border-left: 3px solid var(--qti-primary-color);
2511
- content: "";
2512
- display: inline-block;
2513
- height: 6px;
2514
- opacity: 0;
2515
- position: absolute;
2516
- transform: translate(6px, -2px) rotate(-45deg);
2517
- transition: all 0.2s ease;
2518
- width: 10px;
2519
- }
2520
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=checkbox][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][aria-checked=true]::after {
2521
- border-bottom: 2px solid var(--qti-primary-color);
2522
- border-left: 2px solid var(--qti-primary-color);
2523
- opacity: 1;
2524
- }
2525
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=radio]::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=radio]::before {
2526
- border-radius: 100%;
2527
- content: "";
2528
- min-height: 22px;
2529
- min-width: 22px;
2530
- }
2531
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=radio]::after, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=radio]::after {
2532
- background: var(--qti-primary-color);
2533
- border-radius: 100%;
2534
- content: "";
2535
- display: inline-block;
2536
- height: 14px;
2537
- margin-left: 4px;
2538
- opacity: 0;
2539
- position: absolute;
2540
- transform: scale(0.8);
2541
- transition: all 0.1s ease-out;
2542
- width: 14px;
2543
- }
2544
- .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[role=radio][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[role=radio][aria-checked=true]::after {
2545
- opacity: 1;
2546
- transform: scale(1);
2547
- }
2548
2009
  .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before {
2549
2010
  position: relative;
2550
2011
  display: inline-block;
@@ -2585,61 +2046,15 @@ qti-graphic-gap-match-interaction {
2585
2046
  outline-style: solid;
2586
2047
  outline-width: calc(var(--qti-border-width) * 2);
2587
2048
  }
2588
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox]::before {
2589
- content: "";
2590
- min-height: var(--width);
2591
- min-width: var(--width);
2592
- transition: border-radius 1s ease-in;
2593
- }
2594
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::after, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox]::after {
2595
- border-bottom: 3px solid var(--qti-primary-color);
2596
- border-left: 3px solid var(--qti-primary-color);
2597
- content: "";
2049
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before {
2050
+ position: relative;
2598
2051
  display: inline-block;
2599
- height: 6px;
2600
- opacity: 0;
2601
- position: absolute;
2602
- transform: translate(6px, -2px) rotate(-45deg);
2603
- transition: all 0.2s ease;
2604
- width: 10px;
2605
- }
2606
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=checkbox][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][aria-checked=true]::after {
2607
- border-bottom: 2px solid var(--qti-primary-color);
2608
- border-left: 2px solid var(--qti-primary-color);
2609
- opacity: 1;
2052
+ border-radius: var(--qti-border-radius);
2053
+ color: var(--qti-text-color);
2054
+ background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
2610
2055
  }
2611
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=radio]::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=radio]::before {
2612
- border-radius: 100%;
2613
- content: "";
2614
- min-height: 22px;
2615
- min-width: 22px;
2616
- }
2617
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=radio]::after, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=radio]::after {
2618
- background: var(--qti-primary-color);
2619
- border-radius: 100%;
2620
- content: "";
2621
- display: inline-block;
2622
- height: 14px;
2623
- margin-left: 4px;
2624
- opacity: 0;
2625
- position: absolute;
2626
- transform: scale(0.8);
2627
- transition: all 0.1s ease-out;
2628
- width: 14px;
2629
- }
2630
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[role=radio][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][aria-checked=true]::after {
2631
- opacity: 1;
2632
- transform: scale(1);
2633
- }
2634
- .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before {
2635
- position: relative;
2636
- display: inline-block;
2637
- border-radius: var(--qti-border-radius);
2638
- color: var(--qti-text-color);
2639
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
2640
- }
2641
- .qti-theme-ims {
2642
- /* < usabled classes to extend in qti-components > */
2056
+ .qti-theme-ims {
2057
+ /* < usabled classes to extend in qti-components > */
2643
2058
  }
2644
2059
  .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice {
2645
2060
  cursor: pointer;
@@ -2673,60 +2088,6 @@ qti-graphic-gap-match-interaction {
2673
2088
  outline-style: solid;
2674
2089
  outline-width: calc(var(--qti-border-width) * 2);
2675
2090
  }
2676
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox]::before {
2677
- content: "";
2678
- min-height: var(--width);
2679
- min-width: var(--width);
2680
- transition: border-radius 1s ease-in;
2681
- }
2682
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=checkbox]::after, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox]::after {
2683
- border-bottom: 3px solid var(--qti-primary-color);
2684
- border-left: 3px solid var(--qti-primary-color);
2685
- content: "";
2686
- display: inline-block;
2687
- height: 6px;
2688
- opacity: 0;
2689
- position: absolute;
2690
- transform: translate(6px, -2px) rotate(-45deg);
2691
- transition: all 0.2s ease;
2692
- width: 10px;
2693
- }
2694
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=checkbox][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][aria-checked=true]::after {
2695
- border-bottom: 2px solid var(--qti-primary-color);
2696
- border-left: 2px solid var(--qti-primary-color);
2697
- opacity: 1;
2698
- }
2699
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=radio]::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=radio]::before {
2700
- border-radius: 100%;
2701
- content: "";
2702
- min-height: 22px;
2703
- min-width: 22px;
2704
- }
2705
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=radio]::after, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=radio]::after {
2706
- background: var(--qti-primary-color);
2707
- border-radius: 100%;
2708
- content: "";
2709
- display: inline-block;
2710
- height: 14px;
2711
- margin-left: 4px;
2712
- opacity: 0;
2713
- position: absolute;
2714
- transform: scale(0.8);
2715
- transition: all 0.1s ease-out;
2716
- width: 14px;
2717
- }
2718
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[role=radio][aria-checked=true]::after, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[role=radio][aria-checked=true]::after {
2719
- opacity: 1;
2720
- transform: scale(1);
2721
- }
2722
- .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice::before {
2723
- position: relative;
2724
- display: inline-block;
2725
- border-radius: var(--qti-border-radius);
2726
- color: var(--qti-text-color);
2727
- background: var(--qti-background);
2728
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
2729
- }
2730
2091
  qti-graphic-order-interaction {
2731
2092
  position: relative;
2732
2093
  display: block;
@@ -2764,288 +2125,48 @@ qti-graphic-order-interaction qti-hotspot-choice::after {
2764
2125
  .qti-theme-raised {
2765
2126
  /* < usabled classes to extend in qti-components > */
2766
2127
  }
2767
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=circle], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=circle], .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=rect], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=rect], .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=poly], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=poly] {
2768
- cursor: pointer;
2769
- --width: 22px;
2770
- --height: 22px;
2771
- display: inline-flex;
2772
- width: -moz-fit-content;
2773
- width: fit-content;
2774
- align-items: center;
2775
- gap: 0.2rem;
2776
- }
2777
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[disabled][shape=circle], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[disabled][shape=circle], .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[disabled][shape=rect], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[disabled][shape=rect], .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[disabled][shape=poly], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[disabled][shape=poly] {
2778
- box-shadow: unset !important;
2779
- color: var(--qti-border-color);
2780
- cursor: unset !important;
2781
- }
2782
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=circle]:focus, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=circle]:focus, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=rect]:focus, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=rect]:focus, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=poly]:focus, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=poly]:focus {
2783
- outline-color: rgb(var(--qti-primary) 0.4);
2784
- outline-offset: 2px;
2785
- outline-style: solid;
2786
- outline-width: var(--qti-border-width);
2787
- }
2788
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=circle]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=circle]:hover:not([disabled]), .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=rect]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=rect]:hover:not([disabled]), .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=poly]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=poly]:hover:not([disabled]) {
2789
- outline-color: rgb(var(--qti-primary) 0.4);
2790
- outline-offset: 0;
2791
- outline-style: solid;
2792
- outline-width: calc(var(--qti-border-width) * 2);
2793
- }
2794
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=circle]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=rect]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=poly]::before {
2795
- content: "";
2796
- min-height: var(--width);
2797
- min-width: var(--width);
2798
- transition: border-radius 1s ease-in;
2799
- }
2800
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=circle]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=rect]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][shape=poly]::after {
2801
- border-bottom: 3px solid var(--qti-primary-color);
2802
- border-left: 3px solid var(--qti-primary-color);
2803
- content: "";
2804
- display: inline-block;
2805
- height: 6px;
2806
- opacity: 0;
2807
- position: absolute;
2808
- transform: translate(6px, -2px) rotate(-45deg);
2809
- transition: all 0.2s ease;
2810
- width: 10px;
2811
- }
2812
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after {
2813
- border-bottom: 2px solid var(--qti-primary-color);
2814
- border-left: 2px solid var(--qti-primary-color);
2815
- opacity: 1;
2816
- }
2817
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=circle]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=rect]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=poly]::before {
2818
- border-radius: 100%;
2819
- content: "";
2820
- min-height: 22px;
2821
- min-width: 22px;
2822
- }
2823
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=circle]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=rect]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][shape=poly]::after {
2824
- background: var(--qti-primary-color);
2825
- border-radius: 100%;
2826
- content: "";
2827
- display: inline-block;
2828
- height: 14px;
2829
- margin-left: 4px;
2830
- opacity: 0;
2831
- position: absolute;
2832
- transform: scale(0.8);
2833
- transition: all 0.1s ease-out;
2834
- width: 14px;
2835
- }
2836
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after {
2837
- opacity: 1;
2838
- transform: scale(1);
2839
- }
2840
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=circle]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=circle]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=rect]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=rect]::before, .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[shape=poly]::before, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[shape=poly]::before {
2841
- position: relative;
2842
- display: inline-block;
2843
- border-radius: var(--qti-border-radius);
2844
- color: var(--qti-text-color);
2845
- background: var(--qti-background);
2846
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
2847
- }
2848
2128
  /* </ end test classes for storybook> */
2849
2129
  .qti-theme-subtle {
2850
2130
  /* < usabled classes to extend in qti-components */
2851
2131
  }
2852
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=circle], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=circle], .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=rect], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=rect], .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=poly], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=poly] {
2853
- cursor: pointer;
2854
- --width: 22px;
2855
- --height: 22px;
2856
- display: inline-flex;
2857
- width: -moz-fit-content;
2858
- width: fit-content;
2859
- align-items: center;
2860
- gap: 0.2rem;
2861
- }
2862
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[disabled][shape=circle], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[disabled][shape=circle], .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[disabled][shape=rect], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[disabled][shape=rect], .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[disabled][shape=poly], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[disabled][shape=poly] {
2863
- --qti-border-color: transparent;
2864
- box-shadow: unset !important;
2865
- color: var(--qti-shadow-color);
2866
- cursor: unset !important;
2867
- }
2868
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=circle]:focus, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=circle]:focus, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=rect]:focus, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=rect]:focus, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=poly]:focus, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=poly]:focus {
2869
- outline-color: rgb(var(--qti-primary) 0.4);
2870
- outline-offset: 2px;
2871
- outline-style: solid;
2872
- outline-width: var(--qti-border-width);
2873
- }
2874
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=circle]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=circle]:hover:not([disabled]), .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=rect]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=rect]:hover:not([disabled]), .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=poly]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=poly]:hover:not([disabled]) {
2875
- outline-color: rgb(var(--qti-primary) 0.4);
2876
- outline-offset: 0;
2877
- outline-style: solid;
2878
- outline-width: calc(var(--qti-border-width) * 2);
2879
- }
2880
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=circle]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=rect]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=poly]::before {
2881
- content: "";
2882
- min-height: var(--width);
2883
- min-width: var(--width);
2884
- transition: border-radius 1s ease-in;
2885
- }
2886
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=circle]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=rect]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][shape=poly]::after {
2887
- border-bottom: 3px solid var(--qti-primary-color);
2888
- border-left: 3px solid var(--qti-primary-color);
2889
- content: "";
2890
- display: inline-block;
2891
- height: 6px;
2892
- opacity: 0;
2893
- position: absolute;
2894
- transform: translate(6px, -2px) rotate(-45deg);
2895
- transition: all 0.2s ease;
2896
- width: 10px;
2897
- }
2898
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after {
2899
- border-bottom: 2px solid var(--qti-primary-color);
2900
- border-left: 2px solid var(--qti-primary-color);
2901
- opacity: 1;
2902
- }
2903
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=circle]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=rect]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=poly]::before {
2904
- border-radius: 100%;
2905
- content: "";
2906
- min-height: 22px;
2907
- min-width: 22px;
2908
- }
2909
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=circle]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=rect]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][shape=poly]::after {
2910
- background: var(--qti-primary-color);
2911
- border-radius: 100%;
2912
- content: "";
2913
- display: inline-block;
2914
- height: 14px;
2915
- margin-left: 4px;
2916
- opacity: 0;
2917
- position: absolute;
2918
- transform: scale(0.8);
2919
- transition: all 0.1s ease-out;
2920
- width: 14px;
2921
- }
2922
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after {
2923
- opacity: 1;
2924
- transform: scale(1);
2925
- }
2926
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=circle]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=circle]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=rect]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=rect]::before, .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[shape=poly]::before, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[shape=poly]::before {
2927
- position: relative;
2928
- display: inline-block;
2929
- border-radius: var(--qti-border-radius);
2930
- color: var(--qti-text-color);
2931
- background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
2932
- }
2933
2132
  .qti-theme-ims {
2934
2133
  /* < usabled classes to extend in qti-components > */
2935
2134
  }
2936
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=circle], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=circle], .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=rect], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=rect], .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=poly], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=poly] {
2135
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice {
2136
+ padding: var(--qti-padding-x) var(--qti-padding-y);
2937
2137
  cursor: pointer;
2938
- --width: 22px;
2939
- --height: 22px;
2940
- display: inline-flex;
2941
- width: -moz-fit-content;
2942
- width: fit-content;
2943
- align-items: center;
2944
- gap: 0.2rem;
2138
+ background: var(--qti-background);
2945
2139
  }
2946
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled][shape=circle], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled][shape=circle], .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled][shape=rect], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled][shape=rect], .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled][shape=poly], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled][shape=poly] {
2140
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled] {
2947
2141
  --qti-border-color: var(--qti-shadow-color);
2948
2142
  color: var(--qti-shadow-color);
2949
2143
  cursor: unset !important;
2950
2144
  filter: grayscale(100%);
2951
2145
  }
2952
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=circle]:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=circle]:focus-within, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=rect]:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=rect]:focus-within, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=poly]:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=poly]:focus-within {
2146
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within {
2953
2147
  outline-color: rgb(var(--qti-primary) 0.6);
2954
2148
  outline-offset: 4px;
2955
2149
  outline-style: solid;
2956
2150
  outline-width: var(--qti-border-width);
2957
2151
  /* applies to all before elements, choice round and circle, slider thumb */
2958
2152
  }
2959
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=circle]:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=circle]:focus-within::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=rect]:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=rect]:focus-within::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=poly]:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=poly]:focus-within::before {
2153
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before {
2960
2154
  background-color: rgb(var(--qti-primary) 0.2);
2961
2155
  }
2962
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=circle]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=circle]:hover:not([disabled]), .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=rect]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=rect]:hover:not([disabled]), .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=poly]:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=poly]:hover:not([disabled]) {
2156
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]) {
2963
2157
  outline-color: rgb(var(--qti-primary) 0.4);
2964
2158
  outline-offset: 2px;
2965
2159
  outline-style: solid;
2966
2160
  outline-width: calc(var(--qti-border-width) * 2);
2967
2161
  }
2968
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=circle]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=rect]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=poly]::before {
2969
- content: "";
2970
- min-height: var(--width);
2971
- min-width: var(--width);
2972
- transition: border-radius 1s ease-in;
2973
- }
2974
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=circle]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=circle]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=rect]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=rect]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][shape=poly]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][shape=poly]::after {
2975
- border-bottom: 3px solid var(--qti-primary-color);
2976
- border-left: 3px solid var(--qti-primary-color);
2977
- content: "";
2978
- display: inline-block;
2979
- height: 6px;
2980
- opacity: 0;
2981
- position: absolute;
2982
- transform: translate(6px, -2px) rotate(-45deg);
2983
- transition: all 0.2s ease;
2984
- width: 10px;
2985
- }
2986
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][aria-checked=true][shape=circle]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][aria-checked=true][shape=rect]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=checkbox][aria-checked=true][shape=poly]::after {
2987
- border-bottom: 2px solid var(--qti-primary-color);
2988
- border-left: 2px solid var(--qti-primary-color);
2989
- opacity: 1;
2990
- }
2991
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=circle]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=rect]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=poly]::before {
2992
- border-radius: 100%;
2993
- content: "";
2994
- min-height: 22px;
2995
- min-width: 22px;
2996
- }
2997
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=circle]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=circle]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=rect]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=rect]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][shape=poly]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][shape=poly]::after {
2998
- background: var(--qti-primary-color);
2999
- border-radius: 100%;
3000
- content: "";
3001
- display: inline-block;
3002
- height: 14px;
3003
- margin-left: 4px;
3004
- opacity: 0;
3005
- position: absolute;
3006
- transform: scale(0.8);
3007
- transition: all 0.1s ease-out;
3008
- width: 14px;
3009
- }
3010
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][aria-checked=true][shape=circle]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][aria-checked=true][shape=rect]::after, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[role=radio][aria-checked=true][shape=poly]::after {
3011
- opacity: 1;
3012
- transform: scale(1);
3013
- }
3014
- .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=circle]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=circle]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=rect]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=rect]::before, .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[shape=poly]::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[shape=poly]::before {
3015
- position: relative;
3016
- display: inline-block;
3017
- border-radius: var(--qti-border-radius);
3018
- color: var(--qti-text-color);
3019
- background: var(--qti-background);
3020
- box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
2162
+ .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[aria-checked=true] {
2163
+ --qti-border-color: var(--qti-primary-color);
2164
+ background-color: var(--qti-primary-color);
2165
+ color: #fff;
3021
2166
  }
3022
2167
  qti-hotspot-interaction qti-hotspot-choice {
3023
2168
  position: absolute;
3024
2169
  }
3025
- qti-hotspot-interaction qti-hotspot-choice[shape=circle] {
3026
- background: rgba(21, 0, 255, 0.067);
3027
- }
3028
- qti-hotspot-interaction qti-hotspot-choice[shape=circle]::before, qti-hotspot-interaction qti-hotspot-choice[shape=circle]::after {
3029
- content: unset !important;
3030
- }
3031
- qti-hotspot-interaction qti-hotspot-choice[shape=rect] {
3032
- background: rgba(21, 0, 255, 0.067);
3033
- }
3034
- qti-hotspot-interaction qti-hotspot-choice[shape=rect]::before, qti-hotspot-interaction qti-hotspot-choice[shape=rect]::after {
3035
- content: unset !important;
3036
- }
3037
- qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3038
- background: rgba(21, 0, 255, 0.621);
3039
- }
3040
- qti-hotspot-interaction qti-hotspot-choice[shape=poly] {
3041
- background: rgba(21, 0, 255, 0.067);
3042
- }
3043
- qti-hotspot-interaction qti-hotspot-choice[shape=poly]::before, qti-hotspot-interaction qti-hotspot-choice[shape=poly]::after {
3044
- content: unset !important;
3045
- }
3046
- qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3047
- background: rgba(21, 0, 255, 0.621);
3048
- }
3049
2170
 
3050
2171
  .qti-theme-raised {
3051
2172
  /* < usabled classes to extend in qti-components > */
@@ -3075,7 +2196,7 @@ qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3075
2196
  .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice[active] {
3076
2197
  background: var(--qti-background);
3077
2198
  }
3078
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > * {
2199
+ .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice {
3079
2200
  position: relative;
3080
2201
  display: inline-block;
3081
2202
  border-radius: var(--qti-border-radius);
@@ -3083,26 +2204,28 @@ qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3083
2204
  padding: var(--qti-padding-x) var(--qti-padding-y);
3084
2205
  cursor: pointer;
3085
2206
  background: var(--qti-background);
2207
+ -webkit-user-select: none;
2208
+ user-select: none;
3086
2209
  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
3087
2210
  }
3088
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > [disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > [disabled] {
2211
+ .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
3089
2212
  box-shadow: unset !important;
3090
2213
  color: var(--qti-border-color);
3091
2214
  cursor: unset !important;
3092
2215
  }
3093
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > :focus {
2216
+ .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:focus {
3094
2217
  outline-color: rgb(var(--qti-primary) 0.4);
3095
2218
  outline-offset: 2px;
3096
2219
  outline-style: solid;
3097
2220
  outline-width: var(--qti-border-width);
3098
2221
  }
3099
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > :hover:not([disabled]) {
2222
+ .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
3100
2223
  outline-color: rgb(var(--qti-primary) 0.4);
3101
2224
  outline-offset: 0;
3102
2225
  outline-style: solid;
3103
2226
  outline-width: calc(var(--qti-border-width) * 2);
3104
2227
  }
3105
- .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > ::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > ::before {
2228
+ .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice::before {
3106
2229
  position: absolute;
3107
2230
  bottom: 0.2rem;
3108
2231
  top: 0.2rem;
@@ -3143,34 +2266,36 @@ qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3143
2266
  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
3144
2267
  transform: scale(1.02);
3145
2268
  }
3146
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > * {
2269
+ .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice {
3147
2270
  position: relative;
3148
2271
  display: inline-block;
3149
2272
  border-radius: var(--qti-border-radius);
3150
2273
  color: var(--qti-text-color);
3151
2274
  padding: var(--qti-padding-x) var(--qti-padding-y);
3152
2275
  cursor: pointer;
2276
+ -webkit-user-select: none;
2277
+ user-select: none;
3153
2278
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
3154
2279
  }
3155
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > [disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > [disabled] {
2280
+ .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
3156
2281
  --qti-border-color: transparent;
3157
2282
  box-shadow: unset !important;
3158
2283
  color: var(--qti-shadow-color);
3159
2284
  cursor: unset !important;
3160
2285
  }
3161
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > :focus {
2286
+ .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:focus {
3162
2287
  outline-color: rgb(var(--qti-primary) 0.4);
3163
2288
  outline-offset: 2px;
3164
2289
  outline-style: solid;
3165
2290
  outline-width: var(--qti-border-width);
3166
2291
  }
3167
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > :hover:not([disabled]) {
2292
+ .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
3168
2293
  outline-color: rgb(var(--qti-primary) 0.4);
3169
2294
  outline-offset: 0;
3170
2295
  outline-style: solid;
3171
2296
  outline-width: calc(var(--qti-border-width) * 2);
3172
2297
  }
3173
- .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > ::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > ::before {
2298
+ .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice::before {
3174
2299
  position: absolute;
3175
2300
  bottom: 0.2rem;
3176
2301
  top: 0.2rem;
@@ -3232,7 +2357,7 @@ qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3232
2357
  .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[active] {
3233
2358
  background: rgb(var(--qti-primary) 0.4) !important;
3234
2359
  }
3235
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > * {
2360
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice {
3236
2361
  position: relative;
3237
2362
  display: inline-block;
3238
2363
  border-radius: var(--qti-border-radius);
@@ -3242,54 +2367,45 @@ qti-hotspot-interaction qti-hotspot-choice[aria-checked=true] {
3242
2367
  background: var(--qti-background);
3243
2368
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
3244
2369
  }
3245
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > [disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > [disabled] {
2370
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
3246
2371
  --qti-border-color: var(--qti-shadow-color);
3247
2372
  color: var(--qti-shadow-color);
3248
2373
  cursor: unset !important;
3249
2374
  filter: grayscale(100%);
3250
2375
  }
3251
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > :focus-within {
2376
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within {
3252
2377
  outline-color: rgb(var(--qti-primary) 0.6);
3253
2378
  outline-offset: 4px;
3254
2379
  outline-style: solid;
3255
2380
  outline-width: var(--qti-border-width);
3256
2381
  /* applies to all before elements, choice round and circle, slider thumb */
3257
2382
  }
3258
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > :focus-within::before {
2383
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before {
3259
2384
  background-color: rgb(var(--qti-primary) 0.2);
3260
2385
  }
3261
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > :hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > :hover:not([disabled]) {
2386
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
3262
2387
  outline-color: rgb(var(--qti-primary) 0.4);
3263
2388
  outline-offset: 2px;
3264
2389
  outline-style: solid;
3265
2390
  outline-width: calc(var(--qti-border-width) * 2);
3266
2391
  }
3267
- .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > [active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > [active] {
2392
+ .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[active] {
3268
2393
  background: rgb(var(--qti-primary) 0.4) !important;
3269
2394
  }
3270
2395
  qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
3271
- display: block;
3272
- }
3273
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice {
3274
- margin-right: 0.2rem;
3275
- margin-bottom: 1rem;
2396
+ display: flex;
2397
+ gap: var(--qti-gap, 0.5rem);
2398
+ flex-wrap: wrap;
3276
2399
  }
3277
2400
  qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
3278
- display: grid;
3279
- height: 10rem;
3280
- font-size: smaller;
3281
- gap: 1rem;
3282
- grid-auto-columns: 1fr;
3283
- grid-auto-flow: column;
2401
+ display: flex;
2402
+ gap: var(--qti-gap, 0.5rem);
2403
+ flex-wrap: wrap;
3284
2404
  }
3285
2405
  qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
3286
- display: unset !important;
3287
- padding: 1rem;
3288
- }
3289
- qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > * {
3290
- display: block !important;
2406
+ display: flex;
2407
+ flex-direction: column;
3291
2408
  }
3292
-
3293
2409
  qti-match-interaction.qti-match-tabular qti-simple-match-set:first-of-type {
3294
2410
  display: flex;
3295
2411
  margin-left: 4rem;
@@ -3307,13 +2423,30 @@ qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-si
3307
2423
  qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice > * {
3308
2424
  display: block !important;
3309
2425
  }
3310
- qti-slider-interaction {
3311
- border: 2px solid orange;
3312
- }
2426
+
3313
2427
  .qti-theme-raised {
3314
2428
  /* < usabled classes to extend in qti-components > */
3315
2429
  }
3316
- .qti-theme-raised qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-raised qti-simple-choice {
2430
+ .qti-theme-raised qti-order-interaction::part(drop-list) {
2431
+ position: relative;
2432
+ display: inline-block;
2433
+ border-radius: var(--qti-border-radius);
2434
+ color: var(--qti-text-color);
2435
+ background: var(--qti-background);
2436
+ box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
2437
+ }
2438
+ .qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) {
2439
+ display: flex;
2440
+ }
2441
+ .qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) > * {
2442
+ box-shadow: unset;
2443
+ flex-grow: 1;
2444
+ margin: 2px;
2445
+ }
2446
+ .qti-theme-raised qti-order-interaction[active]::part(drop-list) {
2447
+ background: var(--qti-background);
2448
+ }
2449
+ .qti-theme-raised qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-order-interaction::part(qti-simple-choice) {
3317
2450
  position: relative;
3318
2451
  display: inline-block;
3319
2452
  border-radius: var(--qti-border-radius);
@@ -3321,20 +2454,22 @@ qti-slider-interaction {
3321
2454
  padding: var(--qti-padding-x) var(--qti-padding-y);
3322
2455
  cursor: pointer;
3323
2456
  background: var(--qti-background);
2457
+ -webkit-user-select: none;
2458
+ user-select: none;
3324
2459
  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
3325
2460
  }
3326
- .qti-theme-raised qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-raised qti-simple-choice[disabled] {
2461
+ .qti-theme-raised qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-order-interaction[disabled]::part(qti-simple-choice) {
3327
2462
  box-shadow: unset !important;
3328
2463
  color: var(--qti-border-color);
3329
2464
  cursor: unset !important;
3330
2465
  }
3331
- .qti-theme-raised qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-raised qti-simple-choice:focus {
2466
+ .qti-theme-raised qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-order-interaction:focus::part(qti-simple-choice) {
3332
2467
  outline-color: rgb(var(--qti-primary) 0.4);
3333
2468
  outline-offset: 2px;
3334
2469
  outline-style: solid;
3335
2470
  outline-width: var(--qti-border-width);
3336
2471
  }
3337
- .qti-theme-raised qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
2472
+ .qti-theme-raised qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
3338
2473
  outline-color: rgb(var(--qti-primary) 0.4);
3339
2474
  outline-offset: 0;
3340
2475
  outline-style: solid;
@@ -3356,28 +2491,49 @@ qti-slider-interaction {
3356
2491
  .qti-theme-subtle {
3357
2492
  /* < usabled classes to extend in qti-components */
3358
2493
  }
3359
- .qti-theme-subtle qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-subtle qti-simple-choice {
2494
+ .qti-theme-subtle qti-order-interaction::part(drop-list) {
2495
+ position: relative;
2496
+ display: inline-block;
2497
+ border-radius: var(--qti-border-radius);
2498
+ color: var(--qti-text-color);
2499
+ background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
2500
+ transition: all 0.2s ease-out;
2501
+ }
2502
+ .qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) {
2503
+ display: flex;
2504
+ }
2505
+ .qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) > * {
2506
+ flex-grow: 1;
2507
+ margin: 2px;
2508
+ }
2509
+ .qti-theme-subtle qti-order-interaction[active]::part(drop-list) {
2510
+ background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
2511
+ transform: scale(1.02);
2512
+ }
2513
+ .qti-theme-subtle qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-order-interaction::part(qti-simple-choice) {
3360
2514
  position: relative;
3361
2515
  display: inline-block;
3362
2516
  border-radius: var(--qti-border-radius);
3363
2517
  color: var(--qti-text-color);
3364
2518
  padding: var(--qti-padding-x) var(--qti-padding-y);
3365
2519
  cursor: pointer;
2520
+ -webkit-user-select: none;
2521
+ user-select: none;
3366
2522
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
3367
2523
  }
3368
- .qti-theme-subtle qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-subtle qti-simple-choice[disabled] {
2524
+ .qti-theme-subtle qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-order-interaction[disabled]::part(qti-simple-choice) {
3369
2525
  --qti-border-color: transparent;
3370
2526
  box-shadow: unset !important;
3371
2527
  color: var(--qti-shadow-color);
3372
2528
  cursor: unset !important;
3373
2529
  }
3374
- .qti-theme-subtle qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-subtle qti-simple-choice:focus {
2530
+ .qti-theme-subtle qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-order-interaction:focus::part(qti-simple-choice) {
3375
2531
  outline-color: rgb(var(--qti-primary) 0.4);
3376
2532
  outline-offset: 2px;
3377
2533
  outline-style: solid;
3378
2534
  outline-width: var(--qti-border-width);
3379
2535
  }
3380
- .qti-theme-subtle qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
2536
+ .qti-theme-subtle qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
3381
2537
  outline-color: rgb(var(--qti-primary) 0.4);
3382
2538
  outline-offset: 0;
3383
2539
  outline-style: solid;
@@ -3398,7 +2554,45 @@ qti-slider-interaction {
3398
2554
  .qti-theme-ims {
3399
2555
  /* < usabled classes to extend in qti-components > */
3400
2556
  }
3401
- .qti-theme-ims qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-ims qti-simple-choice {
2557
+ .qti-theme-ims qti-order-interaction::part(drop-list) {
2558
+ position: relative;
2559
+ display: inline-block;
2560
+ border-radius: var(--qti-border-radius);
2561
+ color: var(--qti-text-color);
2562
+ border-radius: 0;
2563
+ background: var(--qti-white);
2564
+ box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
2565
+ }
2566
+ .qti-theme-ims qti-order-interaction[disabled]::part(drop-list) {
2567
+ --qti-border-color: var(--qti-shadow-color);
2568
+ color: var(--qti-shadow-color);
2569
+ cursor: unset !important;
2570
+ filter: grayscale(100%);
2571
+ }
2572
+ .qti-theme-ims qti-order-interaction:focus-within::part(drop-list) {
2573
+ outline-color: rgb(var(--qti-primary) 0.6);
2574
+ outline-offset: 4px;
2575
+ outline-style: solid;
2576
+ outline-width: var(--qti-border-width);
2577
+ /* applies to all before elements, choice round and circle, slider thumb */
2578
+ }
2579
+ .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(drop-list) {
2580
+ outline-color: rgb(var(--qti-primary) 0.4);
2581
+ outline-offset: 2px;
2582
+ outline-style: solid;
2583
+ outline-width: calc(var(--qti-border-width) * 2);
2584
+ }
2585
+ .qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) {
2586
+ display: inline-flex;
2587
+ }
2588
+ .qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) > * {
2589
+ flex-grow: 1;
2590
+ margin: 2px;
2591
+ }
2592
+ .qti-theme-ims qti-order-interaction[active]::part(drop-list) {
2593
+ background: rgb(var(--qti-primary) 0.4) !important;
2594
+ }
2595
+ .qti-theme-ims qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-order-interaction::part(qti-simple-choice) {
3402
2596
  position: relative;
3403
2597
  display: inline-block;
3404
2598
  border-radius: var(--qti-border-radius);
@@ -3408,13 +2602,13 @@ qti-slider-interaction {
3408
2602
  background: var(--qti-background);
3409
2603
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
3410
2604
  }
3411
- .qti-theme-ims qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-ims qti-simple-choice[disabled] {
2605
+ .qti-theme-ims qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-order-interaction[disabled]::part(qti-simple-choice) {
3412
2606
  --qti-border-color: var(--qti-shadow-color);
3413
2607
  color: var(--qti-shadow-color);
3414
2608
  cursor: unset !important;
3415
2609
  filter: grayscale(100%);
3416
2610
  }
3417
- .qti-theme-ims qti-order-interaction qti-simple-choice:focus-within, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within {
2611
+ .qti-theme-ims qti-order-interaction qti-simple-choice:focus-within, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-order-interaction:focus-within::part(qti-simple-choice) {
3418
2612
  outline-color: rgb(var(--qti-primary) 0.6);
3419
2613
  outline-offset: 4px;
3420
2614
  outline-style: solid;
@@ -3424,15 +2618,25 @@ qti-slider-interaction {
3424
2618
  .qti-theme-ims qti-order-interaction qti-simple-choice:focus-within::before, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within::before {
3425
2619
  background-color: rgb(var(--qti-primary) 0.2);
3426
2620
  }
3427
- .qti-theme-ims qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
2621
+ .qti-theme-ims qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
3428
2622
  outline-color: rgb(var(--qti-primary) 0.4);
3429
2623
  outline-offset: 2px;
3430
2624
  outline-style: solid;
3431
2625
  outline-width: calc(var(--qti-border-width) * 2);
3432
2626
  }
3433
- .qti-theme-ims qti-order-interaction qti-simple-choice[active], qti-order-interaction .qti-theme-ims qti-simple-choice[active] {
2627
+ .qti-theme-ims qti-order-interaction qti-simple-choice[active], qti-order-interaction .qti-theme-ims qti-simple-choice[active], .qti-theme-ims qti-order-interaction[active]::part(qti-simple-choice) {
3434
2628
  background: rgb(var(--qti-primary) 0.4) !important;
3435
2629
  }
2630
+ qti-order-interaction::part(drop-list) {
2631
+ width: 30%;
2632
+ height: 40px;
2633
+ }
2634
+
2635
+ qti-order-interaction::part(drop-list) {
2636
+ display: block;
2637
+ background: var(--qti-background, #eee);
2638
+ padding: var(--qti-padding-x, 0.7rem) var(--qti-padding-y, 0.5rem);
2639
+ }
3436
2640
  .qti-theme-raised {
3437
2641
  /* < usabled classes to extend in qti-components > */
3438
2642
  }
@@ -3450,17 +2654,6 @@ qti-select-point-interaction {
3450
2654
  .qti-theme-raised {
3451
2655
  /* < usabled classes to extend in qti-components > */
3452
2656
  }
3453
- .qti-theme-raised qti-slider-interaction {
3454
- --slidable-thumb-width: 22px;
3455
- --slidable-thumb-height: 22px;
3456
- background-position: 0 bottom;
3457
- background-size: calc((100% - var(--qti-border-width)) / ((var(--qti-slider-interaction-upper-bounds) - var(--qti-slider-interaction-lower-bounds)) / var(--qti-slider-interaction-step))) 10%;
3458
- background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
3459
- display: inline-block;
3460
- margin-bottom: 50px;
3461
- padding-bottom: 50px;
3462
- position: relative;
3463
- }
3464
2657
  .qti-theme-raised qti-slider-interaction[disabled] {
3465
2658
  box-shadow: unset !important;
3466
2659
  color: var(--qti-border-color);
@@ -3478,22 +2671,6 @@ qti-select-point-interaction {
3478
2671
  outline-style: solid;
3479
2672
  outline-width: calc(var(--qti-border-width) * 2);
3480
2673
  }
3481
- .qti-theme-raised qti-slider-interaction[role=slider]::before {
3482
- position: absolute;
3483
- bottom: 0;
3484
- min-width: var(--slidable-thumb-width);
3485
- min-height: var(--slidable-thumb-height);
3486
- content: "";
3487
- transform: translateX(-50%);
3488
- }
3489
- .qti-theme-raised qti-slider-interaction[role=slider]::after {
3490
- position: absolute;
3491
- bottom: -50px;
3492
- left: 50%;
3493
- content: attr(aria-valuenow);
3494
- text-align: center;
3495
- transform: translateX(-50%);
3496
- }
3497
2674
  .qti-theme-raised qti-slider-interaction::before {
3498
2675
  position: relative;
3499
2676
  display: inline-block;
@@ -3511,15 +2688,6 @@ qti-select-point-interaction {
3511
2688
  }
3512
2689
  .qti-theme-subtle qti-slider-interaction {
3513
2690
  cursor: pointer;
3514
- --slidable-thumb-width: 22px;
3515
- --slidable-thumb-height: 22px;
3516
- background-position: 0 bottom;
3517
- background-size: calc((100% - var(--qti-border-width)) / ((var(--qti-slider-interaction-upper-bounds) - var(--qti-slider-interaction-lower-bounds)) / var(--qti-slider-interaction-step))) 10%;
3518
- background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
3519
- display: inline-block;
3520
- margin-bottom: 50px;
3521
- padding-bottom: 50px;
3522
- position: relative;
3523
2691
  }
3524
2692
  .qti-theme-subtle qti-slider-interaction[aria-checked=true] {
3525
2693
  --qti-border-color: var(--qti-primary-color);
@@ -3543,22 +2711,6 @@ qti-select-point-interaction {
3543
2711
  outline-style: solid;
3544
2712
  outline-width: calc(var(--qti-border-width) * 2);
3545
2713
  }
3546
- .qti-theme-subtle qti-slider-interaction[role=slider]::before {
3547
- position: absolute;
3548
- bottom: 0;
3549
- min-width: var(--slidable-thumb-width);
3550
- min-height: var(--slidable-thumb-height);
3551
- content: "";
3552
- transform: translateX(-50%);
3553
- }
3554
- .qti-theme-subtle qti-slider-interaction[role=slider]::after {
3555
- position: absolute;
3556
- bottom: -50px;
3557
- left: 50%;
3558
- content: attr(aria-valuenow);
3559
- text-align: center;
3560
- transform: translateX(-50%);
3561
- }
3562
2714
  .qti-theme-subtle qti-slider-interaction::before {
3563
2715
  position: relative;
3564
2716
  display: inline-block;
@@ -3573,42 +2725,6 @@ qti-select-point-interaction {
3573
2725
  }
3574
2726
  .qti-theme-ims qti-slider-interaction {
3575
2727
  cursor: pointer;
3576
- --slidable-thumb-width: 22px;
3577
- --slidable-thumb-height: 22px;
3578
- background-position: 0 bottom;
3579
- background-size: calc((100% - var(--qti-border-width)) / ((var(--qti-slider-interaction-upper-bounds) - var(--qti-slider-interaction-lower-bounds)) / var(--qti-slider-interaction-step))) 10%;
3580
- background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
3581
- display: inline-block;
3582
- margin-bottom: 50px;
3583
- padding-bottom: 50px;
3584
- position: relative;
3585
- }
3586
- .qti-theme-ims qti-slider-interaction[aria-checked=true] {
3587
- --qti-border-color: var(--qti-primary-color);
3588
- background-color: var(--qti-primary-color);
3589
- color: #fff;
3590
- }
3591
- .qti-theme-ims qti-slider-interaction[disabled] {
3592
- --qti-border-color: var(--qti-shadow-color);
3593
- color: var(--qti-shadow-color);
3594
- cursor: unset !important;
3595
- filter: grayscale(100%);
3596
- }
3597
- .qti-theme-ims qti-slider-interaction:focus-within {
3598
- outline-color: rgb(var(--qti-primary) 0.6);
3599
- outline-offset: 4px;
3600
- outline-style: solid;
3601
- outline-width: var(--qti-border-width);
3602
- /* applies to all before elements, choice round and circle, slider thumb */
3603
- }
3604
- .qti-theme-ims qti-slider-interaction:focus-within::before {
3605
- background-color: rgb(var(--qti-primary) 0.2);
3606
- }
3607
- .qti-theme-ims qti-slider-interaction:hover:not([disabled]) {
3608
- outline-color: rgb(var(--qti-primary) 0.4);
3609
- outline-offset: 2px;
3610
- outline-style: solid;
3611
- outline-width: calc(var(--qti-border-width) * 2);
3612
2728
  }
3613
2729
  .qti-theme-ims qti-slider-interaction[disabled] {
3614
2730
  --qti-border-color: var(--qti-shadow-color);
@@ -3632,23 +2748,7 @@ qti-select-point-interaction {
3632
2748
  outline-style: solid;
3633
2749
  outline-width: calc(var(--qti-border-width) * 2);
3634
2750
  }
3635
- .qti-theme-ims qti-slider-interaction[role=slider]::before {
3636
- position: absolute;
3637
- bottom: 0;
3638
- min-width: var(--slidable-thumb-width);
3639
- min-height: var(--slidable-thumb-height);
3640
- content: "";
3641
- transform: translateX(-50%);
3642
- }
3643
- .qti-theme-ims qti-slider-interaction[role=slider]::after {
3644
- position: absolute;
3645
- bottom: -50px;
3646
- left: 50%;
3647
- content: attr(aria-valuenow);
3648
- text-align: center;
3649
- transform: translateX(-50%);
3650
- }
3651
- .qti-theme-ims qti-slider-interaction::before {
2751
+ .qti-theme-ims qti-slider-interaction::part(knob) {
3652
2752
  position: relative;
3653
2753
  display: inline-block;
3654
2754
  border-radius: var(--qti-border-radius);
@@ -3657,10 +2757,28 @@ qti-select-point-interaction {
3657
2757
  border-radius: calc(var(--qti-border-radius) * 3);
3658
2758
  background: var(--qti-background);
3659
2759
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
2760
+ width: 24px;
2761
+ height: 24px;
2762
+ border-radius: 100%;
2763
+ aspect-ratio: 1/1;
2764
+ transform: translateX(-50%);
2765
+ transform-origin: center;
3660
2766
  }
3661
2767
 
3662
- qti-slider-interaction::before {
3663
- left: var(--qti-slider-interaction-aria-valuenow);
2768
+ qti-slider-interaction {
2769
+ width: 100%;
2770
+ display: block;
2771
+ }
2772
+
2773
+ qti-slider-interaction::part(knob) {
2774
+ position: absolute;
2775
+ }
2776
+
2777
+ qti-slider-interaction::part(rail) {
2778
+ background-position: 0 center;
2779
+ /* ticks */
2780
+ background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
2781
+ background-size: calc((100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
3664
2782
  }
3665
2783
  html,
3666
2784
  body,