@oslokommune/punkt-css 17.1.3 → 18.3.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 (84) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/components/calendar.css +2 -2
  3. package/dist/css/components/calendar.min.css +1 -1
  4. package/dist/css/components/card.css +3 -3
  5. package/dist/css/components/card.min.css +1 -1
  6. package/dist/css/components/fileupload.css +7 -7
  7. package/dist/css/components/fileupload.min.css +1 -1
  8. package/dist/css/components/footer.css +1 -1
  9. package/dist/css/components/footer.min.css +1 -1
  10. package/dist/css/components/header.css +1 -1
  11. package/dist/css/components/header.min.css +1 -1
  12. package/dist/css/components/inputwrapper.css +1 -1
  13. package/dist/css/components/inputwrapper.min.css +1 -1
  14. package/dist/css/components/listbox.css +2 -2
  15. package/dist/css/components/listbox.min.css +1 -1
  16. package/dist/css/components/loader.css +4 -4
  17. package/dist/css/components/loader.min.css +1 -1
  18. package/dist/css/components/modal.css +1 -1
  19. package/dist/css/components/modal.min.css +1 -1
  20. package/dist/css/components/progressbar.css +1 -1
  21. package/dist/css/components/progressbar.min.css +1 -1
  22. package/dist/css/components/stepper.css +5 -5
  23. package/dist/css/components/stepper.min.css +1 -1
  24. package/dist/css/components/tag.css +4 -18
  25. package/dist/css/components/tag.min.css +1 -1
  26. package/dist/css/elements/button.css +70 -48
  27. package/dist/css/elements/button.min.css +1 -1
  28. package/dist/css/elements/checkbox-radio.css +3 -3
  29. package/dist/css/elements/checkbox-radio.min.css +1 -1
  30. package/dist/css/elements/form.css +4 -4
  31. package/dist/css/elements/form.min.css +1 -1
  32. package/dist/css/elements/hr.css +1 -1
  33. package/dist/css/elements/hr.min.css +1 -1
  34. package/dist/css/elements/input.css +1 -1
  35. package/dist/css/elements/input.min.css +1 -1
  36. package/dist/css/elements/list.css +1 -1
  37. package/dist/css/elements/list.min.css +1 -1
  38. package/dist/css/elements/section.css +11 -108
  39. package/dist/css/elements/section.min.css +1 -1
  40. package/dist/css/pkt-base.css +708 -75
  41. package/dist/css/pkt-base.min.css +1 -1
  42. package/dist/css/pkt-components.css +32 -88
  43. package/dist/css/pkt-components.min.css +1 -1
  44. package/dist/css/pkt-docs.css +832 -330
  45. package/dist/css/pkt-docs.min.css +1 -1
  46. package/dist/css/pkt-elements.css +91 -166
  47. package/dist/css/pkt-elements.min.css +1 -1
  48. package/dist/css/pkt-tokens.css +113 -68
  49. package/dist/css/pkt-tokens.min.css +1 -1
  50. package/dist/css/pkt-utilities.css +594 -6
  51. package/dist/css/pkt-utilities.min.css +1 -1
  52. package/dist/css/pkt.css +831 -329
  53. package/dist/css/pkt.layer.css +684 -322
  54. package/dist/css/pkt.layer.min.css +1 -1
  55. package/dist/css/pkt.min.css +1 -1
  56. package/dist/scss/abstracts/functions/_index.scss +25 -0
  57. package/dist/scss/abstracts/variables/_colors.scss +155 -68
  58. package/dist/scss/abstracts/variables/_index.scss +1 -1
  59. package/dist/scss/base/_colors-tokens.scss +9 -75
  60. package/dist/scss/components/_calendar.scss +2 -2
  61. package/dist/scss/components/_card.scss +3 -3
  62. package/dist/scss/components/_fileupload.scss +8 -7
  63. package/dist/scss/components/_footer.scss +6 -5
  64. package/dist/scss/components/_header-service-mobile.scss +3 -2
  65. package/dist/scss/components/_header-shared.scss +3 -2
  66. package/dist/scss/components/_header.scss +1 -1
  67. package/dist/scss/components/_index.scss +0 -1
  68. package/dist/scss/components/_inputwrapper.scss +1 -1
  69. package/dist/scss/components/_listbox.scss +4 -2
  70. package/dist/scss/components/_loader.scss +5 -4
  71. package/dist/scss/components/_modal.scss +2 -1
  72. package/dist/scss/components/_progressbar.scss +1 -1
  73. package/dist/scss/components/_stepper.scss +5 -5
  74. package/dist/scss/components/_tag.scss +5 -17
  75. package/dist/scss/elements/_button.scss +71 -67
  76. package/dist/scss/elements/_form.scss +4 -4
  77. package/dist/scss/elements/_hr.scss +1 -1
  78. package/dist/scss/elements/_list.scss +3 -3
  79. package/dist/scss/elements/_section.scss +12 -40
  80. package/dist/scss/pkt-docs.scss +3 -1
  81. package/package.json +3 -3
  82. package/dist/css/components/badge.css +0 -41
  83. package/dist/css/components/badge.min.css +0 -1
  84. package/dist/scss/components/_badge.scss +0 -60
