@oslokommune/punkt-css 16.26.2 → 17.0.0

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 (75) hide show
  1. package/CHANGELOG.md +111 -0
  2. package/dist/css/components/accordion.css +27 -5
  3. package/dist/css/components/accordion.min.css +1 -1
  4. package/dist/css/components/alert.css +37 -9
  5. package/dist/css/components/alert.min.css +1 -1
  6. package/dist/css/components/calendar.css +4 -0
  7. package/dist/css/components/calendar.min.css +1 -1
  8. package/dist/css/components/combobox.css +82 -0
  9. package/dist/css/components/combobox.min.css +1 -1
  10. package/dist/css/components/datepicker.css +82 -3
  11. package/dist/css/components/datepicker.min.css +1 -1
  12. package/dist/css/components/footer.css +232 -108
  13. package/dist/css/components/footer.min.css +1 -1
  14. package/dist/css/components/header-global.css +287 -0
  15. package/dist/css/components/header-global.min.css +1 -0
  16. package/dist/css/components/header-menu.css +364 -123
  17. package/dist/css/components/header-menu.min.css +1 -1
  18. package/dist/css/components/header-service-mobile.css +71 -22
  19. package/dist/css/components/header-service-mobile.min.css +1 -1
  20. package/dist/css/components/header-service.css +68 -14
  21. package/dist/css/components/header-service.min.css +1 -1
  22. package/dist/css/components/header-shared.css +49 -0
  23. package/dist/css/components/header-shared.min.css +0 -0
  24. package/dist/css/components/inputwrapper.css +59 -5
  25. package/dist/css/components/inputwrapper.min.css +1 -1
  26. package/dist/css/components/modal.css +0 -5
  27. package/dist/css/components/modal.min.css +1 -1
  28. package/dist/css/components/searchinput.css +71 -2
  29. package/dist/css/components/searchinput.min.css +1 -1
  30. package/dist/css/components/textarea.css +41 -0
  31. package/dist/css/components/textarea.min.css +1 -0
  32. package/dist/css/components/textinput.css +126 -6
  33. package/dist/css/components/textinput.min.css +1 -1
  34. package/dist/css/components/timepicker.css +133 -38
  35. package/dist/css/components/timepicker.min.css +1 -1
  36. package/dist/css/elements/button.css +20 -4
  37. package/dist/css/elements/button.min.css +1 -1
  38. package/dist/css/elements/checkbox-radio.css +3 -3
  39. package/dist/css/elements/checkbox-radio.min.css +1 -1
  40. package/dist/css/elements/input.css +121 -6
  41. package/dist/css/elements/input.min.css +1 -1
  42. package/dist/css/elements/select.css +137 -9
  43. package/dist/css/elements/select.min.css +1 -1
  44. package/dist/css/pkt-base.css +434 -1
  45. package/dist/css/pkt-base.min.css +1 -1
  46. package/dist/css/pkt-components.css +1595 -348
  47. package/dist/css/pkt-components.min.css +1 -1
  48. package/dist/css/pkt-docs.css +2077 -364
  49. package/dist/css/pkt-docs.min.css +1 -1
  50. package/dist/css/pkt-elements.css +160 -16
  51. package/dist/css/pkt-elements.min.css +1 -1
  52. package/dist/css/pkt.css +2077 -364
  53. package/dist/css/pkt.min.css +1 -1
  54. package/dist/scss/abstracts/variables/_index.scss +1 -1
  55. package/dist/scss/abstracts/variables/_spacing.scss +1 -0
  56. package/dist/scss/components/_accordion.scss +7 -11
  57. package/dist/scss/components/_alert.scss +34 -11
  58. package/dist/scss/components/_calendar.scss +3 -0
  59. package/dist/scss/components/_combobox.scss +74 -0
  60. package/dist/scss/components/_datepicker.scss +75 -8
  61. package/dist/scss/components/_footer.scss +149 -123
  62. package/dist/scss/components/_header-global.scss +192 -0
  63. package/dist/scss/components/_header-menu.scss +30 -31
  64. package/dist/scss/components/_header-service-mobile.scss +4 -28
  65. package/dist/scss/components/_header-service.scss +4 -21
  66. package/dist/scss/components/_header-shared.scss +190 -0
  67. package/dist/scss/components/_index.scss +2 -0
  68. package/dist/scss/components/_inputwrapper.scss +66 -10
  69. package/dist/scss/components/_modal.scss +1 -5
  70. package/dist/scss/components/_searchinput.scss +58 -2
  71. package/dist/scss/components/_textarea.scss +48 -0
  72. package/dist/scss/components/_timepicker.scss +95 -34
  73. package/dist/scss/elements/_button.scss +12 -3
  74. package/dist/scss/elements/_input.scss +141 -7
  75. package/package.json +3 -3
package/dist/css/pkt.css CHANGED
@@ -2989,6 +2989,70 @@ body {
2989
2989
  gap: 8rem !important;
2990
2990
  }
2991
2991
 
2992
+ .m-size-148 {
2993
+ margin: 9.25rem !important;
2994
+ }
2995
+
2996
+ .mt-size-148 {
2997
+ margin-top: 9.25rem !important;
2998
+ }
2999
+
3000
+ .mr-size-148 {
3001
+ margin-right: 9.25rem !important;
3002
+ }
3003
+
3004
+ .mb-size-148 {
3005
+ margin-bottom: 9.25rem !important;
3006
+ }
3007
+
3008
+ .ml-size-148 {
3009
+ margin-left: 9.25rem !important;
3010
+ }
3011
+
3012
+ .mx-size-148 {
3013
+ margin-right: 9.25rem !important;
3014
+ margin-left: 9.25rem !important;
3015
+ }
3016
+
3017
+ .my-size-148 {
3018
+ margin-top: 9.25rem !important;
3019
+ margin-bottom: 9.25rem !important;
3020
+ }
3021
+
3022
+ .p-size-148 {
3023
+ padding: 9.25rem !important;
3024
+ }
3025
+
3026
+ .pt-size-148 {
3027
+ padding-top: 9.25rem !important;
3028
+ }
3029
+
3030
+ .pr-size-148 {
3031
+ padding-right: 9.25rem !important;
3032
+ }
3033
+
3034
+ .pb-size-148 {
3035
+ padding-bottom: 9.25rem !important;
3036
+ }
3037
+
3038
+ .pl-size-148 {
3039
+ padding-left: 9.25rem !important;
3040
+ }
3041
+
3042
+ .px-size-148 {
3043
+ padding-right: 9.25rem !important;
3044
+ padding-left: 9.25rem !important;
3045
+ }
3046
+
3047
+ .py-size-148 {
3048
+ padding-top: 9.25rem !important;
3049
+ padding-bottom: 9.25rem !important;
3050
+ }
3051
+
3052
+ .gap-size-148 {
3053
+ gap: 9.25rem !important;
3054
+ }
3055
+
2992
3056
  .m-size-5 {
2993
3057
  margin: 0.3125rem !important;
2994
3058
  }
@@ -9379,6 +9443,312 @@ body {
9379
9443
  gap: 8rem !important;
9380
9444
  }
9381
9445
  }
