diff --git a/plugins/main/public/components/common/doc-viewer/doc-viewer.scss b/plugins/main/public/components/common/doc-viewer/doc-viewer.scss
new file mode 100644
index 0000000000..7f46b8f7c9
--- /dev/null
+++ b/plugins/main/public/components/common/doc-viewer/doc-viewer.scss
@@ -0,0 +1,94 @@
+.wzDocViewerTable {
+  pre,
+  .wzDocViewer__value {
+    display: inline-block;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    color: $euiColorFullShade;
+    vertical-align: top;
+    padding-top: 2px;
+  }
+
+  .wzDocViewer__field {
+    padding-top: 8px;
+  }
+
+  .dscFieldName {
+    color: $euiColorDarkShade;
+  }
+
+  td,
+  pre {
+    font-family: $euiCodeFontFamily;
+  }
+
+  tr {
+    position: relative;
+  }
+
+  tr:first-child td {
+    border-top-color: transparent;
+  }
+
+  tr:hover {
+    .wzDocViewer__buttons {
+      display: flex;
+      gap: 2px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translateY(calc(50% - 8px));
+
+      > span {
+        z-index: 2;
+      }
+
+      .wzDocViewer__actionButton {
+        opacity: 1;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        right: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        background-image: linear-gradient(
+          to right,
+          transparent 0,
+          aliceblue 4px
+        );
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.wzDocViewer__buttons,
+.wzDocViewer__field {
+  white-space: nowrap;
+}
+
+.wzDocViewer__buttons {
+  display: none;
+}
+
+.wzDocViewer__field {
+  width: 160px;
+  white-space: break-spaces;
+}
+
+.wzDocViewer__actionButton {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.wzDocViewer__warning {
+  margin-right: $euiSizeS;
+}
diff --git a/plugins/main/public/components/common/doc-viewer/doc-viewer.tsx b/plugins/main/public/components/common/doc-viewer/doc-viewer.tsx
index 89e8b537eb..9ebc58e339 100644
--- a/plugins/main/public/components/common/doc-viewer/doc-viewer.tsx
+++ b/plugins/main/public/components/common/doc-viewer/doc-viewer.tsx
@@ -8,6 +8,7 @@ import { FILTER_OPERATOR } from '../data-source';
 import { DocViewTableRowBtnFilterAdd } from './table-row-btn-filter-add';
 import { DocViewTableRowBtnFilterRemove } from './table-row-btn-filter-remove';
 import { DocViewTableRowBtnFilterExists } from './table-row-btn-filter-exists';
+import './doc-viewer.scss';
 import { onFilterCellActions } from '../data-grid/filter-cell-actions';
 import { Filter } from '../../../../../../src/plugins/data/common';
 
diff --git a/plugins/main/public/styles/component.scss b/plugins/main/public/styles/component.scss
index c25539844f..b4d8f3a0ac 100644
--- a/plugins/main/public/styles/component.scss
+++ b/plugins/main/public/styles/component.scss
@@ -108,100 +108,3 @@ kbn-dis doc-table .kbnDocViewer__warning {
   display: flex;
   flex-direction: row;
 }
-
-/* Custom docViewer styles */
-
-.wzDocViewerTable {
-  pre,
-  .wzDocViewer__value {
-    display: inline-block;
-    word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    color: $euiColorFullShade;
-    vertical-align: top;
-    padding-top: 2px;
-  }
-
-  .wzDocViewer__field {
-    padding-top: 8px;
-  }
-
-  .dscFieldName {
-    color: $euiColorDarkShade;
-  }
-
-  td,
-  pre {
-    font-family: $euiCodeFontFamily;
-  }
-
-  tr {
-    position: relative;
-  }
-
-  tr:first-child td {
-    border-top-color: transparent;
-  }
-
-  tr:hover {
-    .wzDocViewer__buttons {
-      display: flex;
-      gap: 2px;
-      position: absolute;
-      right: 0;
-      top: 0;
-      transform: translateY(calc(50% - 8px));
-
-      > span {
-        z-index: 2;
-      }
-
-      .wzDocViewer__actionButton {
-        opacity: 1;
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        display: block;
-        right: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(
-          to right,
-          transparent 0,
-          aliceblue 4px
-        );
-        z-index: 1;
-      }
-    }
-  }
-}
-
-.wzDocViewer__buttons,
-.wzDocViewer__field {
-  white-space: nowrap;
-}
-
-.wzDocViewer__buttons {
-  display: none;
-}
-
-.wzDocViewer__field {
-  width: 160px;
-  white-space: break-spaces;
-}
-
-.wzDocViewer__actionButton {
-  opacity: 0;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.wzDocViewer__warning {
-  margin-right: $euiSizeS;
-}