@oslokommune/punkt-css 16.26.3 → 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 +93 -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 -3
  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 +58 -4
  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 -342
  47. package/dist/css/pkt-components.min.css +1 -1
  48. package/dist/css/pkt-docs.css +2077 -358
  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 -358
  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 -4
  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 +62 -6
  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/elements/button.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-btn--icon-only .pkt-btn__text{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-dark-blue-700);--spinner-color: var(--pkt-color-brand-blue-1000)}[data-mode=dark] .pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-neutrals-white);--spinner-color: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500)}[data-mode=dark] .pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-background-active: var(--pkt-color-brand-blue-500);--pkt-color-button-border-active: var(--pkt-color-brand-blue-500);--pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);--pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100)}[data-mode=dark] .pkt-btn--secondary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}pkt-button[disabled],pkt-button[data-disabled],pkt-button[isLoading]{pointer-events:none}.pkt-btn{border-radius:0;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:normal;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;background-color:var(--pkt-color-button-background-normal);border:2px solid var(--pkt-color-button-border-normal);color:var(--pkt-color-button-text-normal);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;text-align:left;align-items:center;justify-content:center;column-gap:.5rem;-webkit-appearance:none;appearance:none;width:fit-content}.pkt-btn--full,.pkt-btn--full .pkt-btn{display:flex;width:100%}.pkt-btn--full:not(.pkt-btn):not(pkt-button){flex-direction:column;gap:.5rem}@media screen and (max-width: 36rem){.pkt-btn--full-small,.pkt-btn--full-small .pkt-btn{display:flex;width:100%}}@media screen and (max-width: 36rem){.pkt-btn--full-small:not(.pkt-btn):not(pkt-button){flex-direction:column;gap:.5rem}}.pkt-btn{height:3rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-btn__icon,.pkt-btn__icon .pkt-icon{height:1.5rem;width:1.5rem}.pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner){display:none}.pkt-btn--icon-left{flex-direction:row}.pkt-btn--icon-right{flex-direction:row-reverse}.pkt-btn--icons-right-and-left{flex-direction:row}.pkt-btn--icon-only{padding:0 .625rem}.pkt-btn--small{height:2.625rem;padding:0 .5rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-btn--small .pkt-btn__icon,.pkt-btn--small .pkt-btn__icon .pkt-icon{height:1.25rem;width:1.25rem}.pkt-btn--small.pkt-btn--icon-only{padding:0 .5625rem}.pkt-btn--large{height:4rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}.pkt-btn--large .pkt-btn__icon,.pkt-btn--large .pkt-btn__icon .pkt-icon{height:2rem;width:2rem}.pkt-btn--large.pkt-btn--icon-only{padding:0 .875rem}.pkt-btn[class*=pkt-btn--icon]>.pkt-btn__icon{display:flex}.pkt-btn__icon{display:none}.pkt-btn__icon,.pkt-btn .pkt-icon{--fg-color: currentColor;flex-shrink:0}.pkt-btn:link,.pkt-btn:visited{color:var(--pkt-color-button-text-normal)}.pkt-btn:focus{outline:none}a.pkt-btn:focus-visible,div.pkt-btn:not([data-disabled]):focus-visible,.pkt-btn:enabled:focus-visible,.pkt-btn.pkt-btn:focus-visible,.pkt-btn.pkt-btn--focus,.pkt-btn--focus .pkt-btn{background-color:var(--pkt-color-button-background-focus);color:var(--pkt-color-button-text-focus);border-color:var(--pkt-color-button-border-focus);outline:4px solid var(--pkt-color-border-states-focus);text-decoration:none}a.pkt-btn:hover,div.pkt-btn:not([data-disabled]):hover,.pkt-btn:enabled:hover,.pkt-btn:hover:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--hover,.pkt-btn--hover .pkt-btn{background-color:var(--pkt-color-button-background-hover);border-color:var(--pkt-color-button-border-hover);color:var(--pkt-color-button-text-hover);outline:0;text-decoration:underline}a.pkt-btn:active,div.pkt-btn:not([data-disabled]):active,.pkt-btn:enabled:active,.pkt-btn:active:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover,.pkt-btn--active .pkt-btn{background-color:var(--pkt-color-button-background-active);border-color:var(--pkt-color-button-border-active);color:var(--pkt-color-button-text-active);text-decoration:none;cursor:inherit}.pkt-btn.pkt-btn--isLoading,.pkt-btn--isLoading .pkt-btn{pointer-events:none;cursor:inherit}.pkt-btn:disabled,.pkt-btn[disabled],.pkt-btn[data-disabled],.pkt-btn:disabled .pkt-btn{background-color:var(--pkt-color-button-background-disabled);border-color:var(--pkt-color-button-border-disabled);color:var(--pkt-color-button-text-disabled);cursor:inherit;pointer-events:none}.pkt-btn::-moz-focus-inner{border:0}.pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}