9446
+ @media screen and (min-width: 0) {
9447
+ .m-size-148--mobile-up {
9448
+ margin: 9.25rem !important;
9449
+ }
9450
+ .mt-size-148--mobile-up {
9451
+ margin-top: 9.25rem !important;
9452
+ }
9453
+ .mr-size-148--mobile-up {
9454
+ margin-right: 9.25rem !important;
9455
+ }
9456
+ .mb-size-148--mobile-up {
9457
+ margin-bottom: 9.25rem !important;
9458
+ }
9459
+ .ml-size-148--mobile-up {
9460
+ margin-left: 9.25rem !important;
9461
+ }
9462
+ .mx-size-148--mobile-up {
9463
+ margin-right: 9.25rem !important;
9464
+ margin-left: 9.25rem !important;
9465
+ }
9466
+ .my-size-148--mobile-up {
9467
+ margin-top: 9.25rem !important;
9468
+ margin-bottom: 9.25rem !important;
9469
+ }
9470
+ .p-size-148--mobile-up {
9471
+ padding: 9.25rem !important;
9472
+ }
9473
+ .pt-size-148--mobile-up {
9474
+ padding-top: 9.25rem !important;
9475
+ }
9476
+ .pr-size-148--mobile-up {
9477
+ padding-right: 9.25rem !important;
9478
+ }
9479
+ .pb-size-148--mobile-up {
9480
+ padding-bottom: 9.25rem !important;
9481
+ }
9482
+ .pl-size-148--mobile-up {
9483
+ padding-left: 9.25rem !important;
9484
+ }
9485
+ .px-size-148--mobile-up {
9486
+ padding-right: 9.25rem !important;
9487
+ padding-left: 9.25rem !important;
9488
+ }
9489
+ .py-size-148--mobile-up {
9490
+ padding-top: 9.25rem !important;
9491
+ padding-bottom: 9.25rem !important;
9492
+ }
9493
+ .gap-size-148--mobile-up {
9494
+ gap: 9.25rem !important;
9495
+ }
9496
+ }
9497
+ @media screen and (min-width: 36rem) {
9498
+ .m-size-148--phablet-up {
9499
+ margin: 9.25rem !important;
9500
+ }
9501
+ .mt-size-148--phablet-up {
9502
+ margin-top: 9.25rem !important;
9503
+ }
9504
+ .mr-size-148--phablet-up {
9505
+ margin-right: 9.25rem !important;
9506
+ }
9507
+ .mb-size-148--phablet-up {
9508
+ margin-bottom: 9.25rem !important;
9509
+ }
9510
+ .ml-size-148--phablet-up {
9511
+ margin-left: 9.25rem !important;
9512
+ }
9513
+ .mx-size-148--phablet-up {
9514
+ margin-right: 9.25rem !important;
9515
+ margin-left: 9.25rem !important;
9516
+ }
9517
+ .my-size-148--phablet-up {
9518
+ margin-top: 9.25rem !important;
9519
+ margin-bottom: 9.25rem !important;
9520
+ }
9521
+ .p-size-148--phablet-up {
9522
+ padding: 9.25rem !important;
9523
+ }
9524
+ .pt-size-148--phablet-up {
9525
+ padding-top: 9.25rem !important;
9526
+ }
9527
+ .pr-size-148--phablet-up {
9528
+ padding-right: 9.25rem !important;
9529
+ }
9530
+ .pb-size-148--phablet-up {
9531
+ padding-bottom: 9.25rem !important;
9532
+ }
9533
+ .pl-size-148--phablet-up {
9534
+ padding-left: 9.25rem !important;
9535
+ }
9536
+ .px-size-148--phablet-up {
9537
+ padding-right: 9.25rem !important;
9538
+ padding-left: 9.25rem !important;
9539
+ }
9540
+ .py-size-148--phablet-up {
9541
+ padding-top: 9.25rem !important;
9542
+ padding-bottom: 9.25rem !important;
9543
+ }
9544
+ .gap-size-148--phablet-up {
9545
+ gap: 9.25rem !important;
9546
+ }
9547
+ }
9548
+ @media screen and (min-width: 48rem) {
9549
+ .m-size-148--tablet-up {
9550
+ margin: 9.25rem !important;
9551
+ }
9552
+ .mt-size-148--tablet-up {
9553
+ margin-top: 9.25rem !important;
9554
+ }
9555
+ .mr-size-148--tablet-up {
9556
+ margin-right: 9.25rem !important;
9557
+ }
9558
+ .mb-size-148--tablet-up {
9559
+ margin-bottom: 9.25rem !important;
9560
+ }
9561
+ .ml-size-148--tablet-up {
9562
+ margin-left: 9.25rem !important;
9563
+ }
9564
+ .mx-size-148--tablet-up {
9565
+ margin-right: 9.25rem !important;
9566
+ margin-left: 9.25rem !important;
9567
+ }
9568
+ .my-size-148--tablet-up {
9569
+ margin-top: 9.25rem !important;
9570
+ margin-bottom: 9.25rem !important;
9571
+ }
9572
+ .p-size-148--tablet-up {
9573
+ padding: 9.25rem !important;
9574
+ }
9575
+ .pt-size-148--tablet-up {
9576
+ padding-top: 9.25rem !important;
9577
+ }
9578
+ .pr-size-148--tablet-up {
9579
+ padding-right: 9.25rem !important;
9580
+ }
9581
+ .pb-size-148--tablet-up {
9582
+ padding-bottom: 9.25rem !important;
9583
+ }
9584
+ .pl-size-148--tablet-up {
9585
+ padding-left: 9.25rem !important;
9586
+ }
9587
+ .px-size-148--tablet-up {
9588
+ padding-right: 9.25rem !important;
9589
+ padding-left: 9.25rem !important;
9590
+ }
9591
+ .py-size-148--tablet-up {
9592
+ padding-top: 9.25rem !important;
9593
+ padding-bottom: 9.25rem !important;
9594
+ }
9595
+ .gap-size-148--tablet-up {
9596
+ gap: 9.25rem !important;
9597
+ }
9598
+ }
9599
+ @media screen and (min-width: 64rem) {
9600
+ .m-size-148--tablet-big-up {
9601
+ margin: 9.25rem !important;
9602
+ }
9603
+ .mt-size-148--tablet-big-up {
9604
+ margin-top: 9.25rem !important;
9605
+ }
9606
+ .mr-size-148--tablet-big-up {
9607
+ margin-right: 9.25rem !important;
9608
+ }
9609
+ .mb-size-148--tablet-big-up {
9610
+ margin-bottom: 9.25rem !important;
9611
+ }
9612
+ .ml-size-148--tablet-big-up {
9613
+ margin-left: 9.25rem !important;
9614
+ }
9615
+ .mx-size-148--tablet-big-up {
9616
+ margin-right: 9.25rem !important;
9617
+ margin-left: 9.25rem !important;
9618
+ }
9619
+ .my-size-148--tablet-big-up {
9620
+ margin-top: 9.25rem !important;
9621
+ margin-bottom: 9.25rem !important;
9622
+ }
9623
+ .p-size-148--tablet-big-up {
9624
+ padding: 9.25rem !important;
9625
+ }
9626
+ .pt-size-148--tablet-big-up {
9627
+ padding-top: 9.25rem !important;
9628
+ }
9629
+ .pr-size-148--tablet-big-up {
9630
+ padding-right: 9.25rem !important;
9631
+ }
9632
+ .pb-size-148--tablet-big-up {
9633
+ padding-bottom: 9.25rem !important;
9634
+ }
9635
+ .pl-size-148--tablet-big-up {
9636
+ padding-left: 9.25rem !important;
9637
+ }
9638
+ .px-size-148--tablet-big-up {
9639
+ padding-right: 9.25rem !important;
9640
+ padding-left: 9.25rem !important;
9641
+ }
9642
+ .py-size-148--tablet-big-up {
9643
+ padding-top: 9.25rem !important;
9644
+ padding-bottom: 9.25rem !important;
9645
+ }
9646
+ .gap-size-148--tablet-big-up {
9647
+ gap: 9.25rem !important;
9648
+ }
9649
+ }
9650
+ @media screen and (min-width: 80rem) {
9651
+ .m-size-148--laptop-up {
9652
+ margin: 9.25rem !important;
9653
+ }
9654
+ .mt-size-148--laptop-up {
9655
+ margin-top: 9.25rem !important;
9656
+ }
9657
+ .mr-size-148--laptop-up {
9658
+ margin-right: 9.25rem !important;
9659
+ }
9660
+ .mb-size-148--laptop-up {
9661
+ margin-bottom: 9.25rem !important;
9662
+ }
9663
+ .ml-size-148--laptop-up {
9664
+ margin-left: 9.25rem !important;
9665
+ }
9666
+ .mx-size-148--laptop-up {
9667
+ margin-right: 9.25rem !important;
9668
+ margin-left: 9.25rem !important;
9669
+ }
9670
+ .my-size-148--laptop-up {
9671
+ margin-top: 9.25rem !important;
9672
+ margin-bottom: 9.25rem !important;
9673
+ }
9674
+ .p-size-148--laptop-up {
9675
+ padding: 9.25rem !important;
9676
+ }
9677
+ .pt-size-148--laptop-up {
9678
+ padding-top: 9.25rem !important;
9679
+ }
9680
+ .pr-size-148--laptop-up {
9681
+ padding-right: 9.25rem !important;
9682
+ }
9683
+ .pb-size-148--laptop-up {
9684
+ padding-bottom: 9.25rem !important;
9685
+ }
9686
+ .pl-size-148--laptop-up {
9687
+ padding-left: 9.25rem !important;
9688
+ }
9689
+ .px-size-148--laptop-up {
9690
+ padding-right: 9.25rem !important;
9691
+ padding-left: 9.25rem !important;
9692
+ }
9693
+ .py-size-148--laptop-up {
9694
+ padding-top: 9.25rem !important;
9695
+ padding-bottom: 9.25rem !important;
9696
+ }
9697
+ .gap-size-148--laptop-up {
9698
+ gap: 9.25rem !important;
9699
+ }
9700
+ }
9701
+ @media screen and (min-width: 100rem) {
9702
+ .m-size-148--desktop-up {
9703
+ margin: 9.25rem !important;
9704
+ }
9705
+ .mt-size-148--desktop-up {
9706
+ margin-top: 9.25rem !important;
9707
+ }
9708
+ .mr-size-148--desktop-up {
9709
+ margin-right: 9.25rem !important;
9710
+ }
9711
+ .mb-size-148--desktop-up {
9712
+ margin-bottom: 9.25rem !important;
9713
+ }
9714
+ .ml-size-148--desktop-up {
9715
+ margin-left: 9.25rem !important;
9716
+ }
9717
+ .mx-size-148--desktop-up {
9718
+ margin-right: 9.25rem !important;
9719
+ margin-left: 9.25rem !important;
9720
+ }
9721
+ .my-size-148--desktop-up {
9722
+ margin-top: 9.25rem !important;
9723
+ margin-bottom: 9.25rem !important;
9724
+ }
9725
+ .p-size-148--desktop-up {
9726
+ padding: 9.25rem !important;
9727
+ }
9728
+ .pt-size-148--desktop-up {
9729
+ padding-top: 9.25rem !important;
9730
+ }
9731
+ .pr-size-148--desktop-up {
9732
+ padding-right: 9.25rem !important;
9733
+ }
9734
+ .pb-size-148--desktop-up {
9735
+ padding-bottom: 9.25rem !important;
9736
+ }
9737
+ .pl-size-148--desktop-up {
9738
+ padding-left: 9.25rem !important;
9739
+ }
9740
+ .px-size-148--desktop-up {
9741
+ padding-right: 9.25rem !important;
9742
+ padding-left: 9.25rem !important;
9743
+ }
9744
+ .py-size-148--desktop-up {
9745
+ padding-top: 9.25rem !important;
9746
+ padding-bottom: 9.25rem !important;
9747
+ }
9748
+ .gap-size-148--desktop-up {
9749
+ gap: 9.25rem !important;
9750
+ }
9751
+ }
9382
9752
  @media screen and (min-width: 0) {
9383
9753
  .m-size-5--mobile-up {
9384
9754
  margin: 0.3125rem !important;
@@ -12436,6 +12806,15 @@ body {
12436
12806
  .pkt-grid--rowgap-size-128 {
12437
12807
  row-gap: 8rem;
12438
12808
  }
12809
+ .pkt-grid--gap-size-148 {
12810
+ gap: 9.25rem;
12811
+ }
12812
+ .pkt-grid--colgap-size-148 {
12813
+ column-gap: 9.25rem;
12814
+ }
12815
+ .pkt-grid--rowgap-size-148 {
12816
+ row-gap: 9.25rem;
12817
+ }
12439
12818
  .pkt-grid--gap-size-5 {
12440
12819
  gap: 0.3125rem;
12441
12820
  }
@@ -12689,6 +13068,15 @@ body {
12689
13068
  .pkt-grid--rowgap-size-128-mobile-up {
12690
13069
  row-gap: 8rem;
12691
13070
  }
13071
+ .pkt-grid--gap-size-148-mobile-up {
13072
+ gap: 9.25rem;
13073
+ }
13074
+ .pkt-grid--colgap-size-148-mobile-up {
13075
+ column-gap: 9.25rem;
13076
+ }
13077
+ .pkt-grid--rowgap-size-148-mobile-up {
13078
+ row-gap: 9.25rem;
13079
+ }
12692
13080
  .pkt-grid--gap-size-5-mobile-up {
12693
13081
  gap: 0.3125rem;
12694
13082
  }
@@ -12943,6 +13331,15 @@ body {
12943
13331
  .pkt-grid--rowgap-size-128-phablet-up {
12944
13332
  row-gap: 8rem;
12945
13333
  }
13334
+ .pkt-grid--gap-size-148-phablet-up {
13335
+ gap: 9.25rem;
13336
+ }
13337
+ .pkt-grid--colgap-size-148-phablet-up {
13338
+ column-gap: 9.25rem;
13339
+ }
13340
+ .pkt-grid--rowgap-size-148-phablet-up {
13341
+ row-gap: 9.25rem;
13342
+ }
12946
13343
  .pkt-grid--gap-size-5-phablet-up {
12947
13344
  gap: 0.3125rem;
12948
13345
  }
@@ -13197,6 +13594,15 @@ body {
13197
13594
  .pkt-grid--rowgap-size-128-tablet-up {
13198
13595
  row-gap: 8rem;
13199
13596
  }
13597
+ .pkt-grid--gap-size-148-tablet-up {
13598
+ gap: 9.25rem;
13599
+ }
13600
+ .pkt-grid--colgap-size-148-tablet-up {
13601
+ column-gap: 9.25rem;
13602
+ }
13603
+ .pkt-grid--rowgap-size-148-tablet-up {
13604
+ row-gap: 9.25rem;
13605
+ }
13200
13606
  .pkt-grid--gap-size-5-tablet-up {
13201
13607
  gap: 0.3125rem;
13202
13608
  }
@@ -13451,6 +13857,15 @@ body {
13451
13857
  .pkt-grid--rowgap-size-128-tablet-big-up {
13452
13858
  row-gap: 8rem;
13453
13859
  }
13860
+ .pkt-grid--gap-size-148-tablet-big-up {
13861
+ gap: 9.25rem;
13862
+ }
13863
+ .pkt-grid--colgap-size-148-tablet-big-up {
13864
+ column-gap: 9.25rem;
13865
+ }
13866
+ .pkt-grid--rowgap-size-148-tablet-big-up {
13867
+ row-gap: 9.25rem;
13868
+ }
13454
13869
  .pkt-grid--gap-size-5-tablet-big-up {
13455
13870
  gap: 0.3125rem;
13456
13871
  }
@@ -13705,6 +14120,15 @@ body {
13705
14120
  .pkt-grid--rowgap-size-128-laptop-up {
13706
14121
  row-gap: 8rem;
13707
14122
  }
14123
+ .pkt-grid--gap-size-148-laptop-up {
14124
+ gap: 9.25rem;
14125
+ }
14126
+ .pkt-grid--colgap-size-148-laptop-up {
14127
+ column-gap: 9.25rem;
14128
+ }
14129
+ .pkt-grid--rowgap-size-148-laptop-up {
14130
+ row-gap: 9.25rem;
14131
+ }
13708
14132
  .pkt-grid--gap-size-5-laptop-up {
13709
14133
  gap: 0.3125rem;
13710
14134
  }
@@ -13959,6 +14383,15 @@ body {
13959
14383
  .pkt-grid--rowgap-size-128-desktop-up {
13960
14384
  row-gap: 8rem;
13961
14385
  }
14386
+ .pkt-grid--gap-size-148-desktop-up {
14387
+ gap: 9.25rem;
14388
+ }
14389
+ .pkt-grid--colgap-size-148-desktop-up {
14390
+ column-gap: 9.25rem;
14391
+ }
14392
+ .pkt-grid--rowgap-size-148-desktop-up {
14393
+ row-gap: 9.25rem;
14394
+ }
13962
14395
  .pkt-grid--gap-size-5-desktop-up {
13963
14396
  gap: 0.3125rem;
13964
14397
  }
@@ -14410,7 +14843,7 @@ a:active, a.pkt-link--active,
14410
14843
  .pkt-link--external::after {
14411
14844
  display: inline-block;
14412
14845
  content: " ";
14413
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/new-window-small.svg);
14846
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
14414
14847
  background-image: var(--svg);
14415
14848
  background-repeat: no-repeat;
14416
14849
  background-size: 18px 18px;
@@ -17744,7 +18177,7 @@ button.pkt-link {
17744
18177
 
17745
18178
  /* Button element!
17746
18179
  *
17747
- * Size: small, medium, large
18180
+ * Size: xsmall, small, medium, large
17748
18181
  * Skin: primary, secondary, tertiary
17749
18182
  * State: normal, focus, hover, active, disabled
17750
18183
  * Variant: label-only, icon-left, icon-right, icon-only
@@ -18103,15 +18536,31 @@ pkt-button[isLoading] {
18103
18536
  .pkt-btn--icon-only {
18104
18537
  padding: 0 0.625rem;
18105
18538
  }
18106
- .pkt-btn--small {
18107
- height: 2.625rem;
18108
- padding: 0 0.5rem;
18539
+ .pkt-btn--xsmall {
18540
+ height: 2.25rem;
18541
+ padding: 0 0.75rem;
18109
18542
  line-height: 1.1;
18110
18543
  letter-spacing: -0.2px;
18111
18544
  font-weight: 500;
18112
18545
  font-size: 0.875rem;
18113
18546
  line-height: 1.375rem;
18114
18547
  }
18548
+ .pkt-btn--xsmall .pkt-btn__icon, .pkt-btn--xsmall .pkt-btn__icon .pkt-icon {
18549
+ height: 1.125rem;
18550
+ width: 1.125rem;
18551
+ }
18552
+ .pkt-btn--xsmall.pkt-btn--icon-only {
18553
+ padding: 0 0.4375rem;
18554
+ }
18555
+ .pkt-btn--small {
18556
+ height: 2.625rem;
18557
+ padding: 0 1rem;
18558
+ line-height: 1.1;
18559
+ letter-spacing: -0.2px;
18560
+ font-weight: 500;
18561
+ font-size: 1rem;
18562
+ line-height: 1.5rem;
18563
+ }
18115
18564
  .pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
18116
18565
  height: 1.25rem;
18117
18566
  width: 1.25rem;
@@ -18457,7 +18906,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18457
18906
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
18458
18907
  }
18459
18908
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
18460
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/minus-sign.svg);
18909
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/minus-sign.svg);
18461
18910
  position: relative;
18462
18911
  background-color: var(--pkt-color-input-border-normal);
18463
18912
  }
@@ -18483,7 +18932,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18483
18932
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
18484
18933
  }
18485
18934
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
18486
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);
18935
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);
18487
18936
  position: relative;
18488
18937
  background-color: var(--pkt-color-input-border-normal);
18489
18938
  }
@@ -18541,7 +18990,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18541
18990
  cursor: not-allowed;
18542
18991
  }
18543
18992
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
18544
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);
18993
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);
18545
18994
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
18546
18995
  filter: grayscale(100%) brightness(400%);
18547
18996
  }
@@ -18710,14 +19159,50 @@ pkt-select {
18710
19159
  color: var(--pkt-color-input-text-normal);
18711
19160
  margin: 0;
18712
19161
  padding: 0.5rem 1rem;
19162
+ min-height: 3rem;
18713
19163
  letter-spacing: -0.2px;
18714
19164
  font-weight: 300;
18715
19165
  font-size: 1.125rem;
18716
19166
  line-height: 1.75rem;
18717
19167
  }
18718
- .pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact), .pkt-select select:not(.pkt-input-compact),
18719
- .pkt-select:not(.pkt-input-compact):is(select) {
18720
- min-height: 3rem;
19168
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
19169
+ min-height: 2.625rem;
19170
+ padding: 0.375rem 1rem;
19171
+ letter-spacing: -0.2px;
19172
+ font-weight: 300;
19173
+ font-size: 1rem;
19174
+ line-height: 1.5rem;
19175
+ }
19176
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
19177
+ height: 2.625rem;
19178
+ }
19179
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
19180
+ min-height: 2.25rem;
19181
+ padding: 0.25rem 0.75rem;
19182
+ letter-spacing: -0.2px;
19183
+ font-weight: 300;
19184
+ font-size: 0.875rem;
19185
+ line-height: 1.375rem;
19186
+ }
19187
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
19188
+ height: 2.25rem;
19189
+ }
19190
+ .pkt-input input.pkt-input, .pkt-textinput__input input.pkt-input, .pkt-select select input.pkt-input,
19191
+ .pkt-select:is(select) input.pkt-input, .pkt-input input.pkt-textinput__input, .pkt-textinput__input input.pkt-textinput__input, .pkt-select select input.pkt-textinput__input,
19192
+ .pkt-select:is(select) input.pkt-textinput__input,
19193
+ .pkt-input select.pkt-input,
19194
+ .pkt-textinput__input select.pkt-input,
19195
+ .pkt-input select.pkt-textinput__input,
19196
+ .pkt-textinput__input select.pkt-textinput__input,
19197
+ .pkt-input .pkt-select select,
19198
+ .pkt-select .pkt-input select,
19199
+ .pkt-textinput__input .pkt-select select,
19200
+ .pkt-select .pkt-textinput__input select,
19201
+ .pkt-select select select,
19202
+ .pkt-select:is(select) select,
19203
+ .pkt-input select.pkt-select:is(select),
19204
+ .pkt-textinput__input select.pkt-select:is(select) {
19205
+ display: block;
18721
19206
  }
18722
19207
  .pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input, .pkt-select select.pkt-input-compact,
18723
19208
  .pkt-input-compact.pkt-select:is(select) {
@@ -18734,8 +19219,8 @@ pkt-select {
18734
19219
  background-position: right 0 top 50%;
18735
19220
  padding-right: 2rem;
18736
19221
  }
18737
- .pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
18738
- .pkt-select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
19222
+ .pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-select select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
19223
+ .pkt-select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
18739
19224
  width: min(31rem, 100%);
18740
19225
  }
18741
19226
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
@@ -18747,9 +19232,9 @@ pkt-select {
18747
19232
  [fullwidth] .pkt-input__counter {
18748
19233
  width: 100%;
18749
19234
  }
18750
- .pkt-input:is(textarea), .pkt-textinput__input:is(textarea), .pkt-select select:is(textarea),
18751
- .pkt-select:is(textarea):is(select) {
18752
- min-height: 8rem;
19235
+ .pkt-input:is(textarea:not([rows])), .pkt-textinput__input:is(textarea:not([rows])), .pkt-select select:is(textarea:not([rows])),
19236
+ .pkt-select:is(textarea:not([rows])):is(select) {
19237
+ min-height: 9.25rem;
18753
19238
  }
18754
19239
  .pkt-input:is(select), .pkt-textinput__input:is(select), .pkt-select select:is(select),
18755
19240
  .pkt-select:is(select) {
@@ -18760,12 +19245,24 @@ pkt-select {
18760
19245
  }
18761
19246
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
18762
19247
  .pkt-select:is(select):not([multiple]) {
18763
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);
19248
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
18764
19249
  background-image: var(--svg);
18765
19250
  background-repeat: no-repeat;
18766
19251
  background-position: right 0.7rem top 50%;
18767
19252
  background-size: 1.5rem auto, 100%;
18768
19253
  }
19254
+ .pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-textinput__input:is(select):not([multiple]).pkt-input--small, .pkt-select select:is(select):not([multiple]).pkt-input--small,
19255
+ .pkt-select:is(select):not([multiple]).pkt-input--small {
19256
+ background-size: 1.25rem auto, 100%;
19257
+ background-position: right 0.5rem top 50%;
19258
+ padding: 0.375rem 2.5rem 0.375rem 1rem;
19259
+ }
19260
+ .pkt-input:is(select):not([multiple]).pkt-input--xsmall, .pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall, .pkt-select select:is(select):not([multiple]).pkt-input--xsmall,
19261
+ .pkt-select:is(select):not([multiple]).pkt-input--xsmall {
19262
+ background-size: 1.125rem auto, 100%;
19263
+ background-position: right 0.5rem top 50%;
19264
+ padding: 0.25rem 2.25rem 0.25rem 0.75rem;
19265
+ }
18769
19266
  .pkt-input:is(select) option, .pkt-textinput__input:is(select) option, .pkt-select select:is(select) option,
18770
19267
  .pkt-select:is(select) option {
18771
19268
  background-color: var(--pkt-color-input-background-normal);
@@ -18868,6 +19365,95 @@ pkt-select {
18868
19365
  .pkt-input-separator {
18869
19366
  padding: 0.5rem 0;
18870
19367
  }
19368
+ .pkt-input__container--small {
19369
+ align-items: stretch;
19370
+ }
19371
+ .pkt-input__container--small .pkt-input-prefix,
19372
+ .pkt-input__container--small .pkt-input-suffix,
19373
+ .pkt-input__container--small .pkt-input-icon {
19374
+ height: auto;
19375
+ min-height: 2.625rem;
19376
+ letter-spacing: -0.2px;
19377
+ font-weight: 300;
19378
+ font-size: 1rem;
19379
+ line-height: 1.5rem;
19380
+ }
19381
+ .pkt-input__container--small .pkt-input-prefix {
19382
+ padding: 0.375rem 0 0.375rem 1rem;
19383
+ }
19384
+ .pkt-input__container--small .pkt-input-suffix {
19385
+ padding: 0.375rem 1rem 0.375rem 0;
19386
+ }
19387
+ .pkt-input__container--small input.pkt-input, .pkt-input__container--small input.pkt-textinput__input,
19388
+ .pkt-input__container--small select.pkt-input,
19389
+ .pkt-input__container--small select.pkt-textinput__input,
19390
+ .pkt-input__container--small .pkt-select select,
19391
+ .pkt-select .pkt-input__container--small select,
19392
+ .pkt-input__container--small select.pkt-select:is(select) {
19393
+ height: auto;
19394
+ min-height: 2.625rem;
19395
+ flex: 1 1 auto;
19396
+ min-width: 0;
19397
+ padding: 0.375rem 1rem;
19398
+ letter-spacing: -0.2px;
19399
+ font-weight: 300;
19400
+ font-size: 1rem;
19401
+ line-height: 1.5rem;
19402
+ }
19403
+ .pkt-input__container--small .pkt-input-icon svg,
19404
+ .pkt-input__container--small .pkt-input-suffix svg {
19405
+ width: 1.25rem;
19406
+ height: 1.25rem;
19407
+ }
19408
+ .pkt-input__container--small .pkt-input-suffix::before {
19409
+ height: 1.25rem;
19410
+ }
19411
+ .pkt-input__container--xsmall {
19412
+ align-items: stretch;
19413
+ }
19414
+ .pkt-input__container--xsmall .pkt-input-prefix,
19415
+ .pkt-input__container--xsmall .pkt-input-suffix,
19416
+ .pkt-input__container--xsmall .pkt-input-icon {
19417
+ height: auto;
19418
+ min-height: 2.25rem;
19419
+ letter-spacing: -0.2px;
19420
+ font-weight: 300;
19421
+ font-size: 0.875rem;
19422
+ line-height: 1.375rem;
19423
+ }
19424
+ .pkt-input__container--xsmall .pkt-input-prefix {
19425
+ padding: 0.25rem 0 0.25rem 0.75rem;
19426
+ }
19427
+ .pkt-input__container--xsmall .pkt-input-suffix {
19428
+ padding: 0.25rem 0.75rem 0.25rem 0;
19429
+ }
19430
+ .pkt-input__container--xsmall input.pkt-input, .pkt-input__container--xsmall input.pkt-textinput__input,
19431
+ .pkt-input__container--xsmall select.pkt-input,
19432
+ .pkt-input__container--xsmall select.pkt-textinput__input,
19433
+ .pkt-input__container--xsmall .pkt-select select,
19434
+ .pkt-select .pkt-input__container--xsmall select,
19435
+ .pkt-input__container--xsmall select.pkt-select:is(select) {
19436
+ height: auto;
19437
+ min-height: 2.25rem;
19438
+ flex: 1 1 auto;
19439
+ min-width: 0;
19440
+ padding: 0.25rem 0.75rem;
19441
+ letter-spacing: -0.2px;
19442
+ font-weight: 300;
19443
+ font-size: 0.875rem;
19444
+ line-height: 1.375rem;
19445
+ }
19446
+ .pkt-input__container--xsmall .pkt-input-icon {
19447
+ padding: 0.25rem 0.5rem;
19448
+ }
19449
+ .pkt-input__container--xsmall .pkt-input-icon svg,
19450
+ .pkt-input__container--xsmall .pkt-input-suffix svg {
19451
+ width: 1.125rem;
19452
+ height: 1.125rem;
19453
+ }
19454
+ .pkt-input__container--xsmall .pkt-input-suffix::before {
19455
+ height: 1.125rem;
19456
+ }
18871
19457
  .pkt-input--counter-error, .pkt-input--counter-error:focus {
18872
19458
  border-color: var(--pkt-color-input-border-error);
18873
19459
  background-color: var(--pkt-color-surface-default-faded-red);
@@ -19564,8 +20150,8 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
19564
20150
  }
19565
20151
 
19566
20152
  .pkt-accordion-item {
19567
- color: var(--pkt-color-brand-dark-blue-1000);
19568
- background-color: var(--pkt-color-brand-neutrals-white);
20153
+ color: var(--pkt-color-text-body-default);
20154
+ background-color: var(--pkt-color-background-default);
19569
20155
  transition: transform 0.3s;
19570
20156
  appearance: none;
19571
20157
  text-align: left;
@@ -19651,34 +20237,48 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
19651
20237
  }
19652
20238
 
19653
20239
  .pkt-accordion--plus-minus,
19654
- pkt-accordion[skin=plus-minus] {
20240
+ pkt-accordion[skin=plus-minus]::part(container) {
19655
20241
  row-gap: 0;
19656
20242
  }
19657
20243
 
20244
+ .pkt-accordion--plus-minus .pkt-accordion-item,
20245
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item,
19658
20246
  .pkt-accordion-item--plus-minus,
19659
20247
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item {
19660
20248
  background-color: transparent;
19661
20249
  border: none;
19662
20250
  padding: 0;
19663
20251
  }
20252
+ .pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title,
20253
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title,
19664
20254
  .pkt-accordion-item--plus-minus > .pkt-accordion-item__title,
19665
20255
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title {
19666
20256
  padding: 0.5rem 1rem;
19667
20257
  justify-content: flex-start;
19668
20258
  }
20259
+ .pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover,
20260
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover,
19669
20261
  .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover,
19670
20262
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover {
19671
20263
  text-decoration: underline;
19672
20264
  }
20265
+ .pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
20266
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
19673
20267
  .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
19674
20268
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon {
19675
- transform: none;
20269
+ transform: none !important;
19676
20270
  }
20271
+ .pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__content,
20272
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__content,
19677
20273
  .pkt-accordion-item--plus-minus > .pkt-accordion-item__content,
19678
20274
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__content {
19679
20275
  padding: 1rem;
19680
- background-color: var(--pkt-color-brand-neutrals-200);
20276
+ background-color: var(--pkt-color-background-subtle);
19681
20277
  }
20278
+ .pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--plus,
20279
+ .pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
20280
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--plus,
20281
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
19682
20282
  .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--plus,
19683
20283
  .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
19684
20284
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--plus,
@@ -19686,19 +20286,27 @@ pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__i
19686
20286
  transition: none;
19687
20287
  transform: none;
19688
20288
  }
20289
+ .pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
20290
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
19689
20291
  .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
19690
20292
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--minus {
19691
20293
  display: none;
19692
20294
  }
20295
+ .pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
20296
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
19693
20297
  .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
19694
20298
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus {
19695
20299
  display: none;
19696
20300
  }
20301
+ .pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
20302
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
19697
20303
  .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
19698
20304
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus {
19699
20305
  display: inline-flex;
19700
20306
  transform: none;
19701
20307
  }
20308
+ .pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
20309
+ pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
19702
20310
  .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
19703
20311
  pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus {
19704
20312
  transform: none;
@@ -19777,12 +20385,6 @@ pkt-alert {
19777
20385
  grid-row: 1/2;
19778
20386
  grid-column: 2/3;
19779
20387
  }
19780
- @media (max-width: 768px) {
19781
- .pkt-alert__noTitle .pkt-alert__text {
19782
- grid-row: 2/3;
19783
- grid-column: 1/-1;
19784
- }
19785
- }
19786
20388
 
19787
20389
  .pkt-alert {
19788
20390
  border-left: 0.25rem solid var(--pkt-color-alert-bc);
@@ -19840,22 +20442,30 @@ pkt-alert {
19840
20442
  --fg-color: var(--pkt-color-alert-close-fg);
19841
20443
  }
19842
20444
 
20445
+ .pkt-alert--small,
19843
20446
  .pkt-alert--compact {
19844
- padding: 0.75rem 1rem;
20447
+ display: flex;
20448
+ min-height: 3rem;
20449
+ padding: 0.5rem 0.75rem;
19845
20450
  }
20451
+ .pkt-alert--small .pkt-alert__grid,
19846
20452
  .pkt-alert--compact .pkt-alert__grid {
19847
20453
  gap: 0.5rem;
20454
+ width: 100%;
19848
20455
  }
20456
+ .pkt-alert--small .pkt-alert__icon,
19849
20457
  .pkt-alert--compact .pkt-alert__icon {
19850
- width: 1.375rem;
19851
- height: 1.375rem;
20458
+ width: 1.5rem;
20459
+ height: 1.5rem;
19852
20460
  }
20461
+ .pkt-alert--small .pkt-alert__title,
19853
20462
  .pkt-alert--compact .pkt-alert__title {
19854
20463
  letter-spacing: -0.2px;
19855
20464
  font-weight: 500;
19856
20465
  font-size: 1rem;
19857
20466
  line-height: 1.5rem;
19858
20467
  }
20468
+ .pkt-alert--small .pkt-alert__text,
19859
20469
  .pkt-alert--compact .pkt-alert__text {
19860
20470
  letter-spacing: -0.2px;
19861
20471
  font-weight: 300;
@@ -19863,10 +20473,36 @@ pkt-alert {
19863
20473
  line-height: 1.5rem;
19864
20474
  }
19865
20475
 
19866
- /*
19867
- * Back link component
19868
- */
19869
- .pkt-back-link .pkt-link {
20476
+ .pkt-alert--xsmall {
20477
+ display: flex;
20478
+ min-height: 2.5rem;
20479
+ padding: 0.375rem 0.75rem;
20480
+ }
20481
+ .pkt-alert--xsmall .pkt-alert__grid {
20482
+ gap: 0.375rem;
20483
+ width: 100%;
20484
+ }
20485
+ .pkt-alert--xsmall .pkt-alert__icon {
20486
+ width: 1.25rem;
20487
+ height: 1.25rem;
20488
+ }
20489
+ .pkt-alert--xsmall .pkt-alert__title {
20490
+ letter-spacing: -0.2px;
20491
+ font-weight: 500;
20492
+ font-size: 0.875rem;
20493
+ line-height: 1.375rem;
20494
+ }
20495
+ .pkt-alert--xsmall .pkt-alert__text {
20496
+ letter-spacing: -0.2px;
20497
+ font-weight: 300;
20498
+ font-size: 0.875rem;
20499
+ line-height: 1.375rem;
20500
+ }
20501
+
20502
+ /*
20503
+ * Back link component
20504
+ */
20505
+ .pkt-back-link .pkt-link {
19870
20506
  display: inline-flex;
19871
20507
  align-items: center;
19872
20508
  }
@@ -20165,6 +20801,10 @@ pkt-calendar .pkt-cal-days {
20165
20801
  pkt-calendar .pkt-cal-days td {
20166
20802
  padding: 0;
20167
20803
  }
20804
+ .pkt-calendar .pkt-cal-days .pkt-btn,
20805
+ pkt-calendar .pkt-cal-days .pkt-btn {
20806
+ padding: 0;
20807
+ }
20168
20808
  .pkt-calendar .pkt-cal-days button,
20169
20809
  .pkt-calendar .pkt-cal-days div,
20170
20810
  pkt-calendar .pkt-cal-days button,
@@ -20551,6 +21191,33 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
20551
21191
  .pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
20552
21192
  width: 100%;
20553
21193
  }
21194
+ .pkt-combobox__wrapper .pkt-combobox__input--small {
21195
+ min-height: 2.625rem;
21196
+ padding: 0.375rem 2.5rem 0.375rem 0.375rem;
21197
+ letter-spacing: -0.2px;
21198
+ font-weight: 300;
21199
+ font-size: 1rem;
21200
+ line-height: 1.5rem;
21201
+ }
21202
+ .pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg {
21203
+ width: 1.25rem;
21204
+ height: 1.25rem;
21205
+ }
21206
+ .pkt-combobox__wrapper .pkt-combobox__input--xsmall {
21207
+ min-height: 2.25rem;
21208
+ padding: 0.25rem 2.25rem 0.25rem 0.25rem;
21209
+ letter-spacing: -0.2px;
21210
+ font-weight: 300;
21211
+ font-size: 0.875rem;
21212
+ line-height: 1.375rem;
21213
+ }
21214
+ .pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon {
21215
+ padding: 0.25rem 0.5rem;
21216
+ }
21217
+ .pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg {
21218
+ width: 1.125rem;
21219
+ height: 1.125rem;
21220
+ }
20554
21221
  .pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) {
20555
21222
  border-color: var(--pkt-color-input-border-hover);
20556
21223
  }
@@ -20660,6 +21327,61 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
20660
21327
  outline: 4px solid var(--pkt-color-border-states-focus);
20661
21328
  }
20662
21329
 
21330
+ .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),
21331
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
21332
+ padding: 0.5rem 1rem;
21333
+ letter-spacing: -0.2px;
21334
+ font-weight: 300;
21335
+ font-size: 1rem;
21336
+ line-height: 1.5rem;
21337
+ }
21338
+ .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
21339
+ .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,
21340
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
21341
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
21342
+ padding: 0.5rem 1rem;
21343
+ letter-spacing: -0.2px;
21344
+ font-weight: 300;
21345
+ font-size: 1rem;
21346
+ line-height: 1.5rem;
21347
+ }
21348
+ .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,
21349
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
21350
+ padding: 0.5rem 0.75rem;
21351
+ letter-spacing: -0.2px;
21352
+ font-weight: 300;
21353
+ font-size: 1rem;
21354
+ line-height: 1.5rem;
21355
+ }
21356
+
21357
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
21358
+ padding: 0.375rem 0.75rem;
21359
+ letter-spacing: -0.2px;
21360
+ font-weight: 300;
21361
+ font-size: 0.875rem;
21362
+ line-height: 1.375rem;
21363
+ }
21364
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
21365
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
21366
+ padding: 0.375rem 0.75rem;
21367
+ letter-spacing: -0.2px;
21368
+ font-weight: 300;
21369
+ font-size: 0.875rem;
21370
+ line-height: 1.375rem;
21371
+ }
21372
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
21373
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
21374
+ width: 1.125rem;
21375
+ height: 1.125rem;
21376
+ }
21377
+ .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
21378
+ padding: 0.375rem 0.5rem;
21379
+ letter-spacing: -0.2px;
21380
+ font-weight: 300;
21381
+ font-size: 0.875rem;
21382
+ line-height: 1.375rem;
21383
+ }
21384
+
20663
21385
  .pkt-datepicker,
20664
21386
  pkt-datepicker {
20665
21387
  display: block;
@@ -20771,24 +21493,103 @@ pkt-datepicker-multiple {
20771
21493
  -webkit-appearance: none;
20772
21494
  }
20773
21495
 
20774
- @-moz-document url-prefix() {
21496
+ .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple {
21497
+ flex: 1;
21498
+ min-width: 0;
21499
+ }
21500
+
21501
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,
21502
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
21503
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,
21504
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,
21505
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
21506
+ min-height: 2.375rem;
21507
+ }
21508
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,
21509
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
21510
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
21511
+ letter-spacing: -0.2px;
21512
+ font-weight: 300;
21513
+ font-size: 1rem;
21514
+ line-height: 1.5rem;
21515
+ }
21516
+ .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon {
21517
+ padding-left: 0.5rem;
21518
+ padding-right: 0.5rem;
21519
+ }
21520
+ .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
21521
+ .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
21522
+ .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg {
21523
+ width: 1.25rem;
21524
+ height: 1.25rem;
21525
+ }
21526
+ @supports not (-moz-appearance: none) {
21527
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
21528
+ width: 7.3rem;
21529
+ }
21530
+ .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
21531
+ max-width: calc(100% - 2.5rem);
21532
+ }
21533
+ }
21534
+
21535
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,
21536
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
21537
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,
21538
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,
21539
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
21540
+ min-height: 2rem;
21541
+ }
21542
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,
21543
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
21544
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
21545
+ letter-spacing: -0.2px;
21546
+ font-weight: 300;
21547
+ font-size: 0.875rem;
21548
+ line-height: 1.375rem;
21549
+ line-height: 1rem;
21550
+ }
21551
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon {
21552
+ padding-left: 0.5rem;
21553
+ padding-right: 0.5rem;
21554
+ }
21555
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
21556
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
21557
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg {
21558
+ width: 1.125rem;
21559
+ height: 1.125rem;
21560
+ }
21561
+ @supports not (-moz-appearance: none) {
21562
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
21563
+ width: 6.5rem;
21564
+ }
21565
+ .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
21566
+ max-width: calc(100% - 2rem);
21567
+ }
21568
+ }
21569
+
21570
+ @supports (-moz-appearance: none) {
20775
21571
  .pkt-datepicker__inputs .pkt-datepicker__input {
20776
21572
  padding-right: 0.5rem;
20777
21573
  }
20778
21574
  .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
20779
- width: 10.5rem;
21575
+ width: auto;
20780
21576
  max-width: 100%;
20781
21577
  }
