@gem-sdk/styles 1.22.9 → 1.22.31-new-feature.2

package/dist/builder.css

@@ -3,24 +3,30 @@
   -webkit-touch-callout: none;
   user-select: none;
 }
+
   .builder [disabled] {
     pointer-events: auto;
   }
+
   .builder [data-slot='children'] {
     visibility: visible;
   }
+
   .builder [data-slot='children']:after {
       visibility: visible;
       color: #aaa;
     }
+
   .builder [data-slot='children'] .drag-placeholder {
       height: 100%;
     }
+
   .builder .generate-image-to-layout-btn {
     position: relative;
     background-image: linear-gradient(270.07deg, #874cfd 0.03%, #3c38e1 99.92%);
     z-index: 1;
   }
+
   .builder .generate-image-to-layout-btn::before {
     position: absolute;
     content: '';
@@ -34,22 +40,27 @@
     opacity: 0;
     border-radius: 3px;
   }
+
   .builder .btn-disable {
     background-image: none;
     background-color: #f4f4f4;
     color: #9e9e9e;
     cursor: not-allowed;
   }
+
   .builder .generate-image-to-layout-btn:hover::before {
     opacity: 1;
   }
+
   .builder .image-to-layout-input-border {
     border: 1px solid #3c38e1;
     border-radius: 3px;
   }
+
   .builder .image-to-layout-input-wrapper-modal {
     position: relative;
   }
+
   .builder .image-to-layout-input-wrapper,
   .builder .image-to-layout-input-wrapper-add-section {
     position: relative;
@@ -57,20 +68,25 @@
     background-clip: padding-box;
     box-sizing: border-box;
   }
+
 .image-to-layout-input-wrapper-add-section {
   border: 1px solid #3c67ff;
 }
+
 .gps-image-to-layout-progress-bar {
   background: linear-gradient(270.07deg, #874cfd 0.03%, #3c38e1 99.92%);
 }
+
 .drag-placeholder {
   display: none;
   width: 100%;
 }
+
 #storefront {
   position: relative;
   z-index: 20;
 }
+
 #visual-content {
   display: none;
   position: absolute;
@@ -82,6 +98,7 @@
   font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
   min-height: 100vh;
 }
+
 #visual-content .fake-placeholder {
     position: absolute;
     top: 0px;
@@ -92,9 +109,11 @@
     /* display: none; */
     background-image: url('//d1um8515vdn9kb.cloudfront.net/images/background-pattern.png');
   }
+
 #visual-content .fake-placeholder.fake-placeholder-slot {
       background: transparent;
     }
+
 #visual-content .fake-placeholder.has-section {
       /* background-color: transparent !important;
       border: none !important;
@@ -107,15 +126,21 @@
       height: 6px;
       margin: 0px !important;
     }
+
 #visual-content .fake-placeholder.visual-placeholder-error {
       background-color: #fee4e3 !important;
     }
+
 #visual-content .fake-placeholder.visual-placeholder-error .limitation-error-content {
         display: none;
       }
+
 #visual-content .fake-placeholder.visual-placeholder-error {
 
-      font-family: Inter, sans-serif, ui-sans-serif, system-ui;
+      font-family: Inter,
+      sans-serif,
+      ui-sans-serif,
+      system-ui;
       border: 1px dashed #f44336 !important;
       visibility: visible;
       color: #f44336 !important;
@@ -125,11 +150,14 @@
       position: relative;
       text-align: center;
 }
+
 /* border-radius: 3px; */
+
 #visual-content .fake-placeholder.visual-placeholder-error.children-error {
         background-color: #f44336 !important;
         border: none !important;
       }
+
 #visual-content .fake-placeholder.visual-placeholder-error.limitation-error .limitation-error-content {
           display: flex;
           align-items: center;
@@ -138,12 +166,14 @@
           padding: 4px 8px;
           border-radius: 3px;
         }
+
 #visual-content .fake-placeholder.visual-placeholder-error.limitation-error .limitation-error-content span {
             margin-left: 8px;
             font-weight: 500;
             font-size: 14px;
             line-height: 150%;
           }
+
 #visual-content .fake-placeholder.visual-placeholder {
       z-index: 20;
       /* border-radius: 3px; */
@@ -157,9 +187,11 @@
       visibility: visible;
       background-color: #8aa4ff66;
     }
+
 #visual-content .fake-placeholder.visual-placeholder-child-on-sections {
       margin: 16px !important;
     }
+
 #visual-content .fake-placeholder.visual-placeholder-between-sections {
       background-color: #3c67ff;
       border: none;
@@ -168,107 +200,133 @@
       height: 6px;
       margin: 0px !important;
     }