package/dist/css/components/stepper.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-stepper{--pkt-steps-indicator-width: 24px;--pkt-steps-indicator-height: 24px;--pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);--pkt-steps-border-width: 2.5px;--pkt-steps-line-length: 1.5rem;color:var(--pkt-color-brand-dark-blue-1000);font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;list-style:none;margin:0;padding:0}.pkt-stepper .pkt-step{display:grid}.pkt-stepper .pkt-step__wrapper{grid-column:title/content;grid-row:title/content}.pkt-stepper .pkt-step__title{font-weight:500;width:max-content;width:100%}.pkt-stepper .pkt-step__content{font-weight:300;padding-block-end:1.5rem;width:100%}.pkt-stepper .pkt-step__indicator{z-index:2;grid-area:indicator}.pkt-stepper .pkt-step__line{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-stepper .pkt-step__line--1{grid-area:indicator}.pkt-stepper .pkt-step__line--2{grid-area:indicator}.pkt-stepper .pkt-step__line--3{grid-area:line;height:fit-content}.pkt-stepper .pkt-step__nav-wrapper{display:flex;gap:20px;margin-block-start:1rem}.pkt-stepper--vertical{display:grid;grid-template-columns:1fr}.pkt-stepper--vertical .pkt-step{grid-template-areas:"indicator title" "line content";grid-template-columns:var(--pkt-steps-indicator-width) auto;grid-template-rows:var(--pkt-steps-indicator-height) minmax(min-content, max-content);grid-gap:0 1rem;justify-items:flex-start}.pkt-stepper--vertical .pkt-step--current .pkt-step__title,.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding:1rem 1.5rem;background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding-block-start:0}.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper{margin-block-end:1.5rem}.pkt-stepper--vertical .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--vertical .pkt-step__line{min-height:min-content;height:100%;margin:auto;width:var(--pkt-steps-border-width)}.pkt-stepper--vertical .pkt-step__line--1{height:50%;transform:translateY(-55%)}.pkt-stepper--vertical .pkt-step__line--2{height:50%;transform:translateY(55%)}.pkt-stepper--vertical .pkt-step__line--3{min-height:4rem}.pkt-stepper--vertical .pkt-step__nav-wrapper{flex-direction:row}.pkt-stepper--horizontal{display:flex}.pkt-stepper--horizontal .pkt-step{grid-template-areas:"indicator line" "title title" "content content";grid-template-columns:var(--pkt-steps-indicator-width) minmax(60px, max-content);grid-template-rows:var(--pkt-steps-indicator-width) min-content min-content;justify-items:flex-start}.pkt-stepper--horizontal .pkt-step__wrapper{min-width:fit-content}.pkt-stepper--horizontal .pkt-step__title{padding:1.5rem 1rem 1.5rem 0}.pkt-stepper--horizontal .pkt-step__content{padding:0 1rem 1rem 0}.pkt-stepper--horizontal .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--horizontal .pkt-step__line{min-width:min-content;width:100%;margin:auto;height:var(--pkt-steps-border-width)}.pkt-stepper--horizontal .pkt-step__line--1{width:50%;transform:translateX(-55%)}.pkt-stepper--horizontal .pkt-step__line--2{width:50%;transform:translateX(55%)}.pkt-stepper--horizontal .pkt-step__line--3{min-width:5rem}.pkt-stepper--horizontal .pkt-step__nav-wrapper{flex-direction:column}.pkt-step:first-of-type .pkt-step__line--1{display:none}.pkt-step--incomplete .pkt-step__line{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--incomplete .pkt-step__title,.pkt-step--incomplete .pkt-step__content{color:var(--pkt-color-grays-gray-600)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--2{background-color:var(--pkt-color-grays-gray-200)}.pkt-step:last-of-type .pkt-step__line--3,.pkt-step:last-of-type .pkt-step__line--2{display:none}.pkt-step--current .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current .pkt-step__line--2,.pkt-step--current .pkt-step__line--3{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__title,.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-stepper--vertical .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-height:2rem}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current){grid-template-columns:var(--pkt-steps-indicator-width) minmax(2rem, max-content)}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-width:2rem}
1
+ .pkt-stepper{--pkt-steps-indicator-width: 24px;--pkt-steps-indicator-height: 24px;--pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);--pkt-steps-border-width: 2.5px;--pkt-steps-line-length: 1.5rem;color:var(--pkt-color-brand-dark-blue-1000);font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;list-style:none;margin:0;padding:0}.pkt-stepper .pkt-step{display:grid}.pkt-stepper .pkt-step__wrapper{grid-column:title/content;grid-row:title/content}.pkt-stepper .pkt-step__title{font-weight:500;width:max-content;width:100%}.pkt-stepper .pkt-step__content{font-weight:300;padding-block-end:1.5rem;width:100%}.pkt-stepper .pkt-step__indicator{z-index:2;grid-area:indicator}.pkt-stepper .pkt-step__line{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-stepper .pkt-step__line--1{grid-area:indicator}.pkt-stepper .pkt-step__line--2{grid-area:indicator}.pkt-stepper .pkt-step__line--3{grid-area:line;height:fit-content}.pkt-stepper .pkt-step__nav-wrapper{display:flex;gap:20px;margin-block-start:1rem}.pkt-stepper--vertical{display:grid;grid-template-columns:1fr}.pkt-stepper--vertical .pkt-step{grid-template-areas:"indicator title" "line content";grid-template-columns:var(--pkt-steps-indicator-width) auto;grid-template-rows:var(--pkt-steps-indicator-height) minmax(min-content, max-content);grid-gap:0 1rem;justify-items:flex-start}.pkt-stepper--vertical .pkt-step--current .pkt-step__title,.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding:1rem 1.5rem;background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding-block-start:0}.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper{margin-block-end:1.5rem}.pkt-stepper--vertical .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--vertical .pkt-step__line{min-height:min-content;height:100%;margin:auto;width:var(--pkt-steps-border-width)}.pkt-stepper--vertical .pkt-step__line--1{height:50%;transform:translateY(-55%)}.pkt-stepper--vertical .pkt-step__line--2{height:50%;transform:translateY(55%)}.pkt-stepper--vertical .pkt-step__line--3{min-height:4rem}.pkt-stepper--vertical .pkt-step__nav-wrapper{flex-direction:row}.pkt-stepper--horizontal{display:flex}.pkt-stepper--horizontal .pkt-step{grid-template-areas:"indicator line" "title title" "content content";grid-template-columns:var(--pkt-steps-indicator-width) minmax(60px, max-content);grid-template-rows:var(--pkt-steps-indicator-width) min-content min-content;justify-items:flex-start}.pkt-stepper--horizontal .pkt-step__wrapper{min-width:fit-content}.pkt-stepper--horizontal .pkt-step__title{padding:1.5rem 1rem 1.5rem 0}.pkt-stepper--horizontal .pkt-step__content{padding:0 1rem 1rem 0}.pkt-stepper--horizontal .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--horizontal .pkt-step__line{min-width:min-content;width:100%;margin:auto;height:var(--pkt-steps-border-width)}.pkt-stepper--horizontal .pkt-step__line--1{width:50%;transform:translateX(-55%)}.pkt-stepper--horizontal .pkt-step__line--2{width:50%;transform:translateX(55%)}.pkt-stepper--horizontal .pkt-step__line--3{min-width:5rem}.pkt-stepper--horizontal .pkt-step__nav-wrapper{flex-direction:column}.pkt-step:first-of-type .pkt-step__line--1{display:none}.pkt-step--incomplete .pkt-step__line{background-color:var(--pkt-color-brand-neutrals-300)}.pkt-step--incomplete .pkt-step__title,.pkt-step--incomplete .pkt-step__content{color:var(--pkt-color-brand-neutrals-700)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--2{background-color:var(--pkt-color-brand-neutrals-300)}.pkt-step:last-of-type .pkt-step__line--3,.pkt-step:last-of-type .pkt-step__line--2{display:none}.pkt-step--current .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current .pkt-step__line--2,.pkt-step--current .pkt-step__line--3{background-color:var(--pkt-color-brand-neutrals-300)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-brand-neutrals-300)}.pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__title,.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-stepper--vertical .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-height:2rem}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current){grid-template-columns:var(--pkt-steps-indicator-width) minmax(2rem, max-content)}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-width:2rem}
package/dist/css/components/tag.css CHANGED
@@ -1,20 +1,6 @@
1
1
  /*
2
2
  * Tag element
3
3
  */