1
+ .pkt-btn--icon-only .pkt-btn__text{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-dark-blue-700);--spinner-color: var(--pkt-color-brand-blue-1000)}[data-mode=dark] .pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-neutrals-white);--spinner-color: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500)}[data-mode=dark] .pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-background-active: var(--pkt-color-brand-blue-500);--pkt-color-button-border-active: var(--pkt-color-brand-blue-500);--pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);--pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100)}[data-mode=dark] .pkt-btn--secondary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}pkt-button[disabled],pkt-button[data-disabled],pkt-button[isLoading]{pointer-events:none}.pkt-btn{border-radius:0;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:normal;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;background-color:var(--pkt-color-button-background-normal);border:2px solid var(--pkt-color-button-border-normal);color:var(--pkt-color-button-text-normal);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;text-align:left;align-items:center;justify-content:center;column-gap:.5rem;-webkit-appearance:none;appearance:none;width:fit-content}.pkt-btn--full,.pkt-btn--full .pkt-btn{display:flex;width:100%}.pkt-btn--full:not(.pkt-btn):not(pkt-button){flex-direction:column;gap:.5rem}@media screen and (max-width: 36rem){.pkt-btn--full-small,.pkt-btn--full-small .pkt-btn{display:flex;width:100%}}@media screen and (max-width: 36rem){.pkt-btn--full-small:not(.pkt-btn):not(pkt-button){flex-direction:column;gap:.5rem}}.pkt-btn{height:3rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-btn__icon,.pkt-btn__icon .pkt-icon{height:1.5rem;width:1.5rem}.pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner){display:none}.pkt-btn--icon-left{flex-direction:row}.pkt-btn--icon-right{flex-direction:row-reverse}.pkt-btn--icons-right-and-left{flex-direction:row}.pkt-btn--icon-only{padding:0 .625rem}.pkt-btn--xsmall{height:2.25rem;padding:0 .75rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-btn--xsmall .pkt-btn__icon,.pkt-btn--xsmall .pkt-btn__icon .pkt-icon{height:1.125rem;width:1.125rem}.pkt-btn--xsmall.pkt-btn--icon-only{padding:0 .4375rem}.pkt-btn--small{height:2.625rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-btn--small .pkt-btn__icon,.pkt-btn--small .pkt-btn__icon .pkt-icon{height:1.25rem;width:1.25rem}.pkt-btn--small.pkt-btn--icon-only{padding:0 .5625rem}.pkt-btn--large{height:4rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}.pkt-btn--large .pkt-btn__icon,.pkt-btn--large .pkt-btn__icon .pkt-icon{height:2rem;width:2rem}.pkt-btn--large.pkt-btn--icon-only{padding:0 .875rem}.pkt-btn[class*=pkt-btn--icon]>.pkt-btn__icon{display:flex}.pkt-btn__icon{display:none}.pkt-btn__icon,.pkt-btn .pkt-icon{--fg-color: currentColor;flex-shrink:0}.pkt-btn:link,.pkt-btn:visited{color:var(--pkt-color-button-text-normal)}.pkt-btn:focus{outline:none}a.pkt-btn:focus-visible,div.pkt-btn:not([data-disabled]):focus-visible,.pkt-btn:enabled:focus-visible,.pkt-btn.pkt-btn:focus-visible,.pkt-btn.pkt-btn--focus,.pkt-btn--focus .pkt-btn{background-color:var(--pkt-color-button-background-focus);color:var(--pkt-color-button-text-focus);border-color:var(--pkt-color-button-border-focus);outline:4px solid var(--pkt-color-border-states-focus);text-decoration:none}a.pkt-btn:hover,div.pkt-btn:not([data-disabled]):hover,.pkt-btn:enabled:hover,.pkt-btn:hover:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--hover,.pkt-btn--hover .pkt-btn{background-color:var(--pkt-color-button-background-hover);border-color:var(--pkt-color-button-border-hover);color:var(--pkt-color-button-text-hover);outline:0;text-decoration:underline}a.pkt-btn:active,div.pkt-btn:not([data-disabled]):active,.pkt-btn:enabled:active,.pkt-btn:active:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]),.pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover,.pkt-btn--active .pkt-btn{background-color:var(--pkt-color-button-background-active);border-color:var(--pkt-color-button-border-active);color:var(--pkt-color-button-text-active);text-decoration:none;cursor:inherit}.pkt-btn.pkt-btn--isLoading,.pkt-btn--isLoading .pkt-btn{pointer-events:none;cursor:inherit}.pkt-btn:disabled,.pkt-btn[disabled],.pkt-btn[data-disabled],.pkt-btn:disabled .pkt-btn{background-color:var(--pkt-color-button-background-disabled);border-color:var(--pkt-color-button-border-disabled);color:var(--pkt-color-button-text-disabled);cursor:inherit;pointer-events:none}.pkt-btn::-moz-focus-inner{border:0}.pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}
package/dist/css/elements/checkbox-radio.css CHANGED
@@ -96,7 +96,7 @@
96
96
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
97
97
  }
98
98
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
99
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/minus-sign.svg);
99
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/minus-sign.svg);
100
100
  position: relative;
101
101
  background-color: var(--pkt-color-input-border-normal);
102
102
  }
@@ -122,7 +122,7 @@
122
122
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
123
123
  }
124
124
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
125
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);
125
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);
126
126
  position: relative;
127
127
  background-color: var(--pkt-color-input-border-normal);
128
128
  }
@@ -180,7 +180,7 @@
180
180
  cursor: not-allowed;
181
181
  }
182
182
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
183
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);
183
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);
184
184
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
185
185
  filter: grayscale(100%) brightness(400%);
186
186
  }