+
 #visual-content .fake-placeholder.not-show {
       display: none;
     }
-#visual-content .fake-placeholder[is-blank-page='true'] {
+
+/* &[is-blank-page='true'] {
       background-color: #d8e1ff !important;
-    }
+    } */
+
 #visual-content .fake-placeholder[is-component-dragging='true'] {
       background-color: #8aa4ff66 !important;
     }
+
 /* section:last-child {
   [data-slot='children'] {
     min-height: 358px;
   }
 } */
+
 [contenteditable='true']:active,
 [contenteditable='true']:focus,
 [contenteditable='true']:focus-visible {
   outline: none;
   overflow: hidden;
 }
+
 [data-component-is-third-party='true'] {
   background-color: #f4f4f4;
 }
+
 [data-component-tag='ProductTitle'],
 [data-component-tag='ProductDescription'],
 [data-component-tag='ProductPrice'],
 [data-component-tag='ProductTag'] {
   cursor: default;
 }
+
 :root {
   --selection-bg: #accef7;
 }
+
 .builder ::selection {
   color: currentColor;
   background: var(--selection-bg);
 }
+
 .builder ::-moz-selection {
   color: currentColor;
   background: var(--selection-bg);
 }
+
 .gps-drag-element-here {
   font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%233C67FFFF' stroke-width='2' stroke-dasharray='12%2c12' stroke-dashoffset='72' stroke-linecap='square'/%3e%3c/svg%3e");
 }
+
 .gps-page-suggestion {
   background: #fff;
   border-radius: 3px;
   font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 4px 16px rgba(0, 0, 0, 0.12);
 }
+
 .gps-suggestion-item .gps-suggestion-item-btn {
   display: flex;
 }
+
 .gps-suggestion-item .item-link {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 360px;
 }
+
 .gps-suggestion-item:hover .item-link {
   width: 360px;
 }
+
 .gps-base-font-family {
   font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
 }
+
 .btn-disable::before {
   background: none !important;
   background-color: #f4f4f4 !important;
   color: #9e9e9e;
 }
+
 .gps-image-detection-section:hover .gps-generating-actions {
   display: flex;
 }