4
- .pkt-tag {
5
- --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
6
- --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
7
- --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
8
- --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
9
- }
10
-
11
- [data-mode=dark] .pkt-tag {
12
- --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
13
- --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
14
- --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
15
- --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
16
- }
17
-
18
4
  pkt-tag {
19
5
  display: inline-block;
20
6
  vertical-align: middle;
@@ -240,12 +226,12 @@ button.pkt-tag {
240
226
  }
241
227
  .pkt-tag.pkt-tag--blue-dark {
242
228
  background: var(--pkt-color-brand-dark-blue-1000);
243
- color: var(--pkt-color-brand-neutrals-200);
244
- --fg-color: var(--pkt-color-brand-neutrals-200);
229
+ color: var(--pkt-color-brand-neutrals-100);
230
+ --fg-color: var(--pkt-color-brand-neutrals-100);
245
231
  }
246
232
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark:is(button):hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark:is(button):focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
247
233
  background-color: var(--pkt-color-brand-warm-blue-1000) !important;
248
- color: var(--pkt-color-brand-neutrals-200) !important;
234
+ color: var(--pkt-color-brand-neutrals-100) !important;
249
235
  }
250
236
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
251
237
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark:is(button):hover,
@@ -253,7 +239,7 @@ button.pkt-tag {
253
239
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark:is(button):focus,
254
240
  .pkt-tag.pkt-tag--blue-dark:is(button):focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
255
241
  .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
256
- --fg-color: var(--pkt-color-brand-neutrals-200) !important;
242
+ --fg-color: var(--pkt-color-brand-neutrals-100) !important;
257
243
  }
