@oslokommune/punkt-css 9.4.0 → 9.5.0

package/dist/css/pkt.css

@@ -13485,8 +13485,8 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 }
-a:visited:not(.pkt-linkcard),
-.pkt-link-button:visited:not(.pkt-linkcard) {
+a:visited:not(.pkt-linkcard):not(.pkt-btn),
+.pkt-link-button:visited:not(.pkt-linkcard):not(.pkt-btn) {
   color: inherit;
 }
 a:hover, a.pkt-link--hover,
@@ -13536,7 +13536,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -14141,12 +14141,16 @@ button.pkt-link {
   --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-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-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);
 }
@@ -14156,7 +14160,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14166,17 +14172,23 @@ button.pkt-link {
   --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-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-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-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);
 }
@@ -14186,7 +14198,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14196,14 +14210,15 @@ button.pkt-link {
   --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-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-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);
 }
@@ -14222,12 +14237,16 @@ button.pkt-link {
   --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-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-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);
 }
@@ -14237,7 +14256,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14247,17 +14268,23 @@ button.pkt-link {
   --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-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-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-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);
 }
@@ -14267,7 +14294,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14277,7 +14306,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14309,12 +14340,16 @@ button.pkt-link {
   --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-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-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);
 }
@@ -14324,7 +14359,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14334,17 +14371,23 @@ button.pkt-link {
   --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-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-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-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);
 }
@@ -14354,7 +14397,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14364,7 +14409,9 @@ button.pkt-link {
   --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-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);
 }
@@ -14494,12 +14541,16 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 0;
 }
 .pkt-btn--green-dark {
-  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+  --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-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);
 }
@@ -14509,7 +14560,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   --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-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);
 }
@@ -14519,17 +14572,23 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   --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-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-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-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);
 }
@@ -14539,7 +14598,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   --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-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);
 }
@@ -14549,7 +14610,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   --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-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);
 }
@@ -14755,7 +14818,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -14953,7 +15016,11 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 [data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
-[data-mode=dark] .pkt-select:is(select), [data-mode=dark] .pkt-input-prefix, [data-mode=dark] .pkt-input-suffix, [data-mode=dark] .pkt-input-icon, [data-mode=dark] .pkt-input__container {
+[data-mode=dark] .pkt-select:is(select),
+[data-mode=dark] .pkt-input-prefix,
+[data-mode=dark] .pkt-input-suffix,
+[data-mode=dark] .pkt-input-icon,
+[data-mode=dark] .pkt-input__container {
   --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
   --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
   --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
@@ -15004,7 +15071,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -15135,6 +15202,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
   border-color: var(--pkt-color-input-border-active);
 }
+.pkt-input__container:hover .pkt-input:disabled, .pkt-input__container:hover .pkt-textinput__input:disabled, .pkt-input__container:hover .pkt-select select:disabled, .pkt-select .pkt-input__container:hover select:disabled,
+.pkt-input__container:hover .pkt-select:disabled:is(select), .pkt-input__container:hover .pkt-input-prefix:disabled, .pkt-input__container:hover .pkt-input-suffix:disabled, .pkt-input__container:hover .pkt-input-icon:disabled {
+  border-color: var(--pkt-color-input-border-disabled);
+}
 .pkt-input__container:focus-within {
   outline: 2px solid var(--pkt-color-input-border-active);
 }
@@ -16885,4 +16956,98 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  *
  * Denne blir stilsatt av .pkt-input
  * Ikke bruk klassen .pkt-textinput 
-*/
+*/
+/* Common styles for all inputs */
+.pkt-searchinput {
+  position: relative;
+  font-size: 1.125rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+}
+.pkt-searchinput__field {
+  width: min(100%, 31rem);
+  display: flex;
+}
+.pkt-searchinput--fullwidth .pkt-searchinput__field {
+  width: 100%;
+}
+.pkt-searchinput--global .pkt-input:not(:disabled) {
+  border-color: var(--pkt-color-border-yellow);
+}
+.pkt-searchinput--global .pkt-input:not(:disabled):hover, .pkt-searchinput--global .pkt-input:not(:disabled):active, .pkt-searchinput--global .pkt-input:not(:disabled):focus {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-searchinput--global .pkt-searchinput__button {
+  border-radius: 50%;
+}
+.pkt-searchinput--local-with-button .pkt-searchinput__field {
+  gap: 0.5rem;
+}
+.pkt-searchinput--local .pkt-input {
+  padding: 0.5rem 0 0.5rem 1rem;
+}
+.pkt-searchinput--local .pkt-searchinput__button:disabled {
+  border-color: var(--pkt-color-input-border-disabled);
+}
+.pkt-searchinput--local .pkt-searchinput__button svg {
+  margin-left: 0;
+}
+.pkt-searchinput__suggestions {
+  position: absolute;
+  z-index: 2;
+  padding: 0;
+  margin: 2px 0 0;
+  width: min(100%, 31rem);
+  list-style: none;
+  background-color: var(--pkt-color-background-card);
+  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.pkt-searchinput--global .pkt-searchinput__suggestions {
+  width: min(100% - 3rem, 28rem);
+}
+.pkt-searchinput--local-with-button .pkt-searchinput__suggestions {
+  width: min(100% - 3.5rem, 27.5rem);
+}
+.pkt-searchinput--fullwidth .pkt-searchinput__suggestions {
+  width: 100%;
+}
+.pkt-searchinput__suggestion {
+  display: block;
+  padding: 1rem;
+  text-decoration: none;
+  background-color: transparent;
+  color: var(--pkt-color-text-action-normal);
+  border: none;
+  font: inherit;
+  outline: inherit;
+  text-align: inherit;
+}
+.pkt-searchinput__suggestion:hover, .pkt-searchinput__suggestion:focus, .pkt-searchinput__suggestion:active {
+  text-decoration: none;
+  background-color: var(--pkt-color-background-subtle);
+  color: var(--pkt-color-text-action-active);
+}
+.pkt-searchinput__suggestion:hover .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:focus .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:active .pkt-searchinput__suggestion-title {
+  text-decoration: underline;
+}
+.pkt-searchinput__suggestion:hover > *, .pkt-searchinput__suggestion:focus > *, .pkt-searchinput__suggestion:active > * {
+  color: inherit;
+}
+.pkt-searchinput__suggestion--has-hover {
+  cursor: pointer;
+}
+.pkt-searchinput__suggestion-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+}
+.pkt-searchinput__suggestion-text {
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  hyphens: auto;
+}