@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/search/index.vue

@@ -98,7 +98,7 @@ defineDropAreas((dragItems) => {
       type: field.type,
       fieldName: field.fieldName
     };
-    const label = $t("searchContentReplace", "Replace @field").replace(
+    const label = $t("replaceField", "Replace @field").replace(
       "@field",
       config.label
     );
@@ -169,513 +169,411 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-search {
-      pointer-events: auto;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      top: 40px;
-      z-index: calc(var(--bk-z-index-base) + 330000) /* "search" */;
-      width: 100%;
-      overflow: hidden;
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-}
-@media (min-width: 768px) {
-      .bk.bk-search {
-            top: 0px;
-            width: 600px;
-            --bk-tw-shadow: -20px 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-            --bk-tw-shadow-colored: -20px 0px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
-            box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-      }
+  pointer-events: auto;
+  position: absolute;
+  top: 40px;
+  right: 0px;
+  bottom: 0px;
+  z-index: calc(var(--bk-z-index-base) + 330000) /* "search" */;
+  width: 100%;
+  overflow: hidden;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+}
+@media (width >= 48rem) {
+  .bk.bk-search {
+    top: 0px;
+  }
 }
-@media (min-width: 1280px) {
-      .bk.bk-search {
-            width: 800px;
-      }
+@media (width >= 48rem) {
+  .bk.bk-search {
+    width: 600px;
+  }
 }
-  .bk.bk-search.bk-is-translucent {
-      pointer-events: none;
-      opacity: 0;
+@media (width >= 48rem) {
+  .bk.bk-search {
+    --bk-tw-shadow: -20px 0px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  }
 }
-
-.bk .bk-search-box {
-      position: relative;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: column;
+@media (width >= 80rem) {
+  .bk.bk-search {
+    width: 800px;
+  }
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-box {
-            overflow: hidden;
-      }
+.bk.bk-search.bk-is-translucent {
+  pointer-events: none;
+  opacity: 0%;
+}
+.bk .bk-search-box {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+@media (width >= 48rem) {
+  .bk .bk-search-box {
+    overflow: hidden;
+  }
 }
-
 .bk .bk-search-results {
-      position: relative;
-      flex: 1 1 0%;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  position: relative;
+  flex: 1;
+  background-color: white;
 }
-
 .bk .bk-search-loading {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      z-index: 40;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-      background-color: rgb(255 255 255 / 0.4);
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 40;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: color-mix(in oklab, white 40%, transparent);
+}
+:is(.bk .bk-search-loading) svg {
+  height: 50px;
+  width: 50px;
+  animation: var(--animate-spin, spin 1s linear infinite);
+  fill: rgb(var(--bk-theme-mono-400) / 1);
+  color: rgb(var(--bk-theme-mono-200) / 1);
 }
-
-.bk .bk-search-loading svg {
-      height: 50px;
-      width: 50px;
-}
-
-@keyframes spin {
-      to {
-            transform: rotate(360deg);
-      }
-}
-
-.bk .bk-search-loading svg {
-      animation: spin 1s linear infinite;
-      fill: rgb(var(--bk-theme-mono-400) / 1);
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
-}
-
 .bk .bk-search-is-loading {
-      opacity: 0.5;
+  opacity: 50%;
 }
-
 .bk .bk-search-input {
-      position: relative;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-      padding-left: 30px;
+  position: relative;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  padding-left: 30px;
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-input {
-            --bk-tw-bg-opacity: 1;
-            background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-            padding-left: 50px;
-      }
+@media (width >= 48rem) {
+  .bk .bk-search-input {
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
 }
-
-.bk .bk-search-input > .bk-icon {
-      position: absolute;
-      top: 50%;
-      left: 10px;
-      height: 20px;
-      width: 20px;
-      --bk-tw-translate-y: -50%;
-      transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+@media (width >= 48rem) {
+  .bk .bk-search-input {
+    padding-left: 50px;
+  }
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-input > .bk-icon {
-            left: 20px;
-      }
+:is(.bk .bk-search-input)  > .bk-icon {
+  position: absolute;
+  top: calc(1 / 2 * 100%);
+  left: 10px;
+  height: 20px;
+  width: 20px;
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+@media (width >= 48rem) {
+  :is(.bk .bk-search-input)  > .bk-icon {
+    left: 20px;
+  }
 }
-
-.bk .bk-search-input > .bk-icon svg {
-      fill: currentColor;
+:is(:is(.bk .bk-search-input) > .bk-icon) svg {
+  fill: currentcolor;
 }
-
-.bk .bk-search-input input {
-      height: 40px;
-      width: 100%;
-      appearance: none;
-      background-color: transparent;
+:is(.bk .bk-search-input) input {
+  height: 40px;
+  width: 100%;
+  appearance: none;
+  background-color: transparent;
 }
-
-.bk .bk-search-input input:focus {
-      border-style: none;
-      --bk-tw-shadow: 0 0 #0000;
-      --bk-tw-shadow-colored: 0 0 #0000;
-      box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      --bk-tw-ring-color: transparent;
+:is(:is(.bk .bk-search-input) input):focus {
+  --bk-tw-border-style: none;
+  border-style: none;
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-input input {
-            height: 50px;
-      }
+:is(:is(.bk .bk-search-input) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
-.bk .bk-search-input input {
-      font-weight: 700;
-      line-height: 1;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+:is(:is(.bk .bk-search-input) input):focus {
+  --bk-tw-ring-color: transparent;
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-input input {
-            font-size: 18px;
-            line-height: 28px;
-      }
+:is(:is(.bk .bk-search-input) input):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
 }
-
-.bk .bk-search-input input::placeholder {
-      --bk-tw-placeholder-opacity: 1;
-      color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-placeholder-opacity, 1));
-      font-weight: 400;
+@media (width >= 48rem) {
+  :is(.bk .bk-search-input) input {
+    height: 50px;
+  }
 }
-
-.bk .bk-search-input input {
-      padding-left: 10px;
+:is(.bk .bk-search-input) input {
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+@media (width >= 48rem) {
+  :is(.bk .bk-search-input) input {
+    font-size: var(--text-lg, 18px);
+    line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  }
 }
-
-@media (min-width: 768px) {
-      .bk .bk-search-input input {
-            padding-left: 0px;
-      }
+:is(:is(.bk .bk-search-input) input)::placeholder {
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-.bk .bk-search-input button {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      height: 100%;
-      padding-left: 15px;
-      padding-right: 15px;
+:is(:is(.bk .bk-search-input) input)::placeholder {
+  --bk-tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
 }
-
-.bk .bk-search-input button svg {
-      pointer-events: none;
-      height: 20px;
-      width: 20px;
-      fill: rgb(var(--bk-theme-mono-100) / 1);
+:is(.bk .bk-search-input) input {
+  padding-left: 10px;
 }
-
-.bk .bk-search-item-icon {
-      position: relative;
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      border-width: 1px;
-      --bk-tw-border-opacity: 1;
-      border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-      padding: 0.125em;
-      border-radius: 4px;
+@media (width >= 48rem) {
+  :is(.bk .bk-search-input) input {
+    padding-left: 0px;
+  }
 }
-
-@media (min-width: 1024px) {
-      .bk .bk-search-item-icon {
-            border-radius: 6px;
-      }
+:is(.bk .bk-search-input) button {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+  padding-inline: 15px;
 }
-
-@media (min-width: 1280px) {
-      .bk .bk-search-item-icon {
-            border-radius: 8px;
-      }
+:is(:is(.bk .bk-search-input) button) svg {
+  pointer-events: none;
+  height: 20px;
+  width: 20px;
+  fill: rgb(var(--bk-theme-mono-100) / 1);
 }
-
 .bk .bk-search-item-icon {
-      width: 40px;
-      height: 40px;
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-200) / 1);
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  padding: 0.125em;
+  width: 40px;
+  height: 40px;
+}
+@media (width >= 64rem) {
+  .bk .bk-search-item-icon {
+    width: 50px;
+    height: 50px;
+  }
 }
-
-@media (min-width: 1024px) {
-      .bk .bk-search-item-icon {
-            width: 50px;
-            height: 50px;
-      }
+@media (width >= 80rem) {
+  .bk .bk-search-item-icon {
+    width: 80px;
+    height: 80px;
+  }
 }
-
-@media (min-width: 1280px) {
-      .bk .bk-search-item-icon {
-            width: 80px;
-            height: 80px;
-      }
+:is(.bk .bk-search-item-icon) .bk-blokkli-item-icon {
+  height: 100%;
+  width: 100%;
 }
-
-.bk .bk-search-item-icon .bk-blokkli-item-icon {
-      height: 100%;
-      width: 100%;
+:is(.bk .bk-search-item-icon) img {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
-
-.bk .bk-search-item-icon img {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-}
-
 .bk .bk-search-item-content {
-      width: 100%;
-      min-width: 0px;
-      max-width: 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0px;
 }
-
 .bk .bk-search-item-title {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      vertical-align: baseline;
-      font-size: 14px;
-      line-height: 20px;
-      font-weight: 700;
-      line-height: 1.25 !important;
-}
-
-@media (min-width: 1024px) {
-      .bk .bk-search-item-title {
-            font-size: 16px;
-            line-height: 24px;
-      }
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  vertical-align: baseline;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: var(--leading-tight, 1.25) !important;
+  line-height: var(--leading-tight, 1.25) !important;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+@media (width >= 64rem) {
+  .bk .bk-search-item-title {
+    font-size: var(--text-base, 16px);
+    line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  }
 }
-
 .bk .bk-search-item-title {
-      white-space: normal;
-      overflow-wrap: break-word;
-}
-
-.bk .bk-search-item-title div {
-      display: inline-block;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
-
-.bk .bk-search-item-context {
-      display: inline;
-      white-space: nowrap;
-      vertical-align: baseline;
-      font-size: 12px;
-      line-height: 16px;
-      font-weight: 600;
-      text-transform: uppercase;
-      border-radius: 4px;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-      padding-top: 3px;
-      padding-bottom: 3px;
-      padding-left: 5px;
-      padding-right: 5px;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+:is(.bk .bk-search-item-title) div {
+  display: inline-block;
 }
-
 .bk .bk-search-item-subtitle {
-      width: 100%;
-      min-width: 0px;
-      align-items: baseline;
-      overflow: hidden;
-      font-size: 14px;
-      line-height: 20px;
+  width: 100%;
+  min-width: 0px;
+  align-items: baseline;
+  overflow: hidden;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
 }
-
 .bk .bk-search-item-text {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      min-width: 0px;
-      max-width: 100%;
-      white-space: normal;
-      overflow-wrap: break-word;
-      font-size: 14px;
-      line-height: 20px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-width: 100%;
+  min-width: 0px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  overflow-wrap: break-word;
+  white-space: normal;
 }
-
 .bk .bk-search-no-results {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      line-height: 28px;
-      font-weight: 500;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(.bk .bk-search-no-results) svg {
+  margin-bottom: 15px;
+  height: 100px;
+  width: 100px;
+  fill: currentcolor;
 }
-
-.bk .bk-search-no-results svg {
-      margin-bottom: 15px;
-      height: 100px;
-      width: 100px;
-      fill: currentColor;
-}
-
 .bk .bk-search-tabs {
-      display: flex;
-      justify-content: space-between;
-      border-bottom-width: 1px;
-      --bk-tw-border-opacity: 1;
-      border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk .bk-search-tabs li button {
-      width: 100%;
-      padding-left: 15px;
-      padding-right: 15px;
-      padding-top: 12px;
-      padding-bottom: 12px;
-      text-align: center;
-      font-size: 12px;
-      line-height: 16px;
-      text-transform: uppercase;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-}
-
-@media (min-width: 768px) {
-      .bk .bk-search-tabs li button {
-            font-size: 14px;
-            line-height: 20px;
-      }
+  display: flex;
+  justify-content: space-between;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: white;
+}
+:is(:is(.bk .bk-search-tabs) li) button {
+  width: 100%;
+  padding-inline: 15px;
+  padding-block: 12px;
+  text-align: center;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-transform: uppercase;
+}
+@media (width >= 48rem) {
+  :is(:is(.bk .bk-search-tabs) li) button {
+    font-size: var(--text-sm, 14px);
+    line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
 }
-
-@media (min-width: 1024px) {
-      .bk .bk-search-tabs li button {
-            padding: 20px;
-      }
+@media (width >= 64rem) {
+  :is(:is(.bk .bk-search-tabs) li) button {
+    padding: 20px;
+  }
 }
-
-.bk .bk-search-tabs li button[disabled] {
-      pointer-events: none;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+[disabled]:is(:is(:is(.bk .bk-search-tabs) li) button) {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-mono-300) / 1);
 }
-
-.bk .bk-search-tabs li:not(.bk-is-active):hover button:not([disabled]) {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1));
+:is(:is(.bk .bk-search-tabs) li):not(.bk-is-active):hover button:not([disabled]) {
+  color: rgb(var(--bk-theme-mono-800) / 1);
 }
-
-.bk .bk-search-tabs li.bk-is-active button {
-      font-weight: 700;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1));
+.bk-is-active:is(:is(.bk .bk-search-tabs) li) button {
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  color: rgb(var(--bk-theme-accent-700) / 1);
 }
-
 .bk .bk-highlight {
-      white-space: pre;
-}
-
-.bk .bk-highlight em {
-      position: relative;
-      display: inline-block;
-      border-radius: 4px;
-      font-style: normal;
-      background-color: rgb(var(--bk-theme-yellow-normal) / 0.3);
-      outline-style: solid;
-      outline-width: 1px;
-      outline-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  white-space: pre;
+}
+:is(.bk .bk-highlight) em {
+  position: relative;
+  display: inline-block;
+  border-radius: 4px;
+  font-style: normal;
+  background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 30%, transparent);
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-color: rgb(var(--bk-theme-yellow-normal) / 1);
 }
-
 .bk .bk-search-list {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      height: 100%;
-      width: 100%;
-      overflow: auto;
-      overscroll-behavior: contain;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
-
 .bk .bk-search-item {
-      position: relative;
-      display: flex;
-      width: 100%;
-      cursor: pointer;
-      align-items: stretch;
-      gap: 10px;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-      padding-left: 20px;
-      padding-right: 20px;
-      padding-top: 15px;
-      padding-bottom: 15px;
-      text-align: left;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
-}
-
-@media (min-width: 768px) {
-      .bk .bk-search-item {
-            padding-top: 20px;
-            padding-bottom: 20px;
-      }
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: stretch;
+  gap: 10px;
+  background-color: white;
+  padding-inline: 20px;
+  padding-block: 15px;
+  text-align: left;
+  color: rgb(var(--bk-theme-mono-700) / 1);
+}
+@media (width >= 48rem) {
+  .bk .bk-search-item {
+    padding-block: 20px;
+  }
 }
-
-.bk .bk-search-item.bk-is-content {
-      cursor: grab;
+.bk-is-content:is(.bk .bk-search-item) {
+  cursor: grab;
 }
-
-.bk .bk-search-item:after {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-      height: 0.5px;
-      width: 100%;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-    }
-
-.bk .bk-search-item.bk-is-active {
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1));
+:is(.bk .bk-search-item):after {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  height: 0.5px;
+  width: 100%;
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
 }
-
-.bk .bk-search-item.bk-is-active .bk-search-item-icon {
-      --bk-tw-border-opacity: 1;
-      border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-accent-600) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+.bk-is-active:is(.bk .bk-search-item) {
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  color: rgb(var(--bk-theme-mono-950) / 1);
 }
-
-.bk .bk-search-item.bk-is-active .bk-search-item-icon.bk-is-image {
-      outline-style: solid;
-      outline-width: 1px;
-      outline-color: rgb(var(--bk-theme-accent-900) / 1);
+.bk-is-active:is(.bk .bk-search-item) .bk-search-item-icon {
+  border-color: rgb(var(--bk-theme-accent-700) / 1);
+  background-color: rgb(var(--bk-theme-accent-600) / 1);
+  color: white;
 }
-
-.bk .bk-search-item:hover .bk-search-item-context {
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1));
+.bk-is-image:is(.bk-is-active:is(.bk .bk-search-item) .bk-search-item-icon) {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-color: rgb(var(--bk-theme-accent-900) / 1);
 }
-
 .bk-vars.bk-dragging-overlay .bk-search-item {
-      overflow: hidden;
-      border-radius: 8px;
+  overflow: hidden;
+  border-radius: 4px;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>