258
244
  .pkt-tag.pkt-tag--small {
259
245
  padding: 0 0.25rem;
package/dist/css/components/tag.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}pkt-tag{display:inline-block;vertical-align:middle}pkt-tag>.pkt-tag{display:flex}button.pkt-tag{appearance:none;border-radius:0;cursor:pointer;font-family:inherit;justify-content:center;text-align:left;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;user-select:none}.pkt-tag{width:fit-content;vertical-align:middle;background:var(--pkt-color-surface-default-light-blue);padding:0 .5rem;display:inline-flex;align-items:center;height:auto;column-gap:0;color:var(--pkt-color-tag-text-normal);border:0;margin:0;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.875rem}.pkt-tag p{margin:0;padding:0;line-height:inherit}.pkt-tag.pkt-btn:hover,.pkt-tag:is(button):hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover svg,.pkt-tag:is(button):hover svg,.pkt-tag.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag:is(button):focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus svg,.pkt-tag:is(button):focus svg,.pkt-tag.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag:is(button):active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active svg,.pkt-tag:is(button):active svg,.pkt-tag.pkt-tag--active svg,.pkt-tag.pkt-tag--active:hover svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-inline-end:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-inline-start:.5rem}.pkt-tag.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag.pkt-tag--green.pkt-btn:hover,.pkt-tag.pkt-tag--green:is(button):hover,.pkt-tag.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:hover svg,.pkt-tag.pkt-tag--green:is(button):hover svg,.pkt-tag.pkt-tag--green.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:focus,.pkt-tag.pkt-tag--green:is(button):focus,.pkt-tag.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:focus svg,.pkt-tag.pkt-tag--green:is(button):focus svg,.pkt-tag.pkt-tag--green.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:active,.pkt-tag.pkt-tag--green:is(button):active,.pkt-tag.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--green.pkt-btn:active svg,.pkt-tag.pkt-tag--green:is(button):active svg,.pkt-tag.pkt-tag--green.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover,.pkt-tag.pkt-tag--yellow:is(button):hover,.pkt-tag.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover svg,.pkt-tag.pkt-tag--yellow:is(button):hover svg,.pkt-tag.pkt-tag--yellow.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus,.pkt-tag.pkt-tag--yellow:is(button):focus,.pkt-tag.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus svg,.pkt-tag.pkt-tag--yellow:is(button):focus svg,.pkt-tag.pkt-tag--yellow.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:active,.pkt-tag.pkt-tag--yellow:is(button):active,.pkt-tag.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow.pkt-btn:active svg,.pkt-tag.pkt-tag--yellow:is(button):active svg,.pkt-tag.pkt-tag--yellow.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag.pkt-tag--red.pkt-btn:hover,.pkt-tag.pkt-tag--red:is(button):hover,.pkt-tag.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:hover svg,.pkt-tag.pkt-tag--red:is(button):hover svg,.pkt-tag.pkt-tag--red.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:focus,.pkt-tag.pkt-tag--red:is(button):focus,.pkt-tag.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:focus svg,.pkt-tag.pkt-tag--red:is(button):focus svg,.pkt-tag.pkt-tag--red.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:active,.pkt-tag.pkt-tag--red:is(button):active,.pkt-tag.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red.pkt-btn:active svg,.pkt-tag.pkt-tag--red:is(button):active svg,.pkt-tag.pkt-tag--red.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag.pkt-tag--beige.pkt-btn:hover,.pkt-tag.pkt-tag--beige:is(button):hover,.pkt-tag.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:hover svg,.pkt-tag.pkt-tag--beige:is(button):hover svg,.pkt-tag.pkt-tag--beige.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:focus,.pkt-tag.pkt-tag--beige:is(button):focus,.pkt-tag.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:focus svg,.pkt-tag.pkt-tag--beige:is(button):focus svg,.pkt-tag.pkt-tag--beige.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:active,.pkt-tag.pkt-tag--beige:is(button):active,.pkt-tag.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige.pkt-btn:active svg,.pkt-tag.pkt-tag--beige:is(button):active svg,.pkt-tag.pkt-tag--beige.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray,.pkt-tag.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag.pkt-tag--gray.pkt-btn:hover,.pkt-tag.pkt-tag--gray:is(button):hover,.pkt-tag.pkt-tag--gray.pkt-tag--hover,.pkt-tag.pkt-tag--grey.pkt-btn:hover,.pkt-tag.pkt-tag--grey:is(button):hover,.pkt-tag.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:hover svg,.pkt-tag.pkt-tag--gray:is(button):hover svg,.pkt-tag.pkt-tag--gray.pkt-tag--hover svg,.pkt-tag.pkt-tag--grey.pkt-btn:hover svg,.pkt-tag.pkt-tag--grey:is(button):hover svg,.pkt-tag.pkt-tag--grey.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:focus,.pkt-tag.pkt-tag--gray:is(button):focus,.pkt-tag.pkt-tag--gray.pkt-tag--focus,.pkt-tag.pkt-tag--grey.pkt-btn:focus,.pkt-tag.pkt-tag--grey:is(button):focus,.pkt-tag.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:focus svg,.pkt-tag.pkt-tag--gray:is(button):focus svg,.pkt-tag.pkt-tag--gray.pkt-tag--focus svg,.pkt-tag.pkt-tag--grey.pkt-btn:focus svg,.pkt-tag.pkt-tag--grey:is(button):focus svg,.pkt-tag.pkt-tag--grey.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active,.pkt-tag.pkt-tag--gray:is(button):active,.pkt-tag.pkt-tag--gray.pkt-tag--active,.pkt-tag.pkt-tag--grey.pkt-btn:active,.pkt-tag.pkt-tag--grey:is(button):active,.pkt-tag.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active svg,.pkt-tag.pkt-tag--gray:is(button):active svg,.pkt-tag.pkt-tag--gray.pkt-tag--active svg,.pkt-tag.pkt-tag--grey.pkt-btn:active svg,.pkt-tag.pkt-tag--grey:is(button):active svg,.pkt-tag.pkt-tag--grey.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag.pkt-tag--blue-light:is(button):hover,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-light:is(button):hover svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag.pkt-tag--blue-light:is(button):focus,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-light:is(button):focus svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active,.pkt-tag.pkt-tag--blue-light:is(button):active,.pkt-tag.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active svg,.pkt-tag.pkt-tag--blue-light:is(button):active svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-200);--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000) !important;color:var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover svg,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus svg,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg{--fg-color: var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--small{padding:0 .25rem;line-height:1.375rem}.pkt-tag.pkt-tag--medium{padding:0 .5rem;line-height:1.875rem}.pkt-tag.pkt-tag--large{padding:0 .5rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:2.25rem}.pkt-tag.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem}.pkt-tag.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem}
1
+ pkt-tag{display:inline-block;vertical-align:middle}pkt-tag>.pkt-tag{display:flex}button.pkt-tag{appearance:none;border-radius:0;cursor:pointer;font-family:inherit;justify-content:center;text-align:left;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;user-select:none}.pkt-tag{width:fit-content;vertical-align:middle;background:var(--pkt-color-surface-default-light-blue);padding:0 .5rem;display:inline-flex;align-items:center;height:auto;column-gap:0;color:var(--pkt-color-tag-text-normal);border:0;margin:0;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.875rem}.pkt-tag p{margin:0;padding:0;line-height:inherit}.pkt-tag.pkt-btn:hover,.pkt-tag:is(button):hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover svg,.pkt-tag:is(button):hover svg,.pkt-tag.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag:is(button):focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus svg,.pkt-tag:is(button):focus svg,.pkt-tag.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag:is(button):active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active svg,.pkt-tag:is(button):active svg,.pkt-tag.pkt-tag--active svg,.pkt-tag.pkt-tag--active:hover svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-inline-end:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-inline-start:.5rem}.pkt-tag.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag.pkt-tag--green.pkt-btn:hover,.pkt-tag.pkt-tag--green:is(button):hover,.pkt-tag.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:hover svg,.pkt-tag.pkt-tag--green:is(button):hover svg,.pkt-tag.pkt-tag--green.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:focus,.pkt-tag.pkt-tag--green:is(button):focus,.pkt-tag.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:focus svg,.pkt-tag.pkt-tag--green:is(button):focus svg,.pkt-tag.pkt-tag--green.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:active,.pkt-tag.pkt-tag--green:is(button):active,.pkt-tag.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--green.pkt-btn:active svg,.pkt-tag.pkt-tag--green:is(button):active svg,.pkt-tag.pkt-tag--green.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover,.pkt-tag.pkt-tag--yellow:is(button):hover,.pkt-tag.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover svg,.pkt-tag.pkt-tag--yellow:is(button):hover svg,.pkt-tag.pkt-tag--yellow.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus,.pkt-tag.pkt-tag--yellow:is(button):focus,.pkt-tag.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus svg,.pkt-tag.pkt-tag--yellow:is(button):focus svg,.pkt-tag.pkt-tag--yellow.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:active,.pkt-tag.pkt-tag--yellow:is(button):active,.pkt-tag.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow.pkt-btn:active svg,.pkt-tag.pkt-tag--yellow:is(button):active svg,.pkt-tag.pkt-tag--yellow.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag.pkt-tag--red.pkt-btn:hover,.pkt-tag.pkt-tag--red:is(button):hover,.pkt-tag.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:hover svg,.pkt-tag.pkt-tag--red:is(button):hover svg,.pkt-tag.pkt-tag--red.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:focus,.pkt-tag.pkt-tag--red:is(button):focus,.pkt-tag.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:focus svg,.pkt-tag.pkt-tag--red:is(button):focus svg,.pkt-tag.pkt-tag--red.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:active,.pkt-tag.pkt-tag--red:is(button):active,.pkt-tag.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red.pkt-btn:active svg,.pkt-tag.pkt-tag--red:is(button):active svg,.pkt-tag.pkt-tag--red.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag.pkt-tag--beige.pkt-btn:hover,.pkt-tag.pkt-tag--beige:is(button):hover,.pkt-tag.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:hover svg,.pkt-tag.pkt-tag--beige:is(button):hover svg,.pkt-tag.pkt-tag--beige.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:focus,.pkt-tag.pkt-tag--beige:is(button):focus,.pkt-tag.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:focus svg,.pkt-tag.pkt-tag--beige:is(button):focus svg,.pkt-tag.pkt-tag--beige.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:active,.pkt-tag.pkt-tag--beige:is(button):active,.pkt-tag.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige.pkt-btn:active svg,.pkt-tag.pkt-tag--beige:is(button):active svg,.pkt-tag.pkt-tag--beige.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray,.pkt-tag.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag.pkt-tag--gray.pkt-btn:hover,.pkt-tag.pkt-tag--gray:is(button):hover,.pkt-tag.pkt-tag--gray.pkt-tag--hover,.pkt-tag.pkt-tag--grey.pkt-btn:hover,.pkt-tag.pkt-tag--grey:is(button):hover,.pkt-tag.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:hover svg,.pkt-tag.pkt-tag--gray:is(button):hover svg,.pkt-tag.pkt-tag--gray.pkt-tag--hover svg,.pkt-tag.pkt-tag--grey.pkt-btn:hover svg,.pkt-tag.pkt-tag--grey:is(button):hover svg,.pkt-tag.pkt-tag--grey.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:focus,.pkt-tag.pkt-tag--gray:is(button):focus,.pkt-tag.pkt-tag--gray.pkt-tag--focus,.pkt-tag.pkt-tag--grey.pkt-btn:focus,.pkt-tag.pkt-tag--grey:is(button):focus,.pkt-tag.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:focus svg,.pkt-tag.pkt-tag--gray:is(button):focus svg,.pkt-tag.pkt-tag--gray.pkt-tag--focus svg,.pkt-tag.pkt-tag--grey.pkt-btn:focus svg,.pkt-tag.pkt-tag--grey:is(button):focus svg,.pkt-tag.pkt-tag--grey.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active,.pkt-tag.pkt-tag--gray:is(button):active,.pkt-tag.pkt-tag--gray.pkt-tag--active,.pkt-tag.pkt-tag--grey.pkt-btn:active,.pkt-tag.pkt-tag--grey:is(button):active,.pkt-tag.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active svg,.pkt-tag.pkt-tag--gray:is(button):active svg,.pkt-tag.pkt-tag--gray.pkt-tag--active svg,.pkt-tag.pkt-tag--grey.pkt-btn:active svg,.pkt-tag.pkt-tag--grey:is(button):active svg,.pkt-tag.pkt-tag--grey.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag.pkt-tag--blue-light:is(button):hover,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-light:is(button):hover svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag.pkt-tag--blue-light:is(button):focus,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-light:is(button):focus svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active,.pkt-tag.pkt-tag--blue-light:is(button):active,.pkt-tag.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active svg,.pkt-tag.pkt-tag--blue-light:is(button):active svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-100);--fg-color: var(--pkt-color-brand-neutrals-100)}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000) !important;color:var(--pkt-color-brand-neutrals-100) !important}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover svg,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus svg,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg{--fg-color: var(--pkt-color-brand-neutrals-100) !important}.pkt-tag.pkt-tag--small{padding:0 .25rem;line-height:1.375rem}.pkt-tag.pkt-tag--medium{padding:0 .5rem;line-height:1.875rem}.pkt-tag.pkt-tag--large{padding:0 .5rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:2.25rem}.pkt-tag.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem}.pkt-tag.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem}
package/dist/css/elements/button.css CHANGED
@@ -34,41 +34,41 @@
34
34
  }