package/dist/css/elements/checkbox-radio.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-input-check{display:flex;flex-direction:column;row-gap:1rem}.pkt-input-check__input{display:flex}.pkt-input-check__input-label{color:var(--pkt-color-text-body-default);padding-left:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-left:0;padding-right:.5rem}.pkt-input-check__input-helptext{padding-top:.5rem;max-width:21.875rem;color:var(--pkt-color-text-body-default);letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input-check__input:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox{appearance:none;background-color:var(--pkt-color-input-check-background);border:2px solid var(--pkt-color-input-check-border);width:1.5rem;height:1.5rem;flex-shrink:0}.pkt-input-check__input-checkbox[type=checkbox]{border-radius:0}.pkt-input-check__input-checkbox[type=checkbox][role=switch]{position:relative;height:calc(1.5rem + 2px);width:2.5rem;border-radius:calc(.75rem + 2px)}.pkt-input-check__input-checkbox[type=checkbox][role=switch]:after{display:block;content:"";border:2px solid var(--pkt-color-input-check-border);background-color:var(--pkt-color-input-check-background);position:absolute;top:-1px;bottom:-1px;left:-1px;width:1.5rem;border-radius:.75rem}.pkt-input-check__input-checkbox[type=radio]{border-radius:50%;border:none;width:1.25rem;height:1.25rem;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:focus-visible:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox[type=checkbox]:hover{--pkt-color-input-check-border: var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled){--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:6px solid var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox[type=checkbox]:focus-visible{--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input-check__input-checkbox[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);outline-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=radio]:focus-visible{border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]){--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/minus-sign.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[type=checkbox]{--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[role=switch]:after{left:calc(100% + 1px);transform:translate(-100%, 0);background-image:var(--svg);background-repeat:no-repeat}.pkt-input-check__input-checkbox:checked[type=radio]{background-color:var(--pkt-color-input-border-normal);border:3px solid var(--pkt-color-input-check-background);box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox:checked[type=checkbox]:hover{background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible{background-color:var(--pkt-color-input-border-active);border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:checked[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:disabled[type=checkbox]{background-color:var(--pkt-color-surface-default-gray);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after{--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/check-medium.svg);--pkt-color-input-check-border: var(--pkt-color-input-border-normal);filter:grayscale(100%) brightness(400%)}.pkt-input-check__input-checkbox:disabled[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray);cursor:not-allowed;outline-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=checkbox]{background-color:var(--pkt-color-input-border-disabled);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-label--disabled,.pkt-input-check__input-label--disabled .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label .pkt-input-check__input-helptext{color:var(--pkt-color-input-text-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox--error[type=checkbox]:not([role=switch]):checked:after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}.pkt-input-check__input-checkbox--error[type=checkbox],.pkt-input-check__input-checkbox--error[type=checkbox]:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled),.pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked:before{background-color:var(--pkt-color-surface-default-faded-red);--pkt-color-input-check-border: var(--pkt-color-input-border-error);outline-color:var(--pkt-color-input-border-error)}.pkt-input-check__input-checkbox--error[type=radio],.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled){box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input-check__input-checkbox--error[type=radio]:checked,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible+.pkt-input-check__input--tile{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input--tile{border:2px solid var(--pkt-color-border-subtle);width:21.875rem;max-width:100%;position:relative}.pkt-input-check__input--tile .pkt-input-check__input-label:before{content:""}.pkt-input-check__input--tile>.pkt-input-check__input-label{padding:1rem 1rem 1rem .5rem;width:100%}.pkt-input-check__input--tile>.pkt-input-check__input-checkbox{margin:1rem 0 1rem 1rem}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:checked:not(:disabled)+.pkt-input-check__input-label:before{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;top:-2px;border:2px solid var(--pkt-color-border-default);pointer-events:none}.pkt-input-check__input--tile:focus-within{background-color:var(--pkt-color-input-background-normal);border-color:var(--pkt-color-border-states-active);outline:4px solid var(--pkt-color-border-states-focus)}.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled){border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-active)}.pkt-input-check__input--tile:disabled{border-color:var(--pkt-color-border-states-disabled)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible{box-shadow:0px 0px 0px .125rem var(--pkt-color-border-states-active)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible{outline:none}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]:not([role=switch]):after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:not(:disabled){background-color:var(--pkt-color-input-border-hover);border-color:var(--pkt-color-input-border-hover)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:after{background-color:var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:disabled:not(:checked){background-color:rgba(0,0,0,0)}[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input),[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input):checked:checked{background-color:var(--pkt-color-surface-default-faded-red);border-color:var(--pkt-color-input-border-error)}
1
+ .pkt-input-check{display:flex;flex-direction:column;row-gap:1rem}.pkt-input-check__input{display:flex}.pkt-input-check__input-label{color:var(--pkt-color-text-body-default);padding-left:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-left:0;padding-right:.5rem}.pkt-input-check__input-helptext{padding-top:.5rem;max-width:21.875rem;color:var(--pkt-color-text-body-default);letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input-check__input:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox{appearance:none;background-color:var(--pkt-color-input-check-background);border:2px solid var(--pkt-color-input-check-border);width:1.5rem;height:1.5rem;flex-shrink:0}.pkt-input-check__input-checkbox[type=checkbox]{border-radius:0}.pkt-input-check__input-checkbox[type=checkbox][role=switch]{position:relative;height:calc(1.5rem + 2px);width:2.5rem;border-radius:calc(.75rem + 2px)}.pkt-input-check__input-checkbox[type=checkbox][role=switch]:after{display:block;content:"";border:2px solid var(--pkt-color-input-check-border);background-color:var(--pkt-color-input-check-background);position:absolute;top:-1px;bottom:-1px;left:-1px;width:1.5rem;border-radius:.75rem}.pkt-input-check__input-checkbox[type=radio]{border-radius:50%;border:none;width:1.25rem;height:1.25rem;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:focus-visible:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox[type=checkbox]:hover{--pkt-color-input-check-border: var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled){--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:6px solid var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox[type=checkbox]:focus-visible{--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input-check__input-checkbox[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);outline-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=radio]:focus-visible{border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]){--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/minus-sign.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[type=checkbox]{--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[role=switch]:after{left:calc(100% + 1px);transform:translate(-100%, 0);background-image:var(--svg);background-repeat:no-repeat}.pkt-input-check__input-checkbox:checked[type=radio]{background-color:var(--pkt-color-input-border-normal);border:3px solid var(--pkt-color-input-check-background);box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox:checked[type=checkbox]:hover{background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible{background-color:var(--pkt-color-input-border-active);border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:checked[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:disabled[type=checkbox]{background-color:var(--pkt-color-surface-default-gray);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after{--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/check-medium.svg);--pkt-color-input-check-border: var(--pkt-color-input-border-normal);filter:grayscale(100%) brightness(400%)}.pkt-input-check__input-checkbox:disabled[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray);cursor:not-allowed;outline-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=checkbox]{background-color:var(--pkt-color-input-border-disabled);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-label--disabled,.pkt-input-check__input-label--disabled .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label .pkt-input-check__input-helptext{color:var(--pkt-color-input-text-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox--error[type=checkbox]:not([role=switch]):checked:after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}.pkt-input-check__input-checkbox--error[type=checkbox],.pkt-input-check__input-checkbox--error[type=checkbox]:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled),.pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked:before{background-color:var(--pkt-color-surface-default-faded-red);--pkt-color-input-check-border: var(--pkt-color-input-border-error);outline-color:var(--pkt-color-input-border-error)}.pkt-input-check__input-checkbox--error[type=radio],.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled){box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input-check__input-checkbox--error[type=radio]:checked,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible+.pkt-input-check__input--tile{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input--tile{border:2px solid var(--pkt-color-border-subtle);width:21.875rem;max-width:100%;position:relative}.pkt-input-check__input--tile .pkt-input-check__input-label:before{content:""}.pkt-input-check__input--tile>.pkt-input-check__input-label{padding:1rem 1rem 1rem .5rem;width:100%}.pkt-input-check__input--tile>.pkt-input-check__input-checkbox{margin:1rem 0 1rem 1rem}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:checked:not(:disabled)+.pkt-input-check__input-label:before{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;top:-2px;border:2px solid var(--pkt-color-border-default);pointer-events:none}.pkt-input-check__input--tile:focus-within{background-color:var(--pkt-color-input-background-normal);border-color:var(--pkt-color-border-states-active);outline:4px solid var(--pkt-color-border-states-focus)}.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled){border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-active)}.pkt-input-check__input--tile:disabled{border-color:var(--pkt-color-border-states-disabled)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible{box-shadow:0px 0px 0px .125rem var(--pkt-color-border-states-active)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible{outline:none}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]:not([role=switch]):after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:not(:disabled){background-color:var(--pkt-color-input-border-hover);border-color:var(--pkt-color-input-border-hover)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:after{background-color:var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:disabled:not(:checked){background-color:rgba(0,0,0,0)}[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input),[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input):checked:checked{background-color:var(--pkt-color-surface-default-faded-red);border-color:var(--pkt-color-input-border-error)}
package/dist/css/elements/input.css CHANGED
@@ -15,13 +15,37 @@ pkt-select {
15
15
  color: var(--pkt-color-input-text-normal);
16
16
  margin: 0;
17
17
  padding: 0.5rem 1rem;
18
+ min-height: 3rem;
18
19
  letter-spacing: -0.2px;
19
20
  font-weight: 300;
20
21
  font-size: 1.125rem;
21
22
  line-height: 1.75rem;
22
23
  }
23
- .pkt-input:not(.pkt-input-compact) {
24
- min-height: 3rem;
24
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
25
+ min-height: 2.625rem;
26
+ padding: 0.375rem 1rem;
27
+ letter-spacing: -0.2px;
28
+ font-weight: 300;
29
+ font-size: 1rem;
30
+ line-height: 1.5rem;
31
+ }
32
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
33
+ height: 2.625rem;
34
+ }
35
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
36
+ min-height: 2.25rem;
37
+ padding: 0.25rem 0.75rem;
38
+ letter-spacing: -0.2px;
39
+ font-weight: 300;
40
+ font-size: 0.875rem;
41
+ line-height: 1.375rem;
42
+ }
43
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
44
+ height: 2.25rem;
45
+ }
46
+ .pkt-input input.pkt-input,
47
+ .pkt-input select.pkt-input {
48
+ display: block;
25
49
  }
26
50
  .pkt-input-compact.pkt-input {
27
51
  border: 0;
@@ -36,7 +60,7 @@ pkt-select {
36
60
  background-position: right 0 top 50%;
37
61
  padding-right: 2rem;
38
62
  }
39
- .pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .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))) {
63
+ .pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .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))) {
40
64
  width: min(31rem, 100%);
41
65
  }
42
66
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
@@ -48,8 +72,8 @@ pkt-select {
48
72
  [fullwidth] .pkt-input__counter {
49
73
  width: 100%;
50
74
  }
51
- .pkt-input:is(textarea) {
52
- min-height: 8rem;
75
+ .pkt-input:is(textarea:not([rows])) {
76
+ min-height: 9.25rem;
53
77
  }
54
78
  .pkt-input:is(select) {
55
79
  appearance: none;
@@ -58,12 +82,22 @@ pkt-select {
58
82
  padding-right: 3rem;
59
83
  }
60
84
  .pkt-input:is(select):not([multiple]) {
61
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);
85
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
62
86
  background-image: var(--svg);
63
87
  background-repeat: no-repeat;
64
88
  background-position: right 0.7rem top 50%;
65
89
  background-size: 1.5rem auto, 100%;
66
90
  }
91
+ .pkt-input:is(select):not([multiple]).pkt-input--small {
92
+ background-size: 1.25rem auto, 100%;
93
+ background-position: right 0.5rem top 50%;
94
+ padding: 0.375rem 2.5rem 0.375rem 1rem;
95
+ }
96
+ .pkt-input:is(select):not([multiple]).pkt-input--xsmall {
97
+ background-size: 1.125rem auto, 100%;
98
+ background-position: right 0.5rem top 50%;
99
+ padding: 0.25rem 2.25rem 0.25rem 0.75rem;
100
+ }
67
101
  .pkt-input:is(select) option {
68
102
  background-color: var(--pkt-color-input-background-normal);
69
103
  color: var(--pkt-color-input-text-normal);
@@ -154,6 +188,87 @@ pkt-select {
154
188
  .pkt-input-separator {
155
189
  padding: 0.5rem 0;
156
190
  }
191
+ .pkt-input__container--small {
192
+ align-items: stretch;
193
+ }
194
+ .pkt-input__container--small .pkt-input-prefix,
195
+ .pkt-input__container--small .pkt-input-suffix,
196
+ .pkt-input__container--small .pkt-input-icon {
197
+ height: auto;
198
+ min-height: 2.625rem;
199
+ letter-spacing: -0.2px;
200
+ font-weight: 300;
201
+ font-size: 1rem;
202
+ line-height: 1.5rem;
203
+ }
204
+ .pkt-input__container--small .pkt-input-prefix {
205
+ padding: 0.375rem 0 0.375rem 1rem;
206
+ }
207
+ .pkt-input__container--small .pkt-input-suffix {
208
+ padding: 0.375rem 1rem 0.375rem 0;
209
+ }
210
+ .pkt-input__container--small input.pkt-input,
211
+ .pkt-input__container--small select.pkt-input {
212
+ height: auto;
213
+ min-height: 2.625rem;
214
+ flex: 1 1 auto;
215
+ min-width: 0;
216
+ padding: 0.375rem 1rem;
217
+ letter-spacing: -0.2px;
218
+ font-weight: 300;
219
+ font-size: 1rem;
220
+ line-height: 1.5rem;
221
+ }
222
+ .pkt-input__container--small .pkt-input-icon svg,
223
+ .pkt-input__container--small .pkt-input-suffix svg {
224
+ width: 1.25rem;
225
+ height: 1.25rem;
226
+ }
227
+ .pkt-input__container--small .pkt-input-suffix::before {
228
+ height: 1.25rem;
229
+ }
230
+ .pkt-input__container--xsmall {
231
+ align-items: stretch;
232
+ }
233
+ .pkt-input__container--xsmall .pkt-input-prefix,
234
+ .pkt-input__container--xsmall .pkt-input-suffix,
235
+ .pkt-input__container--xsmall .pkt-input-icon {
236
+ height: auto;
237
+ min-height: 2.25rem;
238
+ letter-spacing: -0.2px;
239
+ font-weight: 300;
240
+ font-size: 0.875rem;
241
+ line-height: 1.375rem;
242
+ }
243
+ .pkt-input__container--xsmall .pkt-input-prefix {
244
+ padding: 0.25rem 0 0.25rem 0.75rem;
245
+ }
246
+ .pkt-input__container--xsmall .pkt-input-suffix {
247
+ padding: 0.25rem 0.75rem 0.25rem 0;
248
+ }
249
+ .pkt-input__container--xsmall input.pkt-input,
250
+ .pkt-input__container--xsmall select.pkt-input {
251
+ height: auto;
252
+ min-height: 2.25rem;
253
+ flex: 1 1 auto;
254
+ min-width: 0;
255
+ padding: 0.25rem 0.75rem;
256
+ letter-spacing: -0.2px;
257
+ font-weight: 300;
258
+ font-size: 0.875rem;
259
+ line-height: 1.375rem;
260
+ }
261
+ .pkt-input__container--xsmall .pkt-input-icon {
262
+ padding: 0.25rem 0.5rem;
263
+ }
264
+ .pkt-input__container--xsmall .pkt-input-icon svg,
265
+ .pkt-input__container--xsmall .pkt-input-suffix svg {
266
+ width: 1.125rem;
267
+ height: 1.125rem;
268
+ }
269
+ .pkt-input__container--xsmall .pkt-input-suffix::before {
270
+ height: 1.125rem;
271
+ }
157
272
  .pkt-input--counter-error, .pkt-input--counter-error:focus {
158
273
  border-color: var(--pkt-color-input-border-error);
159
274
  background-color: var(--pkt-color-surface-default-faded-red);
package/dist/css/elements/input.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.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))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea){min-height:8rem}.pkt-input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-input.pkt-input--hover{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus{outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-input.pkt-input__textinput--focus{outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible{outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible{outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;min-height:3rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.625rem;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.625rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.25rem;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.25rem}.pkt-input input.pkt-input,.pkt-input select.pkt-input{display:block}.pkt-input-compact.pkt-input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.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))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea:not([rows])){min-height:9.25rem}.pkt-input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select):not([multiple]).pkt-input--small{background-size:1.25rem auto,100%;background-position:right .5rem top 50%;padding:.375rem 2.5rem .375rem 1rem}.pkt-input:is(select):not([multiple]).pkt-input--xsmall{background-size:1.125rem auto,100%;background-position:right .5rem top 50%;padding:.25rem 2.25rem .25rem .75rem}.pkt-input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-input.pkt-input--hover{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus{outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-input.pkt-input__textinput--focus{outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible{outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input__container--small{align-items:stretch}.pkt-input__container--small .pkt-input-prefix,.pkt-input__container--small .pkt-input-suffix,.pkt-input__container--small .pkt-input-icon{height:auto;min-height:2.625rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-prefix{padding:.375rem 0 .375rem 1rem}.pkt-input__container--small .pkt-input-suffix{padding:.375rem 1rem .375rem 0}.pkt-input__container--small input.pkt-input,.pkt-input__container--small select.pkt-input{height:auto;min-height:2.625rem;flex:1 1 auto;min-width:0;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-icon svg,.pkt-input__container--small .pkt-input-suffix svg{width:1.25rem;height:1.25rem}.pkt-input__container--small .pkt-input-suffix::before{height:1.25rem}.pkt-input__container--xsmall{align-items:stretch}.pkt-input__container--xsmall .pkt-input-prefix,.pkt-input__container--xsmall .pkt-input-suffix,.pkt-input__container--xsmall .pkt-input-icon{height:auto;min-height:2.25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-prefix{padding:.25rem 0 .25rem .75rem}.pkt-input__container--xsmall .pkt-input-suffix{padding:.25rem .75rem .25rem 0}.pkt-input__container--xsmall input.pkt-input,.pkt-input__container--xsmall select.pkt-input{height:auto;min-height:2.25rem;flex:1 1 auto;min-width:0;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-icon{padding:.25rem .5rem}.pkt-input__container--xsmall .pkt-input-icon svg,.pkt-input__container--xsmall .pkt-input-suffix svg{width:1.125rem;height:1.125rem}.pkt-input__container--xsmall .pkt-input-suffix::before{height:1.125rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible{outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
package/dist/css/elements/select.css CHANGED
@@ -22,14 +22,43 @@ pkt-select {
22
22
  color: var(--pkt-color-input-text-normal);
23
23
  margin: 0;
24
24
  padding: 0.5rem 1rem;
25
+ min-height: 3rem;
25
26
  letter-spacing: -0.2px;
26
27
  font-weight: 300;
27
28
  font-size: 1.125rem;
28
29
  line-height: 1.75rem;
29
30
  }
30
- .pkt-input:not(.pkt-input-compact), .pkt-select select:not(.pkt-input-compact),
31
- .pkt-select:not(.pkt-input-compact):is(select) {
32
- min-height: 3rem;
31
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
32
+ min-height: 2.625rem;
33
+ padding: 0.375rem 1rem;
34
+ letter-spacing: -0.2px;
35
+ font-weight: 300;
36
+ font-size: 1rem;
37
+ line-height: 1.5rem;
38
+ }
39
+ .pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
40
+ height: 2.625rem;
41
+ }
42
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
43
+ min-height: 2.25rem;
44
+ padding: 0.25rem 0.75rem;
45
+ letter-spacing: -0.2px;
46
+ font-weight: 300;
47
+ font-size: 0.875rem;
48
+ line-height: 1.375rem;
49
+ }
50
+ .pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
51
+ height: 2.25rem;
52
+ }
53
+ .pkt-input input.pkt-input, .pkt-select select input.pkt-input,
54
+ .pkt-select:is(select) input.pkt-input,
55
+ .pkt-input select.pkt-input,
56
+ .pkt-input .pkt-select select,
57
+ .pkt-select .pkt-input select,
58
+ .pkt-select select select,
59
+ .pkt-select:is(select) select,
60
+ .pkt-input select.pkt-select:is(select) {
61
+ display: block;
33
62
  }
34
63
  .pkt-input-compact.pkt-input, .pkt-select select.pkt-input-compact,
35
64
  .pkt-input-compact.pkt-select:is(select) {
@@ -46,8 +75,8 @@ pkt-select {
46
75
  background-position: right 0 top 50%;
47
76
  padding-right: 2rem;
48
77
  }
49
- .pkt-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)),
50
- .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))) {
78
+ .pkt-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)),
79
+ .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))) {
51
80
  width: min(31rem, 100%);
52
81
  }
53
82
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
@@ -59,9 +88,9 @@ pkt-select {
59
88
  [fullwidth] .pkt-input__counter {
60
89
  width: 100%;
61
90
  }
62
- .pkt-input:is(textarea), .pkt-select select:is(textarea),
63
- .pkt-select:is(textarea):is(select) {
64
- min-height: 8rem;
91
+ .pkt-input:is(textarea:not([rows])), .pkt-select select:is(textarea:not([rows])),
92
+ .pkt-select:is(textarea:not([rows])):is(select) {
93
+ min-height: 9.25rem;
65
94
  }
66
95
  .pkt-input:is(select), .pkt-select select:is(select),
67
96
  .pkt-select:is(select) {
@@ -72,12 +101,24 @@ pkt-select {
72
101
  }
73
102
  .pkt-input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
74
103
  .pkt-select:is(select):not([multiple]) {
75
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);
104
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
76
105
  background-image: var(--svg);
77
106
  background-repeat: no-repeat;
78
107
  background-position: right 0.7rem top 50%;
79
108
  background-size: 1.5rem auto, 100%;
80
109
  }
110
+ .pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-select select:is(select):not([multiple]).pkt-input--small,
111
+ .pkt-select:is(select):not([multiple]).pkt-input--small {
112
+ background-size: 1.25rem auto, 100%;
113
+ background-position: right 0.5rem top 50%;
114
+ padding: 0.375rem 2.5rem 0.375rem 1rem;
115
+ }
116
+ .pkt-input:is(select):not([multiple]).pkt-input--xsmall, .pkt-select select:is(select):not([multiple]).pkt-input--xsmall,
117
+ .pkt-select:is(select):not([multiple]).pkt-input--xsmall {
118
+ background-size: 1.125rem auto, 100%;
119
+ background-position: right 0.5rem top 50%;
120
+ padding: 0.25rem 2.25rem 0.25rem 0.75rem;
121
+ }
81
122
  .pkt-input:is(select) option, .pkt-select select:is(select) option,
82
123
  .pkt-select:is(select) option {
83
124
  background-color: var(--pkt-color-input-background-normal);
@@ -180,6 +221,93 @@ pkt-select {
180
221
  .pkt-input-separator {
181
222
  padding: 0.5rem 0;
182
223
  }
224
+ .pkt-input__container--small {
225
+ align-items: stretch;
226
+ }
227
+ .pkt-input__container--small .pkt-input-prefix,
228
+ .pkt-input__container--small .pkt-input-suffix,
229
+ .pkt-input__container--small .pkt-input-icon {
230
+ height: auto;
231
+ min-height: 2.625rem;
232
+ letter-spacing: -0.2px;
233
+ font-weight: 300;
234
+ font-size: 1rem;
235
+ line-height: 1.5rem;
236
+ }
237
+ .pkt-input__container--small .pkt-input-prefix {
238
+ padding: 0.375rem 0 0.375rem 1rem;
239
+ }
240
+ .pkt-input__container--small .pkt-input-suffix {
241
+ padding: 0.375rem 1rem 0.375rem 0;
242
+ }
243
+ .pkt-input__container--small input.pkt-input,
244
+ .pkt-input__container--small select.pkt-input,
245
+ .pkt-input__container--small .pkt-select select,
246
+ .pkt-select .pkt-input__container--small select,
247
+ .pkt-input__container--small select.pkt-select:is(select) {
248
+ height: auto;
249
+ min-height: 2.625rem;
250
+ flex: 1 1 auto;
251
+ min-width: 0;
252
+ padding: 0.375rem 1rem;
253
+ letter-spacing: -0.2px;
254
+ font-weight: 300;
255
+ font-size: 1rem;
256
+ line-height: 1.5rem;
257
+ }
258
+ .pkt-input__container--small .pkt-input-icon svg,
259
+ .pkt-input__container--small .pkt-input-suffix svg {
260
+ width: 1.25rem;
261
+ height: 1.25rem;
262
+ }
263
+ .pkt-input__container--small .pkt-input-suffix::before {
264
+ height: 1.25rem;
265
+ }
266
+ .pkt-input__container--xsmall {
267
+ align-items: stretch;
268
+ }
269
+ .pkt-input__container--xsmall .pkt-input-prefix,
270
+ .pkt-input__container--xsmall .pkt-input-suffix,
271
+ .pkt-input__container--xsmall .pkt-input-icon {
272
+ height: auto;
273
+ min-height: 2.25rem;
274
+ letter-spacing: -0.2px;
275
+ font-weight: 300;
276
+ font-size: 0.875rem;
277
+ line-height: 1.375rem;
278
+ }
279
+ .pkt-input__container--xsmall .pkt-input-prefix {
280
+ padding: 0.25rem 0 0.25rem 0.75rem;
281
+ }
282
+ .pkt-input__container--xsmall .pkt-input-suffix {
283
+ padding: 0.25rem 0.75rem 0.25rem 0;
284
+ }
285
+ .pkt-input__container--xsmall input.pkt-input,
286
+ .pkt-input__container--xsmall select.pkt-input,
287
+ .pkt-input__container--xsmall .pkt-select select,
288
+ .pkt-select .pkt-input__container--xsmall select,
289
+ .pkt-input__container--xsmall select.pkt-select:is(select) {
290
+ height: auto;
291
+ min-height: 2.25rem;
292
+ flex: 1 1 auto;
293
+ min-width: 0;
294
+ padding: 0.25rem 0.75rem;
295
+ letter-spacing: -0.2px;
296
+ font-weight: 300;
297
+ font-size: 0.875rem;
298
+ line-height: 1.375rem;
299
+ }
300
+ .pkt-input__container--xsmall .pkt-input-icon {
301
+ padding: 0.25rem 0.5rem;
302
+ }
303
+ .pkt-input__container--xsmall .pkt-input-icon svg,
304
+ .pkt-input__container--xsmall .pkt-input-suffix svg {
305
+ width: 1.125rem;
306
+ height: 1.125rem;
307
+ }
308
+ .pkt-input__container--xsmall .pkt-input-suffix::before {
309
+ height: 1.125rem;
310
+ }
183
311
  .pkt-input--counter-error, .pkt-input--counter-error:focus {
184
312
  border-color: var(--pkt-color-input-border-error);
185
313
  background-color: var(--pkt-color-surface-default-faded-red);
package/dist/css/elements/select.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-select select,.pkt-select:is(select){display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-select select:not(.pkt-input-compact),.pkt-select:not(.pkt-input-compact):is(select){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-select select.pkt-input-compact,.pkt-input-compact.pkt-select:is(select){border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-select select.pkt-input-compact:is(select):not([multiple]),.pkt-input-compact.pkt-select:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-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)),.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))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-select select:is(textarea),.pkt-select:is(textarea):is(select){min-height:8rem}.pkt-input:is(select),.pkt-select select:is(select),.pkt-select:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-select select:is(select):not([multiple]),.pkt-select:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-select select:is(select) option,.pkt-select:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-select select::placeholder,.pkt-select:is(select)::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-select select:hover,.pkt-select:hover:is(select),.pkt-input.pkt-input--hover,.pkt-select select.pkt-input--hover,.pkt-input--hover.pkt-select:is(select){border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-select select:focus-visible,.pkt-select:focus-visible:is(select),.pkt-input.pkt-input__textinput--focus,.pkt-select select.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-select:is(select){outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-select:focus-visible:is(select){outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-select select:disabled,.pkt-select:disabled:is(select),.pkt-input:disabled::placeholder,.pkt-select select:disabled::placeholder,.pkt-select:disabled:is(select)::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),.pkt-select select[readonly]:not(.ios-readonly-hack),[readonly].pkt-select:not(.ios-readonly-hack):is(select){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-select select:disabled:active,.pkt-select:disabled:active:is(select){border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-select select:not(:disabled),.pkt-select .pkt-input__container:hover select:not(:disabled),.pkt-input__container:hover .pkt-select:not(:disabled):is(select),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-select select,.pkt-select .pkt-input__container:focus-within select,.pkt-input__container:focus-within .pkt-select:is(select),.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select:focus-visible:is(select){outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-select select,.pkt-select .pkt-input__range-inputs .pkt-input__container select,.pkt-input__range-inputs .pkt-input__container .pkt-select:is(select){border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range,.pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select){padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-select select,.pkt-select:is(select){display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;min-height:3rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.625rem;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.625rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.25rem;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.25rem}.pkt-input input.pkt-input,.pkt-select select input.pkt-input,.pkt-select:is(select) input.pkt-input,.pkt-input select.pkt-input,.pkt-input .pkt-select select,.pkt-select .pkt-input select,.pkt-select select select,.pkt-select:is(select) select,.pkt-input select.pkt-select:is(select){display:block}.pkt-input-compact.pkt-input,.pkt-select select.pkt-input-compact,.pkt-input-compact.pkt-select:is(select){border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-select select.pkt-input-compact:is(select):not([multiple]),.pkt-input-compact.pkt-select:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-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)),.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))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea:not([rows])),.pkt-select select:is(textarea:not([rows])),.pkt-select:is(textarea:not([rows])):is(select){min-height:9.25rem}.pkt-input:is(select),.pkt-select select:is(select),.pkt-select:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-select select:is(select):not([multiple]),.pkt-select:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select):not([multiple]).pkt-input--small,.pkt-select select:is(select):not([multiple]).pkt-input--small,.pkt-select:is(select):not([multiple]).pkt-input--small{background-size:1.25rem auto,100%;background-position:right .5rem top 50%;padding:.375rem 2.5rem .375rem 1rem}.pkt-input:is(select):not([multiple]).pkt-input--xsmall,.pkt-select select:is(select):not([multiple]).pkt-input--xsmall,.pkt-select:is(select):not([multiple]).pkt-input--xsmall{background-size:1.125rem auto,100%;background-position:right .5rem top 50%;padding:.25rem 2.25rem .25rem .75rem}.pkt-input:is(select) option,.pkt-select select:is(select) option,.pkt-select:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-select select::placeholder,.pkt-select:is(select)::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-select select:hover,.pkt-select:hover:is(select),.pkt-input.pkt-input--hover,.pkt-select select.pkt-input--hover,.pkt-input--hover.pkt-select:is(select){border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-select select:focus-visible,.pkt-select:focus-visible:is(select),.pkt-input.pkt-input__textinput--focus,.pkt-select select.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-select:is(select){outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-select:focus-visible:is(select){outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-select select:disabled,.pkt-select:disabled:is(select),.pkt-input:disabled::placeholder,.pkt-select select:disabled::placeholder,.pkt-select:disabled:is(select)::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),.pkt-select select[readonly]:not(.ios-readonly-hack),[readonly].pkt-select:not(.ios-readonly-hack):is(select){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-select select:disabled:active,.pkt-select:disabled:active:is(select){border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input__container--small{align-items:stretch}.pkt-input__container--small .pkt-input-prefix,.pkt-input__container--small .pkt-input-suffix,.pkt-input__container--small .pkt-input-icon{height:auto;min-height:2.625rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-prefix{padding:.375rem 0 .375rem 1rem}.pkt-input__container--small .pkt-input-suffix{padding:.375rem 1rem .375rem 0}.pkt-input__container--small input.pkt-input,.pkt-input__container--small select.pkt-input,.pkt-input__container--small .pkt-select select,.pkt-select .pkt-input__container--small select,.pkt-input__container--small select.pkt-select:is(select){height:auto;min-height:2.625rem;flex:1 1 auto;min-width:0;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-icon svg,.pkt-input__container--small .pkt-input-suffix svg{width:1.25rem;height:1.25rem}.pkt-input__container--small .pkt-input-suffix::before{height:1.25rem}.pkt-input__container--xsmall{align-items:stretch}.pkt-input__container--xsmall .pkt-input-prefix,.pkt-input__container--xsmall .pkt-input-suffix,.pkt-input__container--xsmall .pkt-input-icon{height:auto;min-height:2.25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-prefix{padding:.25rem 0 .25rem .75rem}.pkt-input__container--xsmall .pkt-input-suffix{padding:.25rem .75rem .25rem 0}.pkt-input__container--xsmall input.pkt-input,.pkt-input__container--xsmall select.pkt-input,.pkt-input__container--xsmall .pkt-select select,.pkt-select .pkt-input__container--xsmall select,.pkt-input__container--xsmall select.pkt-select:is(select){height:auto;min-height:2.25rem;flex:1 1 auto;min-width:0;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-icon{padding:.25rem .5rem}.pkt-input__container--xsmall .pkt-input-icon svg,.pkt-input__container--xsmall .pkt-input-suffix svg{width:1.125rem;height:1.125rem}.pkt-input__container--xsmall .pkt-input-suffix::before{height:1.125rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-select select:not(:disabled),.pkt-select .pkt-input__container:hover select:not(:disabled),.pkt-input__container:hover .pkt-select:not(:disabled):is(select),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-select select,.pkt-select .pkt-input__container:focus-within select,.pkt-input__container:focus-within .pkt-select:is(select),.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select:focus-visible:is(select){outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-select select,.pkt-select .pkt-input__range-inputs .pkt-input__container select,.pkt-input__range-inputs .pkt-input__container .pkt-select:is(select){border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range,.pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select){padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}