20782
21578
  .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
20783
21579
  width: auto;
20784
21580
  flex: 1;
20785
21581
  }
20786
- .pkt-datepicker__inputs button.pkt-input-icon {
21582
+ .pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon {
20787
21583
  display: none;
20788
21584
  }
20789
21585
  .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
20790
21586
  border-right-width: 2px !important;
20791
21587
  }
21588
+ @media screen and (max-width: 30rem) {
21589
+ .pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range {
21590
+ justify-self: start;
21591
+ }
21592
+ }
20792
21593
  }
20793
21594
  pkt-fileupload,
20794
21595
  .pkt-fileupload {
@@ -21730,168 +22531,291 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
21730
22531
  }
21731
22532
 
21732
22533
  /*
21733
- * Footer element
22534
+ * Footer: pkt-footer (sekundær + global) og pkt-footer-simple (kompakt + global)
22535
+ *
22536
+ * --pkt-footer-bg bakgrunn (default: grå sekundær)
22537
+ * --pkt-footer-fg tekstfarge
22538
+ * --pkt-footer-link-hover hover-farge på lenker (default: text-action-active)
21734
22539
  */
21735
- .pkt-footer {
21736
- padding: 2.5rem 1.5rem;
21737
- background-color: var(--pkt-color-surface-strong-dark-blue);
21738
- color: var(--pkt-color-text-body-default);
21739
- display: flex;
21740
- align-items: center;
22540
+ .pkt-footer,
22541
+ .pkt-footer-simple {
22542
+ display: block;
22543
+ width: 100%;
22544
+ container-type: inline-size;
22545
+ container-name: pkt-footer;
22546
+ }
22547
+
22548
+ .pkt-footer__band {
22549
+ background-color: var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));
22550
+ color: var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));
21741
22551
  letter-spacing: -0.2px;