35
35
 
36
36
  .pkt-btn {
37
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
37
+ --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
38
38
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
39
- --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
40
- --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
41
- --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
42
- --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
39
+ --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
40
+ --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
41
+ --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
42
+ --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
43
43
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
44
- --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
44
+ --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
45
45
  --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
46
- --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
47
- --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
46
+ --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
47
+ --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
48
48
  --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
49
- --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
50
- --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
51
- --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
52
- --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
49
+ --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
50
+ --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
51
+ --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
52
+ --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
53
53
  }
54
54
 
55
55
  [data-mode=dark] .pkt-btn {
56
- --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
56
+ --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
57
57
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
58
- --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
59
- --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
60
- --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
61
- --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
58
+ --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
59
+ --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
60
+ --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
61
+ --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
62
62
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
63
- --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
63
+ --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
64
64
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
65
- --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
66
- --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
65
+ --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
66
+ --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
67
67
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
68
- --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
69
- --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
70
- --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
71
- --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
68
+ --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
69
+ --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
70
+ --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
71
+ --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
72
72
  }
73
73
  [data-mode=dark] .pkt-btn--green-dark {
74
74
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -133,22 +133,36 @@
133
133
 
134
134
  .pkt-btn--secondary {
135
135
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
136
- --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
137
- --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
136
+ --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
137
+ --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
138
+ --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
139
+ --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
140
+ --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
141
+ --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
142
+ --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
143
+ --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
144
+ --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
145
+ --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
146
+ --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
147
+ --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
138
148
  }
139
149
 
140
150
  [data-mode=dark] .pkt-btn--secondary {
141
151
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
142
- --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
143
- --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
152
+ --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
153
+ --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
144
154
  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
145
- --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
146
- --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
155
+ --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
156
+ --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
157
+ --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
147
158
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
148
- --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
159
+ --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
160
+ --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
149
161
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
150
- --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
151
- --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
162
+ --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
163
+ --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
164
+ --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
165
+ --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
152
166
  }
153
167
  [data-mode=dark] .pkt-btn--secondary--green-dark {
154
168
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -214,28 +228,36 @@
214
228
  .pkt-btn--tertiary {
215
229
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
216
230
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
217
- --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
218
- --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
219
- --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
220
- --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
221
- --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
222
- --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
223
- --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
231
+ --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
232
+ --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
233
+ --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
234
+ --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
235
+ --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
236
+ --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-100);
237
+ --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
238
+ --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
239
+ --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
240
+ --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
241
+ --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
242
+ --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
224
243
  }
225
244
 
226
245
  [data-mode=dark] .pkt-btn--tertiary {
227
246
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
228
247
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
229
- --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
230
- --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
231
- --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
232
- --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
233
- --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
248
+ --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
249
+ --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
250
+ --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
251
+ --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
252
+ --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
234
253
  --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
235
- --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
236
- --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
254
+ --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
255
+ --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
237
256
  --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
238
- --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
257
+ --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
258
+ --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
259
+ --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
260
+ --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
239
261
  }
240
262
  [data-mode=dark] .pkt-btn--tertiary--green-dark {
241
263
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
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-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)}
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-button-primary-background-normal);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);--pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);--pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);--pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled)}[data-mode=dark] .pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);--pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);--pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled)}[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-border-normal: var(--pkt-color-button-secondary-border-normal);--pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);--pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);--pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled)}[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-button-secondary-border-normal);--pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);--pkt-color-button-border-active: var(--pkt-color-brand-blue-500);--pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled)}[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-button-tertiary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);--pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);--pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);--pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);--pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled)}[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-button-tertiary-text-normal);--pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);--pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);--pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);--pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);--pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);--pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);--pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);--pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);--pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);--pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled)}[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-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
@@ -97,7 +97,7 @@
97
97
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
98
98
  }