+
 .gps-generating-section-text {
   background: -webkit-linear-gradient(#874cfd, #3c38e1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
 .ck-blurred {
   cursor: pointer;
 }
+
 .ck-focused {
   cursor: text;
 }
+
 .button-text {
   position: relative;
 }
+
 .button-text.ck-focused,
 .child-item-text.ck-focused {
   border-color: transparent !important;
   box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 2px, #3c67ff 0px 0px 0px 1px,
     #3c67ff3d 0px 0px 0px 5px;
 }
+
 .button-text.ck p {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .gp-text.ck p {
   word-break: break-word;
 }
+
 .button-text:hover::after {
   content: '';
   position: absolute;
@@ -279,9 +337,11 @@
   border: 1px solid #3c67ff;
   pointer-events: none;
 }
+
 .button-text.ck-focused:hover::after {
   border: 0 !important;
 }
+
 .sticky-overlay {
   position: fixed;
   top: 0;
@@ -295,21 +355,626 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  /* &.is-blank-page {
+    background-color: #d8e1ff !important;
+  } */
 }
+
 .sticky-overlay.highlight-top {
     border-top-width: 6px;
   }
+
 .sticky-overlay.highlight-bottom {
     border-bottom-width: 6px;
   }
-.sticky-overlay.is-blank-page {
-    background-color: #d8e1ff !important;
+
+/* Thêm code này sẽ làm lỗi tính năng fix height ở carousel, nhưng nếu k có thì toolbar sẽ bị ẩn nếu nằm trong carousel */
+
+.builder .gem-slider:not([data-keen-slider-disabled]) {
+  overflow: unset;
+}
+
+[data-toolbar-wrap] {
+  position: relative;
+}
+
+/* Toolbar style default */
+
+[data-toolbar-wrap] [data-toolbar] {
+    position: absolute;
+    z-index: 20;
+    height: 24px;
+    top: -23px;
+    left: 0;
+    max-width: unset;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    color: #3c67ff;
+    background: #fff;
+    border: solid 1px #3c67ff;
+    white-space: nowrap;
+    pointer-events: unset;
+    font-family: Inter, sans-serif, ui-sans-serif, system-ui;
+    opacity: 0;
+    visibility: hidden;
+    cursor: pointer;
+    -webkit-user-select: none;
+            user-select: none;
+    transition: background 200ms ease-out;
+  }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent],
+    [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
+      display: flex;
+      align-items: center;
+    }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag], [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] {
+        display: block;
+      }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg, [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg {
+          display: block;
+          max-width: unset;
+          width: 16px;
+          height: 16px;
+        }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name], [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name] {
+        display: block;
+        white-space: nowrap;
+        font-size: 12px;
+        padding-left: 4px;
+        padding-right: 4px;
+        font-weight: 500;
+      }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
+      position: absolute;
+      top: -24px;
+      left: -1px;
+      height: 24px;
+      padding: 4px;
+      opacity: 1;
+      visibility: visible;
+      z-index: 30;
+      color: #3c67ff;
+      background: #fff;
+      border: solid 1px #3c67ff;
+    }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover {
+        background: #c5d2ff;
+      }
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section] {
+      padding-left: 8px;
+      padding-right: 4px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      margin-left: 4px;
+      border-left: solid 1px;
+      border-color: #D6D6D6;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+
+/* hidden icon with hover state*/
+
+[data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],
+    [data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],
+    [data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],
+    [data-toolbar-wrap] [data-toolbar] [data-toolbar-delete] {
+      display: none;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"] {
+    color: #9144DA;
+  }
+
+/* State Toolbar */
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-hover],
+  [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover] {
+    opacity: 1;
+    visibility: visible;
+    z-index: 30;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover {
+      background: #c5d2ff;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
+    background: #d8e1ff;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover {
+      background: #c5d2ff;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"][data-toolbar-hover][data-toolbar-hover-focus] {
+    background: #EBDDF8;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"][data-toolbar-hover]:hover {
+      background: #EBDDF8;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] {
+    opacity: 1;
+    visibility: visible;
+    z-index: 20;
+    height: 32px;
+    top: -31px;
+    background: #3c67ff;
+    color: #fff;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus] {
+      background: #3c67ff;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover {
+        background: #3c67ff;
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"] {
+      background: #9144DA;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"][data-toolbar-hover-focus] {
+        background: #9144DA;
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"][data-toolbar-hover-focus]:hover {
+          background: #9144DA;
+        }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
+      padding: 4px;
+      border-radius: 2px;
+      transition: background 200ms ease-in-out;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
+        display: block;
+        transition: -webkit-transform 200ms ease-in-out;
+        transition: transform 200ms ease-in-out;
+        transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg {
+          display: block;
+          max-width: unset;
+          width: 16px;
+          height: 16px;
+        }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open='true'] {
+          -webkit-transform: rotate(180deg);
+                  transform: rotate(180deg);
+        }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
+        background: rgba(225, 225, 225, 0.2);
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
+    [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
+    [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
+      display: block;
+      padding: 4px;
+      border-radius: 2px;
+      transition: background 200ms ease-in-out;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg {
+        display: block;
+        max-width: unset;
+        width: 16px;
+        height: 16px;
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover {
+        background: rgba(225, 225, 225, 0.2);
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper] {
+      padding: 0 4px;
+      margin: 0 4px;
+      border-left: solid 1px #7190FF;
+      border-right: solid 1px #7190FF;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
+      display: flex !important;
+      align-items: center;
+      gap: 4px;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p {
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section] {
+      display: none;
+    }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'] {
+    left: unset;
+    right: 0;
+    border-color: #d6d6d6;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
+    border-color: #3c67ff;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
+  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
+    border-color: #3c67ff;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
+    display: none;
+  }
+
+[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover-focus],
+  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] {
+    border-color: #9144DA;
+  }
+
+/* Outline style default */
+
+[data-toolbar-wrap] [data-outline] {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px #3c67ff;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+/* State Outline */
+
+[data-toolbar-wrap] [data-outline][data-outline-hover],
+  [data-toolbar-wrap] [data-outline][data-outline-force-hover] {
+    opacity: 1;
+    visibility: visible;
+    z-index: 12;
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-active] {
+    opacity: 1;
+    visibility: visible;
+    z-index: 15;
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-overlay],
+  [data-toolbar-wrap] [data-outline][data-outline-force-overlay] {
+    background: rgba(60, 103, 255, 0.1);
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section] {
+    background: rgba(255, 255, 255, 0.20);
+    -webkit-backdrop-filter: blur(3px);
+            backdrop-filter: blur(3px);
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-section='true'] {
+    border-color: #d6d6d6;
+    z-index: 10;
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-hover-focus],
+  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-active] {
+    border-color: #3c67ff;
+    z-index: 15;
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus] {
+    border-color: #3c67ff;
+    outline: 4px solid rgba(60, 103, 255, 0.24);
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    z-index: 15;
+  }
+
+[data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
+  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-active] {
+    border-color: #9144DA;
+    z-index: 15;
+  }
+
+[data-toolbar-wrap] [data-theme-section-status] {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 3px;
+    color: #212121;
+    background: #EBDDF8;
+    width: -webkit-max-content;
+    width: max-content;
+    position: absolute;
+    z-index: 50;
+    left: 8px;
+    top: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+[data-toolbar-wrap] [data-theme-section-status-icon] {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+[data-toolbar-wrap] [data-theme-section-status-text] {
+    display: none;
+  }
+
+[data-toolbar-wrap] [data-theme-section-status-icon]:hover [data-theme-section-status-text] {
+    display: block;
+  }
+
+[data-toolbar-wrap] [data-theme-section-status][data-theme-section-status-active] {
+    display: flex;
+  }
+
+/* Action add style default */
+
+[data-toolbar-wrap] [data-toolbar-add-top],
+  [data-toolbar-wrap] [data-toolbar-add-bottom] {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    color: #3c67ff;
+    border: solid 1px #d6d6d6;
+    border-radius: 3px;
+    cursor: pointer;
+    position: absolute;
+    z-index: 50;
+    left: calc(50% - 16px);
+    top: -16px;
+    display: none;
+    -webkit-user-select: none;
+            user-select: none;
+    transition: border-color 200ms ease-in-out;
+  }
+
+[data-toolbar-wrap] [data-toolbar-add-top] svg, [data-toolbar-wrap] [data-toolbar-add-bottom] svg {
+      width: 16px;
+      height: 16px;
+      transition: -webkit-transform 200ms ease-in-out;
+      transition: transform 200ms ease-in-out;
+      transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
+    }
+
+[data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
+      border-color: #3c67ff;
+    }
+
+[data-toolbar-wrap] [data-toolbar-add-bottom] {
+    top: unset;
+    bottom: -16px;
+  }
+
+/* Active add state */
+
+[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open='true'] svg, [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open='true'] svg {
+      -webkit-transform: rotate(45deg);
+              transform: rotate(45deg);
+    }
+
+[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover],
+  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover] {
+    display: flex;
+  }
+
+[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],
+  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active] {
+    display: flex;
   }
+
+/* Resize spacing */
+
+[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] {
+      position: absolute;
+      z-index: 20;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      display: none;
+    }
+
+[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: #3c67ff33;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value] {
+          background-color: #3c67ff;
+          padding: 2px;
+          position: absolute;
+          font-size: 8px;
+          color: #fff;
+          border-radius: 4px;
+          font-weight: bold;
+
+          display: none;
+        }
+
+[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag] {
+        position: absolute;
+        bottom: 0;
+        height: 4px;
+        width: 40px;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        cursor: ns-resize;
+        background-color: #3c67ff;
+        transition: height 0.2s;
+        -webkit-transform: translateY(-100%);
+                transform: translateY(-100%);
+      }
+
+[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover {
+          height: 6px;
+        }
+
+[data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active] {
+    display: flex;
+  }
+
+/* Create theme section tooltip */
+
+.theme-section-tooltip-wrapper {
+  position: relative;
+}
+
+.theme-section-tooltip-wrapper .theme-section-tooltip {
+    cursor: default;
+    min-width: 284px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 3px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    padding-top: 9px;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip::before {
+    content: "";
+    position: absolute;
+    height: 8px;
+    width: 8px;
+    background: #212121;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+    right: 16px;
+    top: 6px;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__image {
+    background: #212121;
+    border-radius: 3px 3px 0 0;
+    padding-top: 16px;
+    padding-bottom: 8px;
+    padding-left: 21px;
+    padding-right: 20px;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    background: #151515;
+    text-wrap: wrap;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__body-title {
+      color: #F9F9F9;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 24px;
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__body-desc {
+      color: #AAA;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action {
+    padding: 16px;
+    border-radius: 0 0 3px 3px;
+    border-top: solid 1px #3B3B3B;
+    background: #151515;
+    display: flex;
+    flex-direction: column;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action button {
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+      background: #3C67FF;
+      border-radius: 3px;
+      height: 40px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #F9F9F9;
+      font-weight: 500;
+      transition: all 0.15s ease-in;
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover {
+      background: #2856F8;
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button {
+      background: #FDB913 !important;
+      color: #212121 !important;
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover {
+      background: #FDC742 !important;
+    }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more {
+    color: #8AA4FF;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+    margin-top: 8px;
+    cursor: pointer;
+    transition: all 0.15s ease-in;
+  }
+
+.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover {
+      color: #3C67FF;
+    }
+
 @media (max-width: 768px) {
   .gps-suggestion-item:hover .item-link {
     width: 196px;
   }
+
   .gps-suggestion-item .item-link {
     width: 196px;
   }
-}
+}