@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

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

@@ -84,3 +84,732 @@ export default {
   name: "Options"
 };
 </script>
+
+<style>
+.bk .bk-blokkli-item-options {
+    display: flex;
+    min-width: 100vw;
+    height: var(--bk-actions-height);
+    overflow: auto;
+}
+@media (min-width: 1024px) {
+    .bk .bk-blokkli-item-options {
+        overflow: visible;
+        border-left-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-left-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
+    }
+}
+.bk .bk-blokkli-item-options {
+    order: -9999;
+    min-width: 100%;
+}
+@media (min-width: 1024px) {
+    .bk .bk-blokkli-item-options {
+        order: 0;
+        min-width: 0px;
+    }
+}
+    .bk .bk-blokkli-item-options::-webkit-scrollbar {
+      display: none;
+    }
+    .bk .bk-blokkli-item-options:empty {
+    display: none;
+}
+    .bk .bk-blokkli-item-options:not(:empty) {
+    border-bottom-width: 1px;
+    border-bottom-color: rgb(var(--bk-theme-mono-500) / 0.25);
+}
+    @media (min-width: 1024px) {
+    .bk .bk-blokkli-item-options:not(:empty) {
+        border-bottom-width: 0;
+    }
+}
+  .bk .bk-blokkli-item-options-item-content {
+    height: 100%;
+}
+  .bk .bk-blokkli-item-options-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+}
+  .bk .bk-blokkli-item-options-item.bk-is-disabled {
+    pointer-events: none;
+    opacity: 0.2;
+}
+  @media (min-width: 1024px) {
+    .bk .bk-blokkli-item-options-item:not(:last-child) {
+        border-right-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-right-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+    }
+    .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-text input,
+        .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-checkbox,
+        .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-checkboxes {
+        border-start-end-radius: 6px;
+        border-end-end-radius: 6px;
+    }
+    .bk .bk-blokkli-item-options-group:last-child > button {
+        border-start-end-radius: 6px;
+        border-end-end-radius: 6px;
+    }
+}
+  .bk .bk-blokkli-item-options-checkbox {
+    position: relative;
+    display: inline-flex;
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-checkbox:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+    }
+    }
+  .bk .bk-blokkli-item-options-checkbox input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+  .bk .bk-blokkli-item-options-checkbox input:checked + div {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-checkbox input:checked + div::after {
+    --bk-tw-translate-x: 100%;
+    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-border-opacity: 1;
+    border-color: rgb(255 255 255 / var(--bk-tw-border-opacity, 1));
+    content: var(--bk-tw-content);
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-checkbox > div {
+    position: relative;
+    height: 20px;
+    width: 36px;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-checkbox > div::after {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: 16px;
+    width: 16px;
+    border-radius: 9999px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-content: '';
+    content: var(--bk-tw-content);
+}
+  .bk .bk-blokkli-item-options-checkbox > span {
+    display: inline-block;
+    padding-left: 10px;
+}
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) {
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    user-select: none;
+    font-size: 14px;
+    line-height: 20px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label {
+    display: flex;
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+}
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label input:checked + span {
+    --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-900) / var(--bk-tw-text-opacity, 1));
+}
+  @media not all and (hover: none) {
+        .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label:hover input:not(:checked) + span {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    }
+      }
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label span {
+    display: inline-block;
+    border-radius: 24px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label.bk-is-muted {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-color {
+    display: flex;
+    height: 100%;
+    align-items: stretch;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-color label {
+    display: flex;
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-color label div {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    border-radius: 9999px;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-color label input {
+    margin-right: 1px;
+    cursor: pointer;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-color label span {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    font-size: 0px;
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: transparent;
+}
+  @media not all and (hover: none) {
+        .bk .bk-blokkli-item-options-radios.bk-is-color label:hover input:not(:checked) + span {
+        outline-color: rgb(var(--bk-theme-mono-400) / 1);
+    }
+      }
+  .bk .bk-blokkli-item-options-radios.bk-is-color label input {
+        opacity: 0;
+      }
+  .bk .bk-blokkli-item-options-radios.bk-is-color label input:checked + span {
+    outline-color: rgb(var(--bk-theme-mono-50) / 1);
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons {
+    gap: 10px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon {
+    opacity: 0.3;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg {
+    height: 24px;
+    width: auto;
+    fill: currentColor;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-fill {
+    fill: rgb(var(--bk-theme-mono-700) / 1);
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-fill-strong {
+    fill: rgb(var(--bk-theme-mono-200) / 1);
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-stroke {
+    stroke: currentColor;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons input:not(:checked):hover + .bk-blokkli-item-options-radios-icon {
+    opacity: 0.5;
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-icons input:checked + .bk-blokkli-item-options-radios-icon {
+    opacity: 1;
+}
+  .bk .bk-blokkli-item-options-text {
+    position: relative;
+    height: 100%;
+    cursor: pointer;
+}
+  .bk .bk-blokkli-item-options-text input {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+  .bk .bk-blokkli-item-options-text input:focus {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    --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 .bk-blokkli-item-options-text > div {
+    pointer-events: none;
+    visibility: hidden;
+    white-space: pre;
+    padding-left: 10px;
+    padding-right: 10px;
+    min-width: 100px;
+    max-width: 250px;
+    overflow: hidden;
+}
+  @media not all and (hover: none) {
+      .bk .bk-blokkli-item-options-text:hover {
+        color: var(--gin-color-primary);
+      }
+    }
+  .bk .bk-blokkli-item-options-date {
+    position: relative;
+    height: 100%;
+    cursor: pointer;
+}
+  .bk .bk-blokkli-item-options-date input {
+    height: 100%;
+    background-color: transparent;
+    padding-left: 10px;
+    padding-right: 10px;
+    accent-color: rgb(var(--bk-theme-mono-100) / 1);
+}
+  .bk .bk-blokkli-item-options-date input:focus {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    --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;
+}
+  @media not all and (hover: none) {
+      .bk .bk-blokkli-item-options-date:hover {
+        color: var(--gin-color-primary);
+      }
+    }
+  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex {
+    position: relative;
+    margin-left: 5px;
+    margin-right: 5px;
+    display: flex;
+    height: 20px;
+    width: 60px;
+    border-width: 1px;
+    border-color: currentColor;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex > div {
+    position: relative;
+    height: 100%;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex > div:not(:last-child):after {
+          content: '';
+          position: absolute;
+          top: -1px;
+          right: 0px;
+          bottom: -1px;
+          border-right-width: 1px;
+          border-color: currentColor;
+        }
+  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div {
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div > div {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div > div:after {
+    --bk-tw-border-opacity: 1 !important;
+    border-right-color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-border-opacity, 1)) !important;
+}
+  @media not all and (hover: none) {
+        .bk .bk-blokkli-item-options-radios.bk-is-grid label:hover input:not(:checked) + div {
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+    }
+          .bk .bk-blokkli-item-options-radios.bk-is-grid label:hover input:not(:checked) + div > div {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-bg-opacity, 1));
+    }
+      }
+  .bk .bk-blokkli-item-options-checkboxes {
+    height: 100%;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+  .bk .bk-blokkli-item-options-checkboxes.bk-is-grouped {
+    height: auto;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+  .bk .bk-blokkli-item-options-checkboxes.bk-is-grouped > div {
+    position: static;
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-checkboxes:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    }
+    }
+  .bk .bk-blokkli-item-options-checkboxes button {
+    display: flex;
+    height: 100%;
+    min-width: 200px;
+    align-items: center;
+    gap: 10px;
+}
+  .bk .bk-blokkli-item-options-checkboxes button svg {
+        fill: currentColor;
+        height: 15px;
+        width: 20px;
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+      }
+  .bk .bk-blokkli-item-options-checkboxes button > span:first-child {
+    margin-right: auto;
+}
+  .bk .bk-blokkli-item-options-checkboxes > div {
+    position: fixed;
+    left: 0px;
+    display: grid;
+    min-width: 100%;
+    overflow: hidden;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+    bottom: 100%;
+}
+  @media (min-width: 768px) {
+  .bk .bk-blokkli-item-options-checkboxes > div {
+        position: absolute;
+        top: 100%;
+        bottom: auto;
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+      }
+  .bk .bk-blokkli-item-options-checkboxes > div label {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-checkboxes > div label:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    }
+        }
+  .bk .bk-blokkli-item-options-checkboxes.bk-is-active {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-checkboxes.bk-is-active button svg {
+    --bk-tw-rotate: 180deg;
+    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 .bk-blokkli-item-options-color {
+    position: relative;
+    display: flex;
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-color:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    }
+    }
+  .bk .bk-blokkli-item-options-color input {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0;
+}
+  .bk .bk-blokkli-item-options-color .bk-blokkli-item-options-color-preview {
+    height: 20px;
+    width: 20px;
+    border-radius: 9999px;
+}
+  .bk .bk-blokkli-item-options-color .bk-blokkli-item-options-color-label {
+    margin-left: 10px;
+    font-family: monospace;
+}
+  .bk .bk-blokkli-item-options-range {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    gap: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+  .bk .bk-blokkli-item-options-range input {
+    height: 5px;
+    width: 120px;
+    appearance: none;
+    border-radius: 9999px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1));
+}
+  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+  .bk .bk-blokkli-item-options-range input::-webkit-slider-thumb {
+    appearance: none;
+    border-radius: 9999px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+        width: 15px; /* Set a specific slider handle width */
+        height: 15px; /* Slider handle height */
+        cursor: pointer; /* Cursor on hover */
+}
+  .bk .bk-blokkli-item-options-range input::-moz-range-thumb {
+    border-radius: 9999px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+        width: 15px; /* Set a specific slider handle width */
+        height: 15px; /* Slider handle height */
+        cursor: pointer; /* Cursor on hover */
+}
+  .bk .bk-blokkli-item-options-range > div {
+    min-width: 40px;
+    text-align: right;
+    font-family: monospace;
+}
+  .bk .bk-blokkli-item-options-group {
+    position: relative;
+}
+  .bk .bk-blokkli-item-options-group > button {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    min-width: 200px;
+    align-items: center;
+    gap: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 14px;
+    line-height: 20px;
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-group > button:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    }
+      }
+  .bk .bk-blokkli-item-options-group > button .bk-icon {
+    margin-left: auto;
+}
+  .bk .bk-blokkli-item-options-group > button svg {
+        fill: currentColor;
+        height: 15px;
+        width: 20px;
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+      }
+  .bk .bk-blokkli-item-options-group.bk-is-active:last-child > button {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+  .bk .bk-blokkli-item-options-group.bk-is-active > button {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-group.bk-is-active > button svg {
+    --bk-tw-rotate: 180deg;
+    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 .bk-blokkli-item-options-group-content {
+    position: absolute;
+    position: fixed;
+    left: 0px;
+    display: grid;
+    min-width: 100%;
+    overflow: hidden;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+    bottom: 100%;
+}
+  @media (min-width: 768px) {
+  .bk .bk-blokkli-item-options-group-content {
+        position: absolute;
+        top: 100%;
+        bottom: auto;
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+    }
+  .bk .bk-blokkli-item-options-group-content > label {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-group-content > label:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    }
+      }
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content {
+    height: 50px;
+}
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content.bk-is-grouped {
+    height: auto;
+    min-height: 50px;
+    width: 100%;
+}
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content.bk-is-grouped .bk-blokkli-item-options-checkbox {
+    height: 50px;
+    width: 100%;
+    white-space: nowrap;
+}
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item:not(:last-child) {
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item .bk-blokkli-item-options-item-label {
+    margin-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-weight: 600;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-complex-type {
+    display: flex;
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+    gap: 10px;
+    white-space: nowrap;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+  @media not all and (hover: none) {
+  .bk .bk-blokkli-item-options-complex-type:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+    }
+    }
+  .bk .bk-blokkli-item-options-complex-type .bk-icon {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+}
+  .bk .bk-blokkli-item-options-number {
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+  .bk .bk-blokkli-item-options-number input {
+    height: 100%;
+    appearance: none;
+    background-color: transparent;
+    text-align: center;
+    font-family: monospace;
+}
+  .bk .bk-blokkli-item-options-number 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-width: 0px;
+}
+  .bk .bk-blokkli-item-options-number input::-webkit-inner-spin-button {
+    display: none;
+    height: 0px;
+    width: 0px;
+    appearance: none;
+}
+  .bk .bk-blokkli-item-options-number button {
+    display: flex;
+    height: 20px;
+    width: 20px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+}
+  .bk .bk-blokkli-item-options-number button:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-number button[disabled] {
+    pointer-events: none;
+    background-color: transparent;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-blokkli-item-options-number button .bk-icon {
+    height: 15px;
+    width: 15px;
+    fill: currentColor;
+}
+</style>