DPIB-496: AI Feature integrations. (#11095)

AI Feature integrations

assets/Zed/sass/_action-buttons.scss

@@ -51,3 +51,12 @@
 .btn-remove {
     @include coloredButton(#ed5565, #ffffff);
 }
+
+.btn-naked {
+    background: none;
+    border: none;
+
+    &:is(:hover, :focus) {
+        opacity: 0.8;
+    }
+}

assets/Zed/sass/_custom.scss

@@ -1908,3 +1908,25 @@ a.label {
         }
     }
 }
+
+.form-wrapper-clickable-affix:has(.select2),
+.form-wrapper-clickable-affix:has(.form-control) {
+    position: relative;
+
+    .form-control,
+    .select2-selection {
+        padding-right: 43px;
+    }
+
+    .form-wrapper-clickable-affix__trigger {
+        position: absolute;
+        right: 10px;
+        bottom: 6px;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+}

assets/Zed/sass/_popover.scss

@@ -0,0 +1,54 @@
+.modal-popover {
+    padding: 0;
+    border: none;
+    opacity: 0;
+    transition: all 0.3s allow-discrete;
+
+    .modal {
+        display: block;
+    }
+
+    &:popover-open {
+        opacity: 1;
+
+        @starting-style {
+            opacity: 0;
+        }
+
+        &::backdrop {
+            opacity: 0.5;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+
+    &::backdrop {
+        opacity: 0;
+        background-color: $black;
+        transition: all 0.3s allow-discrete;
+    }
+
+    &:has(.modal-backdrop):popover-open::backdrop {
+        opacity: 0;
+    }
+
+    .modal-backdrop {
+        opacity: 0.5;
+        cursor: auto;
+    }
+}
+
+body:has(.modal-popover:popover-open) {
+    overflow: hidden;
+
+    * {
+        pointer-events: none;
+    }
+
+    .modal-popover,
+    .modal-popover * {
+        pointer-events: auto;
+    }
+}

assets/Zed/sass/main.scss

@@ -34,3 +34,4 @@ $icon-font-path: '../../fonts/bootstrap/';
 @import 'data-tables';
 @import 'wave-loader';
 @import 'product-item';
+@import 'popover';