21742
22552
  font-weight: 300;
21743
- font-size: 1.125rem;
21744
- line-height: 1.75rem;
22553
+ font-size: 1rem;
22554
+ line-height: 1.5rem;
21745
22555
  }
21746
- @media screen and (min-width: 80rem) {
21747
- .pkt-footer {
21748
- padding: 3.5rem 1.5rem;
21749
- justify-content: center;
22556
+ @supports not (container-type: inline-size) {
22557
+ @media screen and (min-width: 64rem) {
22558
+ .pkt-footer__band {
22559
+ letter-spacing: -0.2px;
22560
+ font-weight: 300;
22561
+ font-size: 1.125rem;
22562
+ line-height: 1.75rem;
22563
+ }
21750
22564
  }
21751
22565
  }
21752
- .pkt-footer__container {
21753
- max-width: 80rem;
22566
+ @supports (container-type: inline-size) {
22567
+ @container pkt-footer (min-width: 64rem) {
22568
+ .pkt-footer__band {
22569
+ letter-spacing: -0.2px;
22570
+ font-weight: 300;
22571
+ font-size: 1.125rem;
22572
+ line-height: 1.75rem;
22573
+ }
22574
+ }
21754
22575
  }
21755
- .pkt-footer__title {
21756
- margin-bottom: 2rem;
21757
- margin-top: 0;
21758
- color: var(--pkt-color-text-body-default);
21759
- letter-spacing: -0.2px;
21760
- font-weight: 500;
21761
- font-size: 1.5rem;
21762
- line-height: 2.25rem;
22576
+ .pkt-footer__band--global {
22577
+ --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
22578
+ --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
22579
+ --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
21763
22580
  }
21764
- .pkt-footer__text:last-child {
21765
- margin-bottom: 0;
21766
- margin-top: 2rem;
22581
+ .pkt-footer__band a {
22582
+ color: inherit;
22583
+ text-decoration: underline;
22584
+ text-underline-position: from-font;
21767
22585
  }
21768
- .pkt-footer__text:not(:last-child) {
21769
- margin-bottom: 2rem;
21770
- margin-top: 0;
22586
+ .pkt-footer__band a:hover {
22587
+ color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
21771
22588
  }
21772
- .pkt-footer__list {
21773
- padding: 0;
21774
- margin: 0;
21775
- list-style: none;
22589
+ .pkt-footer__band h2 {
22590
+ margin: 0 0 1rem;
22591
+ color: inherit;
22592
+ letter-spacing: -0.2px;
22593
+ font-weight: 500;
22594
+ font-size: 1.25rem;
22595
+ line-height: 2rem;
21776
22596
  }
21777
- .pkt-footer__list-item {
21778
- word-break: break-word;
22597
+ @supports not (container-type: inline-size) {
22598
+ @media screen and (min-width: 48rem) {
22599
+ .pkt-footer__band h2 {
22600
+ letter-spacing: -0.2px;
22601
+ font-weight: 500;
22602
+ font-size: 1.375rem;
22603
+ line-height: 2.125rem;
22604
+ }
22605
+ }
21779
22606
  }
21780
- .pkt-footer__list-item:not(:last-child) {
21781
- margin-bottom: 1rem;
22607
+ @supports (container-type: inline-size) {
22608
+ @container pkt-footer (min-width: 48rem) {
22609
+ .pkt-footer__band h2 {
22610
+ letter-spacing: -0.2px;
22611
+ font-weight: 500;
22612
+ font-size: 1.375rem;
22613
+ line-height: 2.125rem;
22614
+ }
22615
+ }
21782
22616
  }
21783
- @media screen and (min-width: 80rem) {
21784
- .pkt-footer__list-item {
21785
- margin-bottom: 0;
22617
+ @supports not (container-type: inline-size) {
22618
+ @media screen and (min-width: 64rem) {
22619
+ .pkt-footer__band h2 {
22620
+ letter-spacing: -0.2px;
22621
+ font-weight: 500;
22622
+ font-size: 1.5rem;
22623
+ line-height: 2.25rem;
22624
+ }
21786
22625
  }
21787
22626
  }
21788
- .pkt-footer__link {
21789
- display: flex;
21790
- text-decoration: none !important;
22627
+ @supports (container-type: inline-size) {
22628
+ @container pkt-footer (min-width: 64rem) {
22629
+ .pkt-footer__band h2 {
22630
+ letter-spacing: -0.2px;
22631
+ font-weight: 500;
22632
+ font-size: 1.5rem;
22633
+ line-height: 2.25rem;
22634
+ }
22635
+ }
21791
22636
  }
21792
- .pkt-footer__link:hover .pkt-footer__link-icon {
21793
- --fg-color: currentColor;
22637
+ .pkt-footer__band p {
22638
+ margin: 0 0 1rem;
21794
22639
  }
21795
- .pkt-footer__link-icon {
21796
- --fg-color: currentColor;
21797
- width: 24px;
21798
- height: 24px;
21799
- margin-right: 0.5rem;
21800
- flex-shrink: 0;
22640
+ .pkt-footer__inner {
22641
+ max-width: 75rem;
22642
+ margin: 0 auto;
22643
+ padding: 3.25rem 1rem;
21801
22644
  }
21802
- @media screen and (min-width: 80rem) {
21803
- .pkt-footer__link-icon {
21804
- margin-top: 0;
22645
+ @supports not (container-type: inline-size) {
22646
+ @media screen and (min-width: 48rem) {
22647
+ .pkt-footer__inner {
22648
+ padding: 3.25rem 2rem;
22649
+ }
21805
22650
  }
21806
22651
  }
21807
- .pkt-footer__social {
21808
- display: flex;
21809
- flex-direction: row;
21810
- justify-content: space-between;
21811
- align-items: flex-start;
21812
- gap: 2rem;
21813
- margin-top: 2.5rem;
22652
+ @supports (container-type: inline-size) {
22653
+ @container pkt-footer (min-width: 48rem) {
22654
+ .pkt-footer__inner {
22655
+ padding: 3.25rem 2rem;
22656
+ }
22657
+ }
21814
22658
  }
21815
- .pkt-footer__social:hover .pkt-footer__link-icon {
21816
- --fg-color: currentColor;
22659
+ .pkt-footer__inner--compact {
22660
+ padding-top: 2rem;
22661
+ padding-bottom: 2rem;
21817
22662
  }
21818
- @media screen and (min-width: 80rem) {
21819
- .pkt-footer__social {
21820
- align-items: flex-end;
21821
- justify-content: end;
22663
+ .pkt-footer__sections {
22664
+ display: grid;
22665
+ grid-template-columns: 1fr;
22666
+ gap: 2rem;
22667
+ }
22668
+ @supports not (container-type: inline-size) {
22669
+ @media screen and (min-width: 48rem) {
22670
+ .pkt-footer__sections {
22671
+ grid-template-columns: repeat(3, 1fr);
22672
+ column-gap: 2rem;
22673
+ row-gap: 3.25rem;
22674
+ }
21822
22675
  }
21823
22676
  }
21824
- @media screen and (min-width: 80rem) {
21825
- .pkt-footer__social-language {
21826
- justify-self: flex-start;
22677
+ @supports (container-type: inline-size) {
22678
+ @container pkt-footer (min-width: 48rem) {
22679
+ .pkt-footer__sections {
22680
+ grid-template-columns: repeat(3, 1fr);
22681
+ column-gap: 2rem;
22682
+ row-gap: 3.25rem;
22683
+ }
21827
22684
  }
21828
22685
  }
21829
- .pkt-footer__social-icon {
21830
- --fg-color: currentColor;
21831
- width: 24px;
21832
- height: 24px;
22686
+ .pkt-footer__link-list {
22687
+ list-style: none;
22688
+ margin: 0;
22689
+ padding: 0;
22690
+ display: flex;
22691
+ flex-direction: column;
22692
+ gap: 1rem;
21833
22693
  }
21834
- .pkt-footer__social-icon-link:not(:last-child) {
21835
- margin-right: 1rem;
22694
+ .pkt-footer__link-list > li {
22695
+ word-break: break-word;
21836
22696
  }
21837
-
21838
- .pkt-footer-simple {
21839
- padding: 2rem 1.5rem;
21840
- background-color: var(--pkt-color-surface-strong-dark-blue);
21841
- color: var(--pkt-color-text-body-default);
22697
+ .pkt-footer__link-domain {
22698
+ white-space: nowrap;
22699
+ }
22700
+ .pkt-footer__bottom {
21842
22701
  display: flex;
22702
+ justify-content: space-between;
21843
22703
  align-items: center;
21844
- letter-spacing: -0.2px;
21845
- font-weight: 300;
21846
- font-size: 1.125rem;
21847
- line-height: 1.75rem;
22704
+ gap: 2rem;
22705
+ margin-top: 1rem;
21848
22706
  }
21849
- @media screen and (min-width: 80rem) {
21850
- .pkt-footer-simple {
21851
- justify-content: center;
22707
+ @supports not (container-type: inline-size) {
22708
+ @media screen and (min-width: 48rem) {
22709
+ .pkt-footer__bottom {
22710
+ grid-column: -2/-1;
22711
+ margin-top: 0;
22712
+ }
21852
22713
  }
21853
22714
  }
21854
- .pkt-footer-simple__container {
21855
- max-width: 80rem;
22715
+ @supports (container-type: inline-size) {
22716
+ @container pkt-footer (min-width: 48rem) {
22717
+ .pkt-footer__bottom {
22718
+ grid-column: -2/-1;
22719
+ margin-top: 0;
22720
+ }
22721
+ }
21856
22722
  }
21857
- .pkt-footer-simple__list {
21858
- padding: 0;
22723
+ .pkt-footer__sections + .pkt-footer__bottom {
22724
+ margin-top: 2rem;
22725
+ }
22726
+ .pkt-footer__bottom-links {
22727
+ list-style: none;
21859
22728
  margin: 0;
22729
+ padding: 0;
22730
+ display: flex;
22731
+ flex-wrap: wrap;
22732
+ gap: 1rem 2rem;
22733
+ }
22734
+ .pkt-footer__some {
21860
22735
  list-style: none;
22736
+ margin: 0;
22737
+ padding: 0;
22738
+ display: flex;
22739
+ align-items: center;
22740
+ gap: 1rem;
21861
22741
  }
21862
- @media screen and (min-width: 80rem) {
21863
- .pkt-footer-simple__list-item {
21864
- display: inline-flex;
22742
+ @supports not (container-type: inline-size) {
22743
+ @media screen and (min-width: 48rem) {
22744
+ .pkt-footer__some {
22745
+ gap: 1.5rem;
22746
+ }
21865
22747
  }
21866
22748
  }
21867
- .pkt-footer-simple__list-item:not(:last-child) {
21868
- margin-bottom: 1rem;
21869
- }
21870
- @media screen and (min-width: 80rem) {
21871
- .pkt-footer-simple__list-item:not(:last-child) {
21872
- margin-bottom: 0;
21873
- margin-right: 2rem;
22749
+ @supports (container-type: inline-size) {
22750
+ @container pkt-footer (min-width: 48rem) {
22751
+ .pkt-footer__some {
22752
+ gap: 1.5rem;
22753
+ }
21874
22754
  }
21875
22755
  }
21876
- .pkt-footer-simple__link {
21877
- display: flex;
21878
- text-decoration: none !important;
21879
- align-items: flex-start;
22756
+ .pkt-footer__some a {
22757
+ display: inline-flex;
21880
22758
  }
21881
- .pkt-footer-simple__link:hover .pkt-footer__link-icon {
21882
- --fg-color: currentColor;
22759
+ .pkt-footer__some a:has(.pkt-footer__some-icon) {
22760
+ text-decoration: none;
21883
22761
  }
22762
+ .pkt-footer__some-icon {
22763
+ --fg-color: currentColor;
22764
+ width: 2rem;
22765
+ height: 2rem;
22766
+ }
22767
+ .pkt-footer__sections + .pkt-footer__consent {
22768
+ margin-top: 2rem;
22769
+ }
22770
+
22771
+ .pkt-footer-simple__list {
22772
+ list-style: none;
22773
+ margin: 0;
22774
+ padding: 0;
22775
+ display: flex;
22776
+ flex-direction: column;
22777
+ gap: 1rem;
22778
+ }
22779
+ @supports not (container-type: inline-size) {
22780
+ @media screen and (min-width: 48rem) {
22781
+ .pkt-footer-simple__list {
22782
+ flex-direction: row;
22783
+ flex-wrap: wrap;
22784
+ justify-content: center;
22785
+ gap: 1rem 2rem;
22786
+ }
22787
+ }
22788
+ }
22789
+ @supports (container-type: inline-size) {
22790
+ @container pkt-footer (min-width: 48rem) {
22791
+ .pkt-footer-simple__list {
22792
+ flex-direction: row;
22793
+ flex-wrap: wrap;
22794
+ justify-content: center;
22795
+ gap: 1rem 2rem;
22796
+ }
22797
+ }
22798
+ }
22799
+ a.pkt-footer-simple__link {
22800
+ display: inline-flex;
22801
+ align-items: flex-start;
22802
+ gap: 0.5rem;
22803
+ color: inherit;
22804
+ text-decoration: none;
22805
+ }
22806
+ a.pkt-footer-simple__link:hover {
22807
+ text-decoration: underline;
22808
+ text-underline-position: from-font;
22809
+ }
22810
+
21884
22811
  .pkt-footer-simple__link-icon {
21885
22812
  --fg-color: currentColor;
21886
22813
  width: 24px;
21887
22814
  height: 24px;
21888
- margin-right: 0.5rem;
21889
22815
  flex-shrink: 0;
21890
22816
  }
21891
- @media screen and (min-width: 80rem) {
21892
- .pkt-footer-simple__link-icon {
21893
- margin-top: 0;
21894
- }
22817
+ .pkt-footer-simple__link-domain {
22818
+ white-space: nowrap;
21895
22819
  }
21896
22820
 
21897
22821
  /*
@@ -22168,6 +23092,293 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22168
23092
  color: var(--pkt-color-text-body-dark);
22169
23093
  }
22170
23094
 
23095
+ /*
23096
+ * HeaderGlobal component
23097
+ */
23098
+ /*
23099
+ * Shared header patterns
23100
+ *
23101
+ * Mixins shared by the header variants (`pkt-header-service` and
23102
+ * `pkt-header-global`). The service header is the source of truth — these
23103
+ * mixins are extracted from it so the global header stays aligned.
23104
+ *
23105
+ * This file only defines mixins; it emits no CSS on its own and therefore
23106
+ * is not `@forward`ed from the component index.
23107
+ */
23108
+ /**
23109
+ * Header chrome shared by every variant: base positioning plus the
23110
+ * `--fixed`, `--sticky`, `--scroll-to-hide` and `--hidden` modifier states.
23111
+ *
23112
+ * Call inside a header base block; `&` resolves to the calling class
23113
+ * (`.pkt-header-service` or `.pkt-header-global`).
23114
+ */
23115
+ /**
23116
+ * Mobile user area shared by every variant: on small screens the user
23117
+ * button becomes a full-width bar with top/bottom borders and the user
23118
+ * menu renders in flow directly below it (rather than as a floating
23119
+ * dropdown). Placement of the user area into its own row is left to the
23120
+ * caller (grid row for the service header, a flex row for the global
23121
+ * header).
23122
+ *
23123
+ * `$base` is the variant's BEM block, e.g. `pkt-header-service`.
23124
+ */
23125
+ /**
23126
+ * Shared header grid. Logo (col 1), a flexible content cell (col 2,
23127
+ * right-aligned) and the user cell (col 3). Row height follows
23128
+ * `--pkt-header-height`, which steps down at the tablet and mobile
23129
+ * breakpoints. On mobile the grid collapses to two columns and the user
23130
+ * cell drops to a full-width second row — the same layout the service
23131
+ * header uses.
23132
+ *
23133
+ * Call inside a header base block. `$base` is the variant's BEM block.
23134
+ * `$mobile-height` lets a variant keep a taller bar on mobile (the service
23135
+ * header drops to 64px, the global header stays at 88px).
23136
+ */
23137
+ /**
23138
+ * Standalone Oslo logo sizing shared by header variants: 64px on
23139
+ * desktop/tablet, shrinking to 32px on mobile (the same sizes the service
23140
+ * header uses for its logo without a service name).
23141
+ *
23142
+ * Call inside a header base block; `&` resolves to the calling class.
23143
+ * `$mobile-height` is the logo height on mobile (the service header drops to
23144
+ * 32px, the global header to 3.2rem).
23145
+ */
23146
+ .pkt-header-global-spacer {
23147
+ height: 6.5rem;
23148
+ }
23149
+ .pkt-header-global-spacer--tablet {
23150
+ height: 5.5rem;
23151
+ }
23152
+ .pkt-header-global-spacer--mobile {
23153
+ height: 5.5rem;
23154
+ }
23155
+ .pkt-header-global-spacer--mobile.pkt-header-global-spacer--has-user {
23156
+ height: calc(5.5rem + 3.5rem);
23157
+ }
23158
+
23159
+ .pkt-header-global {
23160
+ position: relative;
23161
+ z-index: 10;
23162
+ background-color: var(--pkt-color-background-default);
23163
+ border-bottom: 1px solid var(--pkt-color-border-subtle);
23164
+ }
23165
+ .pkt-header-global--fixed {
23166
+ width: 100vw;
23167
+ position: fixed;
23168
+ top: 0;
23169
+ left: 0;
23170
+ }
23171
+ .pkt-header-global--sticky {
23172
+ position: sticky;
23173
+ top: 0;
23174
+ }
23175
+ .pkt-header-global--scroll-to-hide {
23176
+ transform: translate3d(0, 0, 0);
23177
+ transition: 0.5s transform ease-in-out;
23178
+ }
23179
+ .pkt-header-global--hidden {
23180
+ transform: translate3d(0, -100%, 0);
23181
+ }
23182
+ .pkt-header-global {
23183
+ --pkt-header-height: 6.5rem;
23184
+ }
23185
+ .pkt-header-global--tablet {
23186
+ --pkt-header-height: 5.5rem;
23187
+ }
23188
+ .pkt-header-global--mobile {
23189
+ --pkt-header-height: 5.5rem;
23190
+ }
23191
+ .pkt-header-global {
23192
+ display: grid;
23193
+ align-items: center;
23194
+ grid-template-columns: auto minmax(0, 1fr) auto;
23195
+ grid-template-rows: var(--pkt-header-height) auto;
23196
+ column-gap: 1.5rem;
23197
+ }
23198
+ .pkt-header-global--tablet {
23199
+ column-gap: 1rem;
23200
+ }
23201
+ .pkt-header-global--mobile {
23202
+ grid-template-columns: auto minmax(0, 1fr);
23203
+ column-gap: 0.5rem;
23204
+ }
23205
+ .pkt-header-global__logo-area {
23206
+ grid-column: 1;
23207
+ grid-row: 1;
23208
+ }
23209
+ .pkt-header-global__content {
23210
+ grid-column: 2;
23211
+ grid-row: 1;
23212
+ justify-self: end;
23213
+ max-width: 100%;
23214
+ }
23215
+ .pkt-header-global__user {
23216
+ grid-column: 3;
23217
+ grid-row: 1;
23218
+ }
23219
+ .pkt-header-global--mobile .pkt-header-global__user {
23220
+ grid-column: 1/-1;
23221
+ grid-row: 2;
23222
+ justify-self: stretch;
23223
+ padding: 0;
23224
+ }
23225
+ .pkt-header-global__logo-area {
23226
+ align-items: center;
23227
+ display: inline-flex;
23228
+ padding-left: 2rem;
23229
+ }
23230
+ .pkt-header-global--tablet .pkt-header-global__logo-area {
23231
+ padding-left: 1rem;
23232
+ }
23233
+ .pkt-header-global--mobile .pkt-header-global__logo-area {
23234
+ padding-left: 0.5rem;
23235
+ }
23236
+ .pkt-header-global__content, .pkt-header-global__user {
23237
+ align-items: center;
23238
+ display: inline-flex;
23239
+ min-width: 0;
23240
+ }
23241
+ .pkt-header-global__content {
23242
+ column-gap: 1.5rem;
23243
+ }
23244
+ .pkt-header-global--tablet .pkt-header-global__content {
23245
+ column-gap: 0.5rem;
23246
+ }
23247
+ .pkt-header-global--mobile .pkt-header-global__content {
23248
+ column-gap: 0.5rem;
23249
+ padding-right: 0.5rem;
23250
+ }
23251
+ .pkt-header-global__menu-toggle, .pkt-header-global__contact {
23252
+ flex: 0 0 auto;
23253
+ }
23254
+ .pkt-header-global__user {
23255
+ justify-self: end;
23256
+ padding-right: 2rem;
23257
+ }
23258
+ .pkt-header-global--tablet:not(.pkt-header-global--mobile) .pkt-header-global__user {
23259
+ padding-right: 1rem;
23260
+ }
23261
+ .pkt-header-global__user-container {
23262
+ position: relative;
23263
+ flex: 0 0 auto;
23264
+ }
23265
+ .pkt-header-global__user-container.is-open {
23266
+ z-index: 100;
23267
+ }
23268
+ .pkt-header-global__logo {
23269
+ --fg-color: var(--pkt-color-text-body-default);
23270
+ flex: 0 0 auto;
23271
+ display: flex;
23272
+ align-items: center;
23273
+ }
23274
+ .pkt-header-global__logo a,
23275
+ .pkt-header-global__logo button {
23276
+ display: flex;
23277
+ align-items: center;
23278
+ }
23279
+ .pkt-header-global__logo svg {
23280
+ aspect-ratio: 6/3;
23281
+ height: 4rem;
23282
+ }
23283
+ .pkt-header-global--mobile .pkt-header-global__logo svg {
23284
+ height: 3.2rem;
23285
+ }
23286
+ .pkt-header-global__search {
23287
+ flex: 0 1 auto;
23288
+ width: 22rem;
23289
+ max-width: 100%;
23290
+ min-width: 0;
23291
+ }
23292
+ .pkt-header-global__search .pkt-searchinput,
23293
+ .pkt-header-global__search .pkt-searchinput__field {
23294
+ width: 100%;
23295
+ }
23296
+ .pkt-header-global__contact {
23297
+ flex: 0 0 auto;
23298
+ white-space: nowrap;
23299
+ }
23300
+ .pkt-header-global__user-button {
23301
+ max-width: 20rem;
23302
+ }
23303
+ .pkt-header-global__user-button .pkt-btn__text {
23304
+ overflow: hidden;
23305
+ text-overflow: ellipsis;
23306
+ white-space: nowrap;
23307
+ min-width: 0;
23308
+ flex: 1 1 auto;
23309
+ }
23310
+ .pkt-header-global__user-menu {
23311
+ position: absolute;
23312
+ right: 0;
23313
+ width: max(15.5rem, 100%);
23314
+ max-width: min(32rem, 90vw);
23315
+ }
23316
+ .pkt-header-global__user-menu.is-open {
23317
+ z-index: 100;
23318
+ }
23319
+ .pkt-header-global__search-toggle, .pkt-header-global__search-toggle button {
23320
+ flex: 0 0 auto;
23321
+ border-radius: 50%;
23322
+ }
23323
+ .pkt-header-global--mobile .pkt-header-global__menu-toggle, .pkt-header-global--mobile .pkt-header-global__menu-toggle button {
23324
+ border-radius: 50%;
23325
+ }
23326
+ .pkt-header-global__menu, .pkt-header-global__search-panel {
23327
+ position: fixed;
23328
+ top: max(0px, var(--pkt-header-global-top, 0px) + 6.5rem);
23329
+ left: 0;
23330
+ right: 0;
23331
+ bottom: 0;
23332
+ z-index: 90;
23333
+ background-color: rgba(0, 0, 0, 0.55);
23334
+ overflow-y: auto;
23335
+ overscroll-behavior: contain;
23336
+ -webkit-overflow-scrolling: touch;
23337
+ }
23338
+ .pkt-header-global__menu--tablet, .pkt-header-global__menu--mobile, .pkt-header-global__search-panel--tablet, .pkt-header-global__search-panel--mobile {
23339
+ top: max(0px, var(--pkt-header-global-top, 0px) + 5.5rem);
23340
+ }
23341
+ .pkt-header-global__menu .pkt-header-menu {
23342
+ width: min(var(--pkt-header-global-width, 100%), 75rem);
23343
+ margin: 0 0 0 calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
23344
+ box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
23345
+ }
23346
+ .pkt-header-global__search-panel-inner {
23347
+ margin-left: var(--pkt-header-global-left, 0px);
23348
+ width: var(--pkt-header-global-width, 100%);
23349
+ background-color: var(--pkt-color-background-default);
23350
+ border-bottom: 1px solid var(--pkt-color-border-subtle);
23351
+ box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
23352
+ padding: 1rem;
23353
+ }
23354
+ .pkt-header-global__search-panel-inner .pkt-searchinput,
23355
+ .pkt-header-global__search-panel-inner .pkt-searchinput__field {
23356
+ width: 100%;
23357
+ }
23358
+
23359
+ .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-container {
23360
+ background-color: var(--pkt-color-background-default);
23361
+ height: 3.5rem;
23362
+ width: 100%;
23363
+ z-index: 99;
23364
+ }
23365
+ .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:is(button), .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button button {
23366
+ height: 100%;
23367
+ padding: 0 1.5rem;
23368
+ width: 100%;
23369
+ max-width: 100%;
23370
+ border: none;
23371
+ border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
23372
+ border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
23373
+ }
23374
+ .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:not(button) {
23375
+ display: contents;
23376
+ }
23377
+ .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-menu {
23378
+ max-width: 100%;
23379
+ position: unset;
23380
+ }
23381
+
22171
23382
  /*
22172
23383
  * Header menu (global mega menu)
22173
23384
  */
@@ -22176,25 +23387,30 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22176
23387
  background-color: var(--pkt-color-background-default);
22177
23388
  color: var(--pkt-color-text-body-default);
22178
23389
  width: 100%;
22179
- padding-bottom: 2rem;
22180
- }
22181
- @media screen and (min-width: 48rem) {
22182
- .pkt-header-menu {
22183
- padding-bottom: 0;
22184
- }
23390
+ container-type: inline-size;
23391
+ container-name: pkt-header-menu;
22185
23392
  }
22186
23393
  .pkt-header-menu--open {
22187
23394
  display: block;
22188
23395
  }
22189
23396
  .pkt-header-menu__services {
22190
- max-width: 75.25rem;
23397
+ max-width: 75rem;
22191
23398
  margin: 0 auto;
22192
23399
  padding-top: 2rem;
22193
23400
  padding-bottom: 1rem;
22194
23401
  }
22195
- @media screen and (min-width: 48rem) {
22196
- .pkt-header-menu__services {
22197
- padding: 3.25rem;
23402
+ @supports not (container-type: inline-size) {
23403
+ @media screen and (min-width: 48rem) {
23404
+ .pkt-header-menu__services {
23405
+ padding: 3.25rem;
23406
+ }
23407
+ }
23408
+ }
23409
+ @supports (container-type: inline-size) {
23410
+ @container pkt-header-menu (min-width: 48rem) {
23411
+ .pkt-header-menu__services {
23412
+ padding: 3.25rem;
23413
+ }
22198
23414
  }
22199
23415
  }
22200
23416
  .pkt-header-menu__services-title, .pkt-header-menu__section-title {
@@ -22205,17 +23421,38 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22205
23421
  margin: 0 0 2rem;
22206
23422
  display: none;
22207
23423
  }
22208
- @media screen and (min-width: 48rem) {
22209
- .pkt-header-menu__services-title, .pkt-header-menu__section-title {
22210
- display: block;
23424
+ @supports not (container-type: inline-size) {
23425
+ @media screen and (min-width: 48rem) {
23426
+ .pkt-header-menu__services-title, .pkt-header-menu__section-title {
23427
+ display: block;
23428
+ }
22211
23429
  }
22212
23430
  }
22213
- @media screen and (min-width: 64rem) {
22214
- .pkt-header-menu__services-title, .pkt-header-menu__section-title {
22215
- letter-spacing: -0.2px;
22216
- font-weight: 500;
22217
- font-size: 1.375rem;
22218
- line-height: 2.125rem;
23431
+ @supports (container-type: inline-size) {
23432
+ @container pkt-header-menu (min-width: 48rem) {
23433
+ .pkt-header-menu__services-title, .pkt-header-menu__section-title {
23434
+ display: block;
23435
+ }
23436
+ }
23437
+ }
23438
+ @supports not (container-type: inline-size) {
23439
+ @media screen and (min-width: 64rem) {
23440
+ .pkt-header-menu__services-title, .pkt-header-menu__section-title {
23441
+ letter-spacing: -0.2px;
23442
+ font-weight: 500;
23443
+ font-size: 1.375rem;
23444
+ line-height: 2.125rem;
23445
+ }
23446
+ }
23447
+ }
23448
+ @supports (container-type: inline-size) {
23449
+ @container pkt-header-menu (min-width: 64rem) {
23450
+ .pkt-header-menu__services-title, .pkt-header-menu__section-title {
23451
+ letter-spacing: -0.2px;
23452
+ font-weight: 500;
23453
+ font-size: 1.375rem;
23454
+ line-height: 2.125rem;
23455
+ }
22219
23456
  }
22220
23457
  }
22221
23458
  .pkt-header-menu__services-title {
@@ -22229,84 +23466,166 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22229
23466
  grid-template-columns: 1fr;
22230
23467
  gap: 1.25rem;
22231
23468
  }
22232
- @media screen and (min-width: 48rem) {
22233
- .pkt-header-menu__services-list {
22234
- grid-template-columns: repeat(4, 1fr);
22235
- row-gap: 2.5rem;
23469
+ @supports not (container-type: inline-size) {
23470
+ @media screen and (min-width: 48rem) {
23471
+ .pkt-header-menu__services-list {
23472
+ grid-template-columns: repeat(4, 1fr);
23473
+ row-gap: 2.5rem;
23474
+ }
23475
+ }
23476
+ }
23477
+ @supports (container-type: inline-size) {
23478
+ @container pkt-header-menu (min-width: 48rem) {
23479
+ .pkt-header-menu__services-list {
23480
+ grid-template-columns: repeat(4, 1fr);
23481
+ row-gap: 2.5rem;
23482
+ }
22236
23483
  }
22237
23484
  }
22238
23485
  .pkt-header-menu__buttons {
22239
23486
  display: none;
22240
- max-width: 75.25rem;
23487
+ max-width: 75rem;
22241
23488
  margin: 0 auto;
22242
23489
  padding-top: 2rem;
22243
23490
  padding-bottom: 1rem;
22244
23491
  }
22245
- @media screen and (min-width: 48rem) {
22246
- .pkt-header-menu__buttons {
22247
- padding: 3.25rem;
23492
+ @supports not (container-type: inline-size) {
23493
+ @media screen and (min-width: 48rem) {
23494
+ .pkt-header-menu__buttons {
23495
+ padding: 3.25rem;
23496
+ }
22248
23497
  }
22249
23498
  }
22250
- @media screen and (min-width: 48rem) {
22251
- .pkt-header-menu__buttons {
22252
- display: flex;
22253
- gap: 1rem;
22254
- flex-wrap: wrap;
22255
- padding-top: 0;
23499
+ @supports (container-type: inline-size) {
23500
+ @container pkt-header-menu (min-width: 48rem) {
23501
+ .pkt-header-menu__buttons {
23502
+ padding: 3.25rem;
23503
+ }
22256
23504
  }
22257
23505
  }
22258
- @media screen and (min-width: 64rem) {
22259
- .pkt-header-menu__buttons .pkt-btn__text {
22260
- letter-spacing: -0.2px;
22261
- font-weight: 500;
22262
- font-size: 1.125rem;
22263
- line-height: 1.75rem;
23506
+ @supports not (container-type: inline-size) {
23507
+ @media screen and (min-width: 48rem) {
23508
+ .pkt-header-menu__buttons {
23509
+ display: flex;
23510
+ gap: 1rem;
23511
+ flex-wrap: wrap;
23512
+ padding-top: 0;
23513
+ }
23514
+ }
23515
+ }
23516
+ @supports (container-type: inline-size) {
23517
+ @container pkt-header-menu (min-width: 48rem) {
23518
+ .pkt-header-menu__buttons {
23519
+ display: flex;
23520
+ gap: 1rem;
23521
+ flex-wrap: wrap;
23522
+ padding-top: 0;
23523
+ }
23524
+ }
23525
+ }
23526
+ @supports not (container-type: inline-size) {
23527
+ @media screen and (min-width: 64rem) {
23528
+ .pkt-header-menu__buttons .pkt-btn__text {
23529
+ letter-spacing: -0.2px;
23530
+ font-weight: 500;
23531
+ font-size: 1.125rem;
23532
+ line-height: 1.75rem;
23533
+ }
23534
+ }
23535
+ }
23536
+ @supports (container-type: inline-size) {
23537
+ @container pkt-header-menu (min-width: 64rem) {
23538
+ .pkt-header-menu__buttons .pkt-btn__text {
23539
+ letter-spacing: -0.2px;
23540
+ font-weight: 500;
23541
+ font-size: 1.125rem;
23542
+ line-height: 1.75rem;
23543
+ }
22264
23544
  }
22265
23545
  }
22266
23546
  .pkt-header-menu__buttons--mobile {
22267
23547
  padding: 0 1rem;
22268
23548
  display: flex;
22269
23549
  }
22270
- @media screen and (min-width: 48rem) {
22271
- .pkt-header-menu__buttons--mobile {
22272
- display: none;
23550
+ @supports not (container-type: inline-size) {
23551
+ @media screen and (min-width: 48rem) {
23552
+ .pkt-header-menu__buttons--mobile {
23553
+ display: none;
23554
+ }
22273
23555
  }
22274
23556
  }
22275
- @media screen and (min-width: 48rem) {
22276
- .pkt-header-menu__sections {
22277
- background-color: var(--pkt-color-surface-strong-gray);
23557
+ @supports (container-type: inline-size) {
23558
+ @container pkt-header-menu (min-width: 48rem) {
23559
+ .pkt-header-menu__buttons--mobile {
23560
+ display: none;
23561
+ }
22278
23562
  }
22279
- [data-mode=dark] .pkt-header-menu__sections {
22280
- background-color: var(--pkt-color-background-default);
23563
+ }
23564
+ @supports not (container-type: inline-size) {
23565
+ @media screen and (min-width: 48rem) {
23566
+ .pkt-header-menu__sections {
23567
+ background-color: var(--pkt-color-surface-strong-gray);
23568
+ }
23569
+ [data-mode=dark] .pkt-header-menu__sections {
23570
+ background-color: var(--pkt-color-background-default);
23571
+ }
23572
+ }
23573
+ }
23574
+ @supports (container-type: inline-size) {
23575
+ @container pkt-header-menu (min-width: 48rem) {
23576
+ .pkt-header-menu__sections {
23577
+ background-color: var(--pkt-color-surface-strong-gray);
23578
+ }
23579
+ [data-mode=dark] .pkt-header-menu__sections {
23580
+ background-color: var(--pkt-color-background-default);
23581
+ }
22281
23582
  }
22282
23583
  }
22283
23584
  .pkt-header-menu__sections-inner {
22284
- max-width: 75.25rem;
23585
+ max-width: 75rem;
22285
23586
  margin: 0 auto;
22286
23587
  padding-top: 2rem;
22287
23588
  padding-bottom: 1rem;
22288
23589
  }
22289
- @media screen and (min-width: 48rem) {
22290
- .pkt-header-menu__sections-inner {
22291
- padding: 3.25rem;
23590
+ @supports not (container-type: inline-size) {
23591
+ @media screen and (min-width: 48rem) {
23592
+ .pkt-header-menu__sections-inner {
23593
+ padding: 3.25rem;
23594
+ }
22292
23595
  }
22293
23596
  }
22294
- @media screen and (min-width: 48rem) {
22295
- .pkt-header-menu__sections-inner {
22296
- display: grid;
22297
- grid-template-columns: repeat(4, 1fr);
22298
- gap: 2rem;
23597
+ @supports (container-type: inline-size) {
23598
+ @container pkt-header-menu (min-width: 48rem) {
23599
+ .pkt-header-menu__sections-inner {
23600
+ padding: 3.25rem;
23601
+ }
22299
23602
  }
22300
23603
  }
22301
- @media screen and (min-width: 0rem) and (max-width: 47.938rem) {
22302
- .pkt-header-menu__section .pkt-accordion-item__title {
22303
- letter-spacing: -0.2px;
22304
- font-weight: 500;
22305
- font-size: 1.125rem;
22306
- line-height: 1.75rem;
22307
- padding: 1rem 0;
23604
+ @supports not (container-type: inline-size) {
23605
+ @media screen and (min-width: 48rem) {
23606
+ .pkt-header-menu__sections-inner {
23607
+ display: grid;
23608
+ grid-template-columns: repeat(4, 1fr);
23609
+ gap: 2rem;
23610
+ }
23611
+ }
23612
+ }
23613
+ @supports (container-type: inline-size) {
23614
+ @container pkt-header-menu (min-width: 48rem) {
23615
+ .pkt-header-menu__sections-inner {
23616
+ display: grid;
23617
+ grid-template-columns: repeat(4, 1fr);
23618
+ gap: 2rem;
23619
+ }
22308
23620
  }
22309
23621
  }
23622
+ .pkt-header-menu__section .pkt-accordion-item__title {
23623
+ letter-spacing: -0.2px;
23624
+ font-weight: 500;
23625
+ font-size: 1.125rem;
23626
+ line-height: 1.75rem;
23627
+ padding: 0.5rem 1rem;
23628
+ }
22310
23629
  .pkt-header-menu__section-list {
22311
23630
  list-style: none;
22312
23631
  margin: 0;
@@ -22315,9 +23634,18 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22315
23634
  flex-direction: column;
22316
23635
  gap: 1rem;
22317
23636
  }
22318
- @media screen and (min-width: 48rem) {
22319
- .pkt-header-menu__section-list {
22320
- row-gap: 1rem;
23637
+ @supports not (container-type: inline-size) {
23638
+ @media screen and (min-width: 48rem) {
23639
+ .pkt-header-menu__section-list {
23640
+ row-gap: 1rem;
23641
+ }
23642
+ }
23643
+ }
23644
+ @supports (container-type: inline-size) {
23645
+ @container pkt-header-menu (min-width: 48rem) {
23646
+ .pkt-header-menu__section-list {
23647
+ row-gap: 1rem;
23648
+ }
22321
23649
  }
22322
23650
  }
22323
23651
  .pkt-header-menu__section-link {
@@ -22331,12 +23659,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22331
23659
  text-underline-position: from-font;
22332
23660
  line-height: 1.5;
22333
23661
  }
22334
- @media screen and (min-width: 64rem) {
22335
- .pkt-header-menu__section-link {
22336
- letter-spacing: -0.2px;
22337
- font-weight: 300;
22338
- font-size: 1.125rem;
22339
- line-height: 1.75rem;
23662
+ @supports not (container-type: inline-size) {
23663
+ @media screen and (min-width: 64rem) {
23664
+ .pkt-header-menu__section-link {
23665
+ letter-spacing: -0.2px;
23666
+ font-weight: 300;
23667
+ font-size: 1.125rem;
23668
+ line-height: 1.75rem;
23669
+ }
23670
+ }
23671
+ }
23672
+ @supports (container-type: inline-size) {
23673
+ @container pkt-header-menu (min-width: 64rem) {
23674
+ .pkt-header-menu__section-link {
23675
+ letter-spacing: -0.2px;
23676
+ font-weight: 300;
23677
+ font-size: 1.125rem;
23678
+ line-height: 1.75rem;
23679
+ }
22340
23680
  }
22341
23681
  }
22342
23682
  .pkt-header-menu__section-link:hover, .pkt-header-menu__section-link:focus-visible {
@@ -22356,12 +23696,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22356
23696
  font-size: 1rem;
22357
23697
  line-height: 1.5rem;
22358
23698
  }
22359
- @media screen and (min-width: 64rem) {
22360
- .pkt-header-menu__service-link {
22361
- letter-spacing: -0.2px;
22362
- font-weight: 300;
22363
- font-size: 1.125rem;
22364
- line-height: 1.75rem;
23699
+ @supports not (container-type: inline-size) {
23700
+ @media screen and (min-width: 64rem) {
23701
+ .pkt-header-menu__service-link {
23702
+ letter-spacing: -0.2px;
23703
+ font-weight: 300;
23704
+ font-size: 1.125rem;
23705
+ line-height: 1.75rem;
23706
+ }
23707
+ }
23708
+ }
23709
+ @supports (container-type: inline-size) {
23710
+ @container pkt-header-menu (min-width: 64rem) {
23711
+ .pkt-header-menu__service-link {
23712
+ letter-spacing: -0.2px;
23713
+ font-weight: 300;
23714
+ font-size: 1.125rem;
23715
+ line-height: 1.75rem;
23716
+ }
22365
23717
  }
22366
23718
  }
22367
23719
  .pkt-header-menu__service-link:hover .pkt-header-menu__service-text, .pkt-header-menu__service-link:focus-visible .pkt-header-menu__service-text {
@@ -22374,10 +23726,20 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22374
23726
  width: 1.5rem;
22375
23727
  height: 1.5rem;
22376
23728
  }
22377
- @media screen and (min-width: 48rem) {
22378
- .pkt-header-menu__service-icon {
22379
- width: 2rem;
22380
- height: 2rem;
23729
+ @supports not (container-type: inline-size) {
23730
+ @media screen and (min-width: 48rem) {
23731
+ .pkt-header-menu__service-icon {
23732
+ width: 2rem;
23733
+ height: 2rem;
23734
+ }
23735
+ }
23736
+ }
23737
+ @supports (container-type: inline-size) {
23738
+ @container pkt-header-menu (min-width: 48rem) {
23739
+ .pkt-header-menu__service-icon {
23740
+ width: 2rem;
23741
+ height: 2rem;
23742
+ }
22381
23743
  }
22382
23744
  }
22383
23745
  .pkt-header-menu__service-icon svg {
@@ -22388,28 +23750,49 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22388
23750
  min-width: 0;
22389
23751
  }
22390
23752
  .pkt-header-menu__footer {
22391
- max-width: 75.25rem;
23753
+ max-width: 75rem;
22392
23754
  margin: 0 auto;
22393
23755
  padding-top: 2rem;
22394
23756
  padding-bottom: 1rem;
22395
23757
  }
22396
- @media screen and (min-width: 48rem) {
22397
- .pkt-header-menu__footer {
22398
- padding: 3.25rem;
23758
+ @supports not (container-type: inline-size) {
23759
+ @media screen and (min-width: 48rem) {
23760
+ .pkt-header-menu__footer {
23761
+ padding: 3.25rem;
23762
+ }
23763
+ }
23764
+ }
23765
+ @supports (container-type: inline-size) {
23766
+ @container pkt-header-menu (min-width: 48rem) {
23767
+ .pkt-header-menu__footer {
23768
+ padding: 3.25rem;
23769
+ }
22399
23770
  }
22400
23771
  }
22401
23772
  .pkt-header-menu__footer {
22402
- padding: 1.5rem 1rem 1rem;
23773
+ padding: 1.5rem 1rem 3rem;
22403
23774
  display: flex;
22404
23775
  flex-direction: column;
22405
23776
  gap: 1.5rem;
22406
23777
  }
22407
- @media screen and (min-width: 48rem) {
22408
- .pkt-header-menu__footer {
22409
- flex-direction: row;
22410
- justify-content: space-between;
22411
- align-items: center;
22412
- padding: 2rem 3.25rem;
23778
+ @supports not (container-type: inline-size) {
23779
+ @media screen and (min-width: 48rem) {
23780
+ .pkt-header-menu__footer {
23781
+ flex-direction: row;
23782
+ justify-content: space-between;
23783
+ align-items: center;
23784
+ padding: 2rem 3.25rem;
23785
+ }
23786
+ }
23787
+ }
23788
+ @supports (container-type: inline-size) {
23789
+ @container pkt-header-menu (min-width: 48rem) {
23790
+ .pkt-header-menu__footer {
23791
+ flex-direction: row;
23792
+ justify-content: space-between;
23793
+ align-items: center;
23794
+ padding: 2rem 3.25rem;
23795
+ }
22413
23796
  }
22414
23797
  }
22415
23798
  .pkt-header-menu__footer-list {
@@ -22420,33 +23803,66 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22420
23803
  flex-direction: column;
22421
23804
  gap: 0.75rem;
22422
23805
  }
22423
- @media screen and (min-width: 48rem) {
22424
- .pkt-header-menu__footer-list {
22425
- flex-direction: row;
22426
- gap: 0rem;
22427
- }
22428
- .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
22429
- line-height: 1;
22430
- }
22431
- .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
22432
- border-right: 1px solid currentColor;
22433
- padding: 0 2rem;
22434
- }
22435
- .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
22436
- padding-left: 0;
23806
+ @supports not (container-type: inline-size) {
23807
+ @media screen and (min-width: 48rem) {
23808
+ .pkt-header-menu__footer-list {
23809
+ flex-direction: row;
23810
+ gap: 0rem;
23811
+ }
23812
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
23813
+ line-height: 1;
23814
+ }
23815
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
23816
+ border-right: 1px solid currentColor;
23817
+ padding: 0 2rem;
23818
+ }
23819
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
23820
+ padding-left: 0;
23821
+ }
23822
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
23823
+ border-right: none;
23824
+ padding-right: 0;
23825
+ }
22437
23826
  }
22438
- .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
22439
- border-right: none;
22440
- padding-right: 0;
23827
+ }
23828
+ @supports (container-type: inline-size) {
23829
+ @container pkt-header-menu (min-width: 48rem) {
23830
+ .pkt-header-menu__footer-list {
23831
+ flex-direction: row;
23832
+ gap: 0rem;
23833
+ }
23834
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
23835
+ line-height: 1;
23836
+ }
23837
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
23838
+ border-right: 1px solid currentColor;
23839
+ padding: 0 2rem;
23840
+ }
23841
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
23842
+ padding-left: 0;
23843
+ }
23844
+ .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
23845
+ border-right: none;
23846
+ padding-right: 0;
23847
+ }
22441
23848
  }
22442
23849
  }
22443
23850
  .pkt-header-menu__footer-list--social {
22444
23851
  flex-direction: row;
22445
23852
  gap: 1rem;
22446
23853
  }
22447
- @media screen and (min-width: 48rem) {
22448
- .pkt-header-menu__footer-list--social {
22449
- gap: 2rem;
23854
+ @supports not (container-type: inline-size) {
23855
+ @media screen and (min-width: 48rem) {
23856
+ .pkt-header-menu__footer-list--social {
23857
+ gap: 2rem;
23858
+ }
23859
+ }
23860
+ }
23861
+ @supports (container-type: inline-size) {
23862
+ @container pkt-header-menu (min-width: 48rem) {
23863
+ .pkt-header-menu__footer-list--social {
23864
+ gap: 2rem;
23865
+ }
22450
23866
  }
22451
23867
  }
22452
23868
  .pkt-header-menu__footer-link {
@@ -22457,12 +23873,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22457
23873
  color: var(--pkt-color-text-body-default);
22458
23874
  text-decoration: none;
22459
23875
  }
22460
- @media screen and (min-width: 64rem) {
22461
- .pkt-header-menu__footer-link {
22462
- letter-spacing: -0.2px;
22463
- font-weight: 300;
22464
- font-size: 1.125rem;
22465
- line-height: 1.75rem;
23876
+ @supports not (container-type: inline-size) {
23877
+ @media screen and (min-width: 64rem) {
23878
+ .pkt-header-menu__footer-link {
23879
+ letter-spacing: -0.2px;
23880
+ font-weight: 300;
23881
+ font-size: 1.125rem;
23882
+ line-height: 1.75rem;
23883
+ }
23884
+ }
23885
+ }
23886
+ @supports (container-type: inline-size) {
23887
+ @container pkt-header-menu (min-width: 64rem) {
23888
+ .pkt-header-menu__footer-link {
23889
+ letter-spacing: -0.2px;
23890
+ font-weight: 300;
23891
+ font-size: 1.125rem;
23892
+ line-height: 1.75rem;
23893
+ }
22466
23894
  }
22467
23895
  }
22468
23896
  .pkt-header-menu__footer-link:hover, .pkt-header-menu__footer-link:focus-visible {
@@ -22480,19 +23908,43 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22480
23908
  height: 2rem;
22481
23909
  }
22482
23910
  .pkt-header-menu__loading, .pkt-header-menu__error {
22483
- max-width: 75.25rem;
23911
+ max-width: 75rem;
22484
23912
  margin: 0 auto;
22485
23913
  padding-top: 2rem;
22486
23914
  padding-bottom: 1rem;
22487
23915
  }
22488
- @media screen and (min-width: 48rem) {
22489
- .pkt-header-menu__loading, .pkt-header-menu__error {
22490
- padding: 3.25rem;
23916
+ @supports not (container-type: inline-size) {
23917
+ @media screen and (min-width: 48rem) {
23918
+ .pkt-header-menu__loading, .pkt-header-menu__error {
23919
+ padding: 3.25rem;
23920
+ }
23921
+ }
23922
+ }
23923
+ @supports (container-type: inline-size) {
23924
+ @container pkt-header-menu (min-width: 48rem) {
23925
+ .pkt-header-menu__loading, .pkt-header-menu__error {
23926
+ padding: 3.25rem;
23927
+ }
22491
23928
  }
22492
23929
  }
22493
23930
  .pkt-header-menu__loading, .pkt-header-menu__error {
22494
23931
  text-align: center;
22495
23932
  color: var(--pkt-color-text-body-default);
23933
+ padding-bottom: 3rem;
23934
+ }
23935
+ @supports not (container-type: inline-size) {
23936
+ @media screen and (min-width: 48rem) {
23937
+ .pkt-header-menu__loading, .pkt-header-menu__error {
23938
+ padding-bottom: 3.25rem;
23939
+ }
23940
+ }
23941
+ }
23942
+ @supports (container-type: inline-size) {
23943
+ @container pkt-header-menu (min-width: 48rem) {
23944
+ .pkt-header-menu__loading, .pkt-header-menu__error {
23945
+ padding-bottom: 3.25rem;
23946
+ }
23947
+ }
22496
23948
  }
22497
23949
 
22498
23950
  /*
@@ -22577,6 +24029,25 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22577
24029
  z-index: 10;
22578
24030
  background-color: var(--pkt-color-background-default);
22579
24031
  border-bottom: 1px solid var(--pkt-color-border-subtle);
24032
+ }
24033
+ .pkt-header-service--fixed {
24034
+ width: 100vw;
24035
+ position: fixed;
24036
+ top: 0;
24037
+ left: 0;
24038
+ }
24039
+ .pkt-header-service--sticky {
24040
+ position: sticky;
24041
+ top: 0;
24042
+ }
24043
+ .pkt-header-service--scroll-to-hide {
24044
+ transform: translate3d(0, 0, 0);
24045
+ transition: 0.5s transform ease-in-out;
24046
+ }
24047
+ .pkt-header-service--hidden {
24048
+ transform: translate3d(0, -100%, 0);
24049
+ }
24050
+ .pkt-header-service {
22580
24051
  display: grid;
22581
24052
  align-items: center;
22582
24053
  grid-template-columns: 1fr auto auto;
@@ -22594,19 +24065,6 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22594
24065
  .pkt-header-service--compact {
22595
24066
  grid-template-rows: 4.5rem auto;
22596
24067
  }
22597
- .pkt-header-service--fixed {
22598
- width: 100vw;
22599
- position: fixed;
22600
- top: 0;
22601
- left: 0;
22602
- }
22603
- .pkt-header-service--scroll-to-hide {
22604
- transform: translate3d(0, 0, 0);
22605
- transition: 0.5s transform ease-in-out;
22606
- }
22607
- .pkt-header-service--hidden {
22608
- transform: translate3d(0, -100%, 0);
22609
- }
22610
24068
  .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
22611
24069
  display: inline-flex;
22612
24070
  column-gap: 2rem;
@@ -22752,7 +24210,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22752
24210
  position: relative;
22753
24211
  }
22754
24212
  .pkt-header-service__user-button {
22755
- max-width: 28.5rem;
24213
+ max-width: 22.5rem;
22756
24214
  }
22757
24215
  .pkt-header-service__user-button .pkt-btn__text {
22758
24216
  overflow: hidden;
@@ -22806,10 +24264,32 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22806
24264
  grid-template-rows: 4rem auto;
22807
24265
  grid-template-columns: 1fr auto;
22808
24266
  }
22809
- @media screen and (min-width: 80rem) {
22810
- .pkt-header-service.pkt-header-service--mobile {
22811
- grid-template-rows: 4.5rem auto;
22812
- }
24267
+ @media screen and (min-width: 80rem) {
24268
+ .pkt-header-service.pkt-header-service--mobile {
24269
+ grid-template-rows: 4.5rem auto;
24270
+ }
24271
+ }
24272
+ .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
24273
+ background-color: var(--pkt-color-background-default);
24274
+ height: 3.5rem;
24275
+ width: 100%;
24276
+ z-index: 99;
24277
+ }
24278
+ .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button {
24279
+ height: 100%;
24280
+ padding: 0 1.5rem;
24281
+ width: 100%;
24282
+ max-width: 100%;
24283
+ border: none;
24284
+ border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
24285
+ border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
24286
+ }
24287
+ .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
24288
+ display: contents;
24289
+ }
24290
+ .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
24291
+ max-width: 100%;
24292
+ position: unset;
22813
24293
  }
22814
24294
  .pkt-header-service.pkt-header-service--mobile .pkt-header-service--compact {
22815
24295
  grid-template-rows: 4rem auto;
@@ -22844,28 +24324,6 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
22844
24324
  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu {
22845
24325
  background-color: var(--pkt-color-background-default);
22846
24326
  }
22847
- .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
22848
- background-color: var(--pkt-color-background-default);
22849
- height: 3.5rem;
22850
- width: 100%;
22851
- z-index: 99;
22852
- }
22853
- .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button {
22854
- height: 100%;
22855
- padding: 0 1.5rem;
22856
- width: 100%;
22857
- max-width: 100%;
22858
- border: none;
22859
- border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
22860
- border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
22861
- }
22862
- .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
22863
- display: contents;
22864
- }
22865
- .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
22866
- max-width: 100%;
22867
- position: unset;
22868
- }
22869
24327
  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-content {
22870
24328
  display: none;
22871
24329
  }
@@ -23310,7 +24768,7 @@ pkt-input-wrapper {
23310
24768
  .pkt-inputwrapper__label {
23311
24769
  display: flex;
23312
24770
  flex-direction: row;
23313
- align-items: flex-end;
24771
+ align-items: center;
23314
24772
  gap: 0.5rem;
23315
24773
  color: var(--pkt-color-text-body-default);
23316
24774
  }
@@ -23326,7 +24784,7 @@ pkt-input-wrapper {
23326
24784
  .pkt-inputwrapper__helptext-container {
23327
24785
  display: flex;
23328
24786
  flex-direction: column;
23329
- gap: 0.25rem;
24787
+ gap: 0.5rem;
23330
24788
  }
23331
24789
  .pkt-inputwrapper__helptext {
23332
24790
  width: min(100%, 31rem);
@@ -23353,6 +24811,12 @@ pkt-input-wrapper {
23353
24811
  .pkt-inputwrapper__helptext > *:last-child {
23354
24812
  margin-bottom: 0;
23355
24813
  }
24814
+ .pkt-inputwrapper__helptext-expandable {
24815
+ display: flex;
24816
+ flex-direction: column;
24817
+ align-items: flex-start;
24818
+ gap: 0.25rem;
24819
+ }
23356
24820
  .pkt-inputwrapper__helptext-expandable-heading {
23357
24821
  margin: 0;
23358
24822
  letter-spacing: -0.2px;
@@ -23364,7 +24828,6 @@ pkt-input-wrapper {
23364
24828
  display: block;
23365
24829
  border-left: 2px solid var(--pkt-color-text-body-dark);
23366
24830
  padding: 0.5rem 1rem;
23367
- margin-bottom: 0.25rem;
23368
24831
  }
23369
24832
  .pkt-inputwrapper__helptext-expandable-closed {
23370
24833
  display: none;
@@ -23411,8 +24874,21 @@ pkt-input-wrapper {
23411
24874
  width: min(100%, 31rem);
23412
24875
  margin: 0 0 0.5rem 0;
23413
24876
  }
23414
- .pkt-inputwrapper .pkt-alert--error {
23415
- margin: 0.5rem 0 0.5rem 0;
24877
+ .pkt-inputwrapper__alert-wrapper {
24878
+ align-self: stretch;
24879
+ max-width: min(100%, 31rem);
24880
+ }
24881
+ .pkt-inputwrapper__alert-wrapper .pkt-alert {
24882
+ width: 100%;
24883
+ margin: 0;
24884
+ }
24885
+ .pkt-inputwrapper:has(.pkt-input--fullwidth) .pkt-inputwrapper__alert-wrapper {
24886
+ max-width: none;
24887
+ }
24888
+ .pkt-inputwrapper__fieldset > .pkt-alert {
24889
+ align-self: stretch;
24890
+ width: auto;
24891
+ max-width: min(100%, 31rem);
23416
24892
  }
23417
24893
  .pkt-inputwrapper .pkt-tag {
23418
24894
  margin-left: 8px;
@@ -23469,6 +24945,42 @@ pkt-input-wrapper {
23469
24945
  box-shadow: none;
23470
24946
  outline: none;
23471
24947
  }
24948
+ .pkt-inputwrapper--small .pkt-inputwrapper__helptext-container, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-container {
24949
+ gap: 0.25rem;
24950
+ }
24951
+ .pkt-inputwrapper--small .pkt-inputwrapper__helptext,
24952
+ .pkt-inputwrapper--small .pkt-inputwrapper__helptext > .pkt-btn,
24953
+ .pkt-inputwrapper--small .pkt-inputwrapper__helptext-expandable .pkt-btn, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext,
24954
+ .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext > .pkt-btn,
24955
+ .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-expandable .pkt-btn {
24956
+ letter-spacing: -0.2px;
24957
+ font-weight: 300;
24958
+ font-size: 0.75rem;
24959
+ line-height: 1.25rem;
24960
+ }
24961
+ .pkt-inputwrapper--small .pkt-inputwrapper__helptext-expandable-heading, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-expandable-heading {
24962
+ letter-spacing: -0.2px;
24963
+ font-weight: 500;
24964
+ font-size: 1rem;
24965
+ line-height: 1.5rem;
24966
+ }
24967
+ .pkt-inputwrapper--small .pkt-inputwrapper__fieldset, .pkt-inputwrapper--xsmall .pkt-inputwrapper__fieldset {
24968
+ gap: 0.25rem;
24969
+ }
24970
+ .pkt-inputwrapper--small .pkt-inputwrapper__label,
24971
+ .pkt-inputwrapper--small .pkt-inputwrapper__legend {
24972
+ letter-spacing: -0.2px;
24973
+ font-weight: 500;
24974
+ font-size: 1rem;
24975
+ line-height: 1.5rem;
24976
+ }
24977
+ .pkt-inputwrapper--xsmall .pkt-inputwrapper__label,
24978
+ .pkt-inputwrapper--xsmall .pkt-inputwrapper__legend {
24979
+ letter-spacing: -0.2px;
24980
+ font-weight: 500;
24981
+ font-size: 0.875rem;
24982
+ line-height: 1.375rem;
24983
+ }
23472
24984
 
23473
24985
  [data-mode=dark] .pkt-inputwrapper {
23474
24986
  color: white;
@@ -24131,11 +25643,6 @@ pkt-listbox {
24131
25643
  background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
24132
25644
  }
24133
25645
 
24134
- body.pkt-modal--open {
24135
- overflow: hidden;
24136
- scrollbar-gutter: stable;
24137
- }
24138
-
24139
25646
  .pkt-modal--small {
24140
25647
  width: 480px;
24141
25648
  }
@@ -24566,7 +26073,6 @@ pkt-messagebox {
24566
26073
  transition: margin-left 0.5s ease;
24567
26074
  }
24568
26075
 
24569
- /* Common styles for all inputs */
24570
26076
  .pkt-searchinput {
24571
26077
  position: relative;
24572
26078
  letter-spacing: -0.2px;
@@ -24574,9 +26080,64 @@ pkt-messagebox {
24574
26080
  font-size: 1.125rem;
24575
26081
  line-height: 1.75rem;
24576
26082
  }
26083
+ .pkt-searchinput--small {
26084
+ letter-spacing: -0.2px;
26085
+ font-weight: 300;
26086
+ font-size: 1rem;
26087
+ line-height: 1.5rem;
26088
+ }
26089
+ .pkt-searchinput--small .pkt-inputwrapper__label {
26090
+ letter-spacing: -0.2px;
26091
+ font-weight: 500;
26092
+ font-size: 1rem;
26093
+ line-height: 1.5rem;
26094
+ }
26095
+ .pkt-searchinput--small .pkt-searchinput__suggestion {
26096
+ padding: 0.75rem;
26097
+ letter-spacing: -0.2px;
26098
+ font-weight: 300;
26099
+ font-size: 1rem;
26100
+ line-height: 1.5rem;
26101
+ }
26102
+ .pkt-searchinput--small .pkt-searchinput__suggestion-title {
26103
+ letter-spacing: -0.2px;
26104
+ font-weight: 500;
26105
+ font-size: 1rem;
26106
+ line-height: 1.5rem;
26107
+ }
26108
+ .pkt-searchinput--xsmall {
26109
+ letter-spacing: -0.2px;
26110
+ font-weight: 300;
26111
+ font-size: 0.875rem;
26112
+ line-height: 1.375rem;
26113
+ }
26114
+ .pkt-searchinput--xsmall .pkt-inputwrapper__label {
26115
+ letter-spacing: -0.2px;
26116
+ font-weight: 500;
26117
+ font-size: 0.875rem;
26118
+ line-height: 1.375rem;
26119
+ }
26120
+ .pkt-searchinput--xsmall .pkt-searchinput__suggestion {
26121
+ padding: 0.5rem;
26122
+ letter-spacing: -0.2px;
26123
+ font-weight: 300;
26124
+ font-size: 0.875rem;
26125
+ line-height: 1.375rem;
26126
+ }
26127
+ .pkt-searchinput--xsmall .pkt-searchinput__suggestion-title {
26128
+ letter-spacing: -0.2px;
26129
+ font-weight: 500;
26130
+ font-size: 0.875rem;
26131
+ line-height: 1.375rem;
26132
+ }
24577
26133
  .pkt-searchinput__field {
24578
26134
  width: min(100%, 31rem);
24579
26135
  display: flex;
26136
+ align-items: stretch;
26137
+ }
26138
+ .pkt-searchinput__field .pkt-input {
26139
+ flex: 1;
26140
+ min-width: 0;
24580
26141
  }
24581
26142
  .pkt-searchinput--fullwidth .pkt-searchinput__field {
24582
26143
  width: 100%;
@@ -24593,9 +26154,12 @@ pkt-messagebox {
24593
26154
  .pkt-searchinput--local-with-button .pkt-searchinput__field {
24594
26155
  gap: 0.5rem;
24595
26156
  }
24596
- .pkt-searchinput--local .pkt-input {
26157
+ .pkt-searchinput--local .pkt-input__container--medium .pkt-input {
24597
26158
  padding: 0.5rem 0 0.5rem 1rem;
24598
26159
  }
26160
+ .pkt-searchinput--local .pkt-input__container--small .pkt-input, .pkt-searchinput--local .pkt-input__container--xsmall .pkt-input {
26161
+ padding-right: 0;
26162
+ }
24599
26163
  .pkt-searchinput--local .pkt-searchinput__button:disabled {
24600
26164
  border-color: var(--pkt-color-input-border-disabled);
24601
26165
  }
@@ -24618,9 +26182,21 @@ pkt-messagebox {
24618
26182
  .pkt-searchinput--global .pkt-searchinput__suggestions {
24619
26183
  width: min(100% - 3rem, 28rem);
24620
26184
  }
26185
+ .pkt-searchinput--global.pkt-searchinput--small .pkt-searchinput__suggestions {
26186
+ width: min(100% - 2.625rem, 28rem);
26187
+ }
26188
+ .pkt-searchinput--global.pkt-searchinput--xsmall .pkt-searchinput__suggestions {
26189
+ width: min(100% - 2.25rem, 28rem);
26190
+ }
24621
26191
  .pkt-searchinput--local-with-button .pkt-searchinput__suggestions {
24622
26192
  width: min(100% - 3.5rem, 27.5rem);
24623
26193
  }
26194
+ .pkt-searchinput--local-with-button.pkt-searchinput--small .pkt-searchinput__suggestions {
26195
+ width: min(100% - 3.125rem, 27.5rem);
26196
+ }
26197
+ .pkt-searchinput--local-with-button.pkt-searchinput--xsmall .pkt-searchinput__suggestions {
26198
+ width: min(100% - 2.75rem, 27.5rem);
26199
+ }
24624
26200
  .pkt-searchinput--fullwidth .pkt-searchinput__suggestions {
24625
26201
  width: 100%;
24626
26202
  }
@@ -25347,6 +26923,48 @@ pkt-tag > .pkt-tag {
25347
26923
  * Denne blir stilsatt av .pkt-input
25348
26924
  * Ikke bruk klassen .pkt-textinput
25349
26925
  */
26926
+ /*
26927
+ * Textarea component
26928
+ *
26929
+ * Base field styles (border, states, min-height) live in _input.scss on .pkt-input:is(textarea).
26930
+ * Wrapper label/helptext scale lives in _inputwrapper.scss (--small / --xsmall).
26931
+ * Counter stays in normal flow below the field for all sizes (see textarea.astro).
26932
+ */
26933
+ pkt-textarea:not([fullwidth]):has(textarea.pkt-input:not([cols])) {
26934
+ width: min(31rem, 100%);
26935
+ }
26936
+
26937
+ pkt-textarea[fullwidth] {
26938
+ width: 100%;
26939
+ }
26940
+
26941
+ .pkt-inputwrapper:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols])) {
26942
+ width: min(31rem, 100%);
26943
+ }
26944
+
26945
+ .pkt-inputwrapper:has(textarea.pkt-input--fullwidth) {
26946
+ width: 100%;
26947
+ }
26948
+
26949
+ textarea.pkt-input:not(.pkt-input--fullwidth):not([cols]) {
26950
+ width: 100%;
26951
+ }
26952
+ textarea.pkt-input--small, textarea.pkt-input--xsmall {
26953
+ padding: 0.5rem 1rem;
26954
+ }
26955
+ textarea.pkt-input--small {
26956
+ letter-spacing: -0.2px;
26957
+ font-weight: 300;
26958
+ font-size: 1rem;
26959
+ line-height: 1.5rem;
26960
+ }
26961
+ textarea.pkt-input--xsmall {
26962
+ letter-spacing: -0.2px;
26963
+ font-weight: 300;
26964
+ font-size: 0.875rem;
26965
+ line-height: 1.375rem;
26966
+ }
26967
+
25350
26968
  /* Component: pkt-timepicker */
25351
26969
  pkt-timepicker {
25352
26970
  display: block;
@@ -25358,11 +26976,28 @@ pkt-timepicker__anchor {
25358
26976
  }
25359
26977
  .pkt-timepicker .pkt-input__container,
25360
26978
  pkt-timepicker .pkt-input__container {
26979
+ min-height: 3rem;
26980
+ align-items: center;
25361
26981
  border: 2px solid var(--pkt-color-input-border-normal);
25362
26982
  background-color: var(--pkt-color-input-background-normal);
25363
26983
  width: fit-content;
25364
26984
  padding: 0 0 0 1rem;
25365
26985
  }
26986
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__input,
26987
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
26988
+ .pkt-timepicker .pkt-input__container .pkt-input-icon,
26989
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__button,
26990
+ pkt-timepicker .pkt-input__container .pkt-timepicker__input,
26991
+ pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
26992
+ pkt-timepicker .pkt-input__container .pkt-input-icon,
26993
+ pkt-timepicker .pkt-input__container .pkt-timepicker__button {
26994
+ border: 0;
26995
+ height: auto;
26996
+ min-height: 0;
26997
+ padding-top: 0;
26998
+ padding-bottom: 0;
26999
+ flex: 0 0 auto;
27000
+ }
25366
27001
  .pkt-timepicker .pkt-input__container .pkt-input,
25367
27002
  .pkt-timepicker .pkt-input__container .pkt-input-icon,
25368
27003
  .pkt-timepicker .pkt-input__container .pkt-input-separator,
@@ -25370,27 +27005,23 @@ pkt-timepicker .pkt-input__container .pkt-input,
25370
27005
  pkt-timepicker .pkt-input__container .pkt-input-icon,
25371
27006
  pkt-timepicker .pkt-input__container .pkt-input-separator {
25372
27007
  border: 0;
25373
- min-height: auto;
25374
- }
25375
- .pkt-timepicker .pkt-input__container:hover,
25376
- pkt-timepicker .pkt-input__container:hover {
25377
- border-color: var(--pkt-color-input-border-active);
25378
27008
  }
25379
- .pkt-timepicker .pkt-input__container:focus-within,
25380
- pkt-timepicker .pkt-input__container:focus-within {
25381
- border-color: var(--pkt-color-input-border-active);
25382
- outline: 2px solid var(--pkt-color-input-border-active);
27009
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__input,
27010
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
27011
+ pkt-timepicker .pkt-input__container .pkt-timepicker__input,
27012
+ pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
27013
+ letter-spacing: -0.2px;
27014
+ font-weight: 300;
27015
+ font-size: 1.125rem;
27016
+ line-height: 1.75rem;
25383
27017
  }
25384
- .pkt-timepicker .pkt-input__container:has(input:disabled),
25385
- pkt-timepicker .pkt-input__container:has(input:disabled) {
25386
- border-color: var(--pkt-color-input-border-disabled);
25387
- background-color: var(--pkt-color-surface-default-gray);
27018
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__input,
27019
+ pkt-timepicker .pkt-input__container .pkt-timepicker__input {
27020
+ padding-inline: 0;
25388
27021
  }
25389
- .pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
25390
- .pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
25391
- pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
25392
- pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
25393
- --fg-color: var(--pkt-color-input-text-disabled);
27022
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
27023
+ pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
27024
+ padding: 0;
25394
27025
  }
25395
27026
  .pkt-timepicker .pkt-input__container button.pkt-timepicker__button,
25396
27027
  pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
@@ -25399,8 +27030,10 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
25399
27030
  }
25400
27031
  .pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
25401
27032
  .pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27033
+ .pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg,
25402
27034
  pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
25403
- pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon {
27035
+ pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27036
+ pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg {
25404
27037
  width: 1.5rem;
25405
27038
  height: 1.5rem;
25406
27039
  }
@@ -25421,6 +27054,105 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicke
25421
27054
  pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next {
25422
27055
  margin-left: 0.25rem;
25423
27056
  }
27057
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__icon,
27058
+ pkt-timepicker .pkt-input__container .pkt-timepicker__icon {
27059
+ align-self: center;
27060
+ pointer-events: none;
27061
+ padding: 0 0.75rem 0 0;
27062
+ height: 1.5rem;
27063
+ width: -webkit-min-content;
27064
+ width: -moz-min-content;
27065
+ width: min-content;
27066
+ }
27067
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
27068
+ .pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg,
27069
+ pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
27070
+ pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg {
27071
+ width: 100%;
27072
+ height: 100%;
27073
+ }
27074
+ .pkt-timepicker .pkt-input__container:hover,
27075
+ pkt-timepicker .pkt-input__container:hover {
27076
+ border-color: var(--pkt-color-input-border-active);
27077
+ }
27078
+ .pkt-timepicker .pkt-input__container:focus-within,
27079
+ pkt-timepicker .pkt-input__container:focus-within {
27080
+ border-color: var(--pkt-color-input-border-active);
27081
+ outline: 2px solid var(--pkt-color-input-border-active);
27082
+ }
27083
+ .pkt-timepicker .pkt-input__container:has(input:disabled),
27084
+ pkt-timepicker .pkt-input__container:has(input:disabled) {
27085
+ border-color: var(--pkt-color-input-border-disabled);
27086
+ background-color: var(--pkt-color-surface-default-gray);
27087
+ }
27088
+ .pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
27089
+ .pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
27090
+ pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
27091
+ pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
27092
+ --fg-color: var(--pkt-color-input-text-disabled);
27093
+ }
27094
+ .pkt-timepicker--small .pkt-input__container,
27095
+ pkt-timepicker--small .pkt-input__container {
27096
+ min-height: 2.625rem;
27097
+ }
27098
+ .pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
27099
+ .pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator,
27100
+ pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
27101
+ pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator {
27102
+ letter-spacing: -0.2px;
27103
+ font-weight: 300;
27104
+ font-size: 1rem;
27105
+ line-height: 1.5rem;
27106
+ }
27107
+ .pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button,
27108
+ pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button {
27109
+ padding: 0 0.5rem;
27110
+ }
27111
+ .pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
27112
+ .pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27113
+ .pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg,
27114
+ pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
27115
+ pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27116
+ pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg {
27117
+ width: 1.25rem;
27118
+ height: 1.25rem;
27119
+ }
27120
+ .pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon,
27121
+ pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon {
27122
+ padding: 0 0.5rem 0 0;
27123
+ height: 1.25rem;
27124
+ }
27125
+ .pkt-timepicker--xsmall .pkt-input__container,
27126
+ pkt-timepicker--xsmall .pkt-input__container {
27127
+ min-height: 2.25rem;
27128
+ }
27129
+ .pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
27130
+ .pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator,
27131
+ pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
27132
+ pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator {
27133
+ letter-spacing: -0.2px;
27134
+ font-weight: 300;
27135
+ font-size: 0.875rem;
27136
+ line-height: 1.375rem;
27137
+ }
27138
+ .pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button,
27139
+ pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button {
27140
+ padding: 0 0.5rem;
27141
+ }
27142
+ .pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
27143
+ .pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27144
+ .pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg,
27145
+ pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
27146
+ pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
27147
+ pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg {
27148
+ width: 1.125rem;
27149
+ height: 1.125rem;
27150
+ }
27151
+ .pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon,
27152
+ pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon {
27153
+ padding: 0 0.5rem 0 0;
27154
+ height: 1.125rem;
27155
+ }
25424
27156
  .pkt-timepicker--stepper .pkt-input__container,
25425
27157
  pkt-timepicker--stepper .pkt-input__container {
25426
27158
  padding-left: 0;
@@ -25486,7 +27218,6 @@ pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__i
25486
27218
  pkt-timepicker__input {
25487
27219
  width: 1.5rem;
25488
27220
  text-align: center;
25489
- padding: 0.5rem 0;
25490
27221
  }
25491
27222
  .pkt-timepicker__input::-webkit-inner-spin-button, .pkt-timepicker__input::-webkit-outer-spin-button,
25492
27223
  pkt-timepicker__input::-webkit-inner-spin-button,
@@ -25501,26 +27232,8 @@ pkt-timepicker__input {
25501
27232
  }
25502
27233
  .pkt-timepicker__separator,
25503
27234
  pkt-timepicker__separator {
25504
- letter-spacing: -0.2px;
25505
- font-weight: 400;
25506
- font-size: 1.125rem;
25507
- line-height: 1.75rem;
25508
- padding: 0.25rem 0 0.5rem;
25509
27235
  user-select: none;
25510
27236
  }
25511
- .pkt-timepicker__icon,
25512
- pkt-timepicker__icon {
25513
- height: auto;
25514
- padding: 0 0.75rem 0 0;
25515
- pointer-events: none;
25516
- }
25517
- .pkt-timepicker__icon pkt-icon,
25518
- .pkt-timepicker__icon .pkt-icon,
25519
- pkt-timepicker__icon pkt-icon,
25520
- pkt-timepicker__icon .pkt-icon {
25521
- width: 1.5rem;
25522
- height: 1.5rem;
25523
- }
25524
27237
  .pkt-timepicker-popup,
25525
27238
  pkt-timepicker-popup {
25526
27239
  position: absolute;