99
99
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
100
- --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/minus-sign.svg);
100
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/minus-sign.svg);
101
101
  position: relative;
102
102
  background-color: var(--pkt-color-input-border-normal);
103
103
  }
@@ -123,7 +123,7 @@
123
123
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
124
124
  }
125
125
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
126
- --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/check-medium.svg);
126
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
127
127
  position: relative;
128
128
  background-color: var(--pkt-color-input-border-normal);
129
129
  }
@@ -181,7 +181,7 @@
181
181
  cursor: not-allowed;
182
182
  }
183
183
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
184
- --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/check-medium.svg);
184
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
185
185
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
186
186
  filter: grayscale(100%) brightness(400%);
187
187
  }
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-inline-start:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-inline-start:0;padding-inline-end:.5rem}.pkt-input-check__input-helptext{padding-block-start:.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]{transition:all .15s ease-in-out;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{transition:all .15s ease-in-out;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)}.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.1/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.1/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.1/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-inline-start:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-inline-start:0;padding-inline-end:.5rem}.pkt-input-check__input-helptext{padding-block-start:.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]{transition:all .15s ease-in-out;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{transition:all .15s ease-in-out;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)}.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/18.3/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/18.3/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/18.3/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/form.css CHANGED
@@ -85,7 +85,7 @@
85
85
  */
86
86
  }
87
87
  .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
88
- color: var(--pkt-color-grays-gray-300);
88
+ color: var(--pkt-color-brand-neutrals-400);
89
89
  opacity: 1;
90
90
  /* 1 */
91
91
  }
@@ -99,8 +99,8 @@
99
99
  display: inherit;
100
100
  }
101
101
  .pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
102
- background-color: var(--pkt-color-brand-neutrals-200);
103
- border-color: var(--pkt-color-grays-gray-300);
104
- color: var(--pkt-color-grays-gray-300);
102
+ background-color: var(--pkt-color-brand-neutrals-100);
103
+ border-color: var(--pkt-color-brand-neutrals-400);
104
+ color: var(--pkt-color-brand-neutrals-400);
105
105
  cursor: inherit;
106
106
  }
package/dist/css/elements/form.min.css CHANGED
@@ -1 +1 @@
1
- @keyframes enter{from{transform:scaleY(0)}to{transform:scaleY(1)}}.pkt-form-group{margin-block-end:1.5rem}.pkt-form-group:focus-within{color:var(--pkt-color-brand-warm-blue-1000)}.pkt-form-label{width:100%}.pkt-form-label>p:first-child{display:inline}.pkt-form-help{margin:.25em 0;font-size:.875rem;line-height:1.25em;opacity:.9}.pkt-form-validation{animation:enter .2s ease-in forwards;background-color:var(--pkt-color-brand-red-1000);border:2px solid var(--pkt-color-brand-red-1000);font-size:.875rem;line-height:2rem;margin:1rem 0 0;padding:.4375rem .5rem;transform-origin:0 0}.pkt-form-validation--warning{background-color:var(--pkt-color-brand-yellow-1000);border-color:var(--pkt-color-brand-yellow-1000)}.pkt-form-validation--error{background-color:var(--pkt-color-brand-red-1000);border-color:var(--pkt-color-brand-red-1000)}.pkt-form-input,.pkt-form-textarea{appearance:none;background-clip:padding-box;background-color:var(--pkt-color-brand-neutrals-white);border:2px solid var(--pkt-color-brand-dark-blue-1000);border-radius:0;color:var(--pkt-color-brand-dark-blue-1000);display:block;font-size:1rem;font-weight:400;line-height:2rem;margin:0;padding:.4375rem .5rem;position:relative;width:100%}.pkt-form-input:focus,.pkt-form-textarea:focus{background-color:var(--pkt-color-brand-neutrals-white);border-color:var(--pkt-color-brand-warm-blue-1000);box-shadow:0 0 var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-brand-warm-blue-1000);outline:2px solid var(--pkt-color-brand-warm-blue-1000)}.pkt-form-input::placeholder,.pkt-form-textarea::placeholder{color:var(--pkt-color-grays-gray-300);opacity:1}.pkt-form-input+.pkt-form-validation,.pkt-form-textarea+.pkt-form-validation{display:none}.pkt-form-input:not(:placeholder-shown):invalid,.pkt-form-textarea:not(:placeholder-shown):invalid{border-color:var(--pkt-color-brand-red-1000)}.pkt-form-input:not(:placeholder-shown):invalid+.pkt-form-validation,.pkt-form-textarea:not(:placeholder-shown):invalid+.pkt-form-validation{display:inherit}.pkt-form-input:disabled,.pkt-form-input[readonly],.pkt-form-textarea:disabled,.pkt-form-textarea[readonly]{background-color:var(--pkt-color-brand-neutrals-200);border-color:var(--pkt-color-grays-gray-300);color:var(--pkt-color-grays-gray-300);cursor:inherit}
1
+ @keyframes enter{from{transform:scaleY(0)}to{transform:scaleY(1)}}.pkt-form-group{margin-block-end:1.5rem}.pkt-form-group:focus-within{color:var(--pkt-color-brand-warm-blue-1000)}.pkt-form-label{width:100%}.pkt-form-label>p:first-child{display:inline}.pkt-form-help{margin:.25em 0;font-size:.875rem;line-height:1.25em;opacity:.9}.pkt-form-validation{animation:enter .2s ease-in forwards;background-color:var(--pkt-color-brand-red-1000);border:2px solid var(--pkt-color-brand-red-1000);font-size:.875rem;line-height:2rem;margin:1rem 0 0;padding:.4375rem .5rem;transform-origin:0 0}.pkt-form-validation--warning{background-color:var(--pkt-color-brand-yellow-1000);border-color:var(--pkt-color-brand-yellow-1000)}.pkt-form-validation--error{background-color:var(--pkt-color-brand-red-1000);border-color:var(--pkt-color-brand-red-1000)}.pkt-form-input,.pkt-form-textarea{appearance:none;background-clip:padding-box;background-color:var(--pkt-color-brand-neutrals-white);border:2px solid var(--pkt-color-brand-dark-blue-1000);border-radius:0;color:var(--pkt-color-brand-dark-blue-1000);display:block;font-size:1rem;font-weight:400;line-height:2rem;margin:0;padding:.4375rem .5rem;position:relative;width:100%}.pkt-form-input:focus,.pkt-form-textarea:focus{background-color:var(--pkt-color-brand-neutrals-white);border-color:var(--pkt-color-brand-warm-blue-1000);box-shadow:0 0 var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-brand-warm-blue-1000);outline:2px solid var(--pkt-color-brand-warm-blue-1000)}.pkt-form-input::placeholder,.pkt-form-textarea::placeholder{color:var(--pkt-color-brand-neutrals-400);opacity:1}.pkt-form-input+.pkt-form-validation,.pkt-form-textarea+.pkt-form-validation{display:none}.pkt-form-input:not(:placeholder-shown):invalid,.pkt-form-textarea:not(:placeholder-shown):invalid{border-color:var(--pkt-color-brand-red-1000)}.pkt-form-input:not(:placeholder-shown):invalid+.pkt-form-validation,.pkt-form-textarea:not(:placeholder-shown):invalid+.pkt-form-validation{display:inherit}.pkt-form-input:disabled,.pkt-form-input[readonly],.pkt-form-textarea:disabled,.pkt-form-textarea[readonly]{background-color:var(--pkt-color-brand-neutrals-100);border-color:var(--pkt-color-brand-neutrals-400);color:var(--pkt-color-brand-neutrals-400);cursor:inherit}
package/dist/css/elements/hr.css CHANGED
@@ -4,5 +4,5 @@
4
4
  .pkt-hr {
5
5
  border: 0;
6
6
  width: 100%;
7
- border-top: 1px solid var(--pkt-color-grays-gray-200);
7
+ border-top: 1px solid var(--pkt-color-brand-neutrals-300);
8
8
  }
package/dist/css/elements/hr.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-hr{border:0;width:100%;border-top:1px solid var(--pkt-color-grays-gray-200)}
1
+ .pkt-hr{border:0;width:100%;border-top:1px solid var(--pkt-color-brand-neutrals-300)}
package/dist/css/elements/input.css CHANGED
@@ -110,7 +110,7 @@ pkt-select {
110
110
  padding-right: 3rem;
111
111
  }
112
112
  .pkt-input:is(select):not([multiple]) {
113
- --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/chevron-thin-down.svg);
113
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/chevron-thin-down.svg);
114
114
  background-image: var(--svg);
115
115
  background-repeat: no-repeat;
116
116
  background-position: right 0.7rem top 50%;
package/dist/css/elements/input.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-textinput,.pkt-textarea,.pkt-select{display:block}.pkt-textinput:has(>.pkt-inputwrapper--inline),.pkt-textarea:has(>.pkt-inputwrapper--inline),.pkt-select:has(>.pkt-inputwrapper--inline){display:inline-block;width:fit-content}:where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))){width:min(31rem,100%)}.pkt-textinput:has(.pkt-input--fullwidth),.pkt-select:has(.pkt-input--fullwidth){width:100%}.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__container{width:min(31rem,100%)}.pkt-input{width:min(31rem,100%)}.pkt-input:where([size],[cols]){width:auto}.pkt-input:where(select):not(.pkt-input--fullwidth){width:auto}.pkt-input__container:where(:has(>:is(input[size],textarea[cols]))){width:fit-content;align-self:flex-start}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--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.1/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 :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(31rem,100%);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}}.pkt-input__container:where(:has(>.pkt-input--fullwidth)){width:100%}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-textinput,.pkt-textarea,.pkt-select{display:block}.pkt-textinput:has(>.pkt-inputwrapper--inline),.pkt-textarea:has(>.pkt-inputwrapper--inline),.pkt-select:has(>.pkt-inputwrapper--inline){display:inline-block;width:fit-content}:where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))){width:min(31rem,100%)}.pkt-textinput:has(.pkt-input--fullwidth),.pkt-select:has(.pkt-input--fullwidth){width:100%}.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__container{width:min(31rem,100%)}.pkt-input{width:min(31rem,100%)}.pkt-input:where([size],[cols]){width:auto}.pkt-input:where(select):not(.pkt-input--fullwidth){width:auto}.pkt-input__container:where(:has(>:is(input[size],textarea[cols]))){width:fit-content;align-self:flex-start}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--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/18.3/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 :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(31rem,100%);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}}.pkt-input__container:where(:has(>.pkt-input--fullwidth)){width:100%}