[Security Solution] [Onboarding] Integrations tab separators not showing on dark mode (#210380)

## Summary

This PR addresses #208986



https://github.com/user-attachments/assets/31afe060-1258-4336-a3d9-fca561d244d1


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Elastic Machine <[email protected]>

Author: agusruidiazgd

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integration_card_grid_tabs.styles.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const useIntegrationCardGridTabsStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return css`
+    button {
+      position: relative;
+    }
+    button:not(:first-child)::before {
+      position: absolute;
+      left: 0px;
+      content: ' ';
+      width: 1px;
+      height: 70%;
+      background-color: ${euiTheme.colors.darkShade};
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    button[aria-pressed='true'],
+    button[aria-pressed='true'] + button {
+      &::before {
+        content: none;
+      }
+    }
+    button[aria-pressed='true'] {
+      text-decoration: none;
+    }
+  `;
+};

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integration_card_grid_tabs.tsx

@@ -5,7 +5,14 @@
  * 2.0.
  */
 import React, { lazy, Suspense, useMemo, useCallback, useEffect, useRef } from 'react';
-import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
+import {
+  COLOR_MODES_STANDARD,
+  EuiButtonGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSkeletonText,
+  useEuiTheme,
+} from '@elastic/eui';
 import type { AvailablePackagesHookType, IntegrationCardItem } from '@kbn/fleet-plugin/public';
 import { noop } from 'lodash';
 
@@ -30,6 +37,7 @@ import { useIntegrationCardList } from './use_integration_card_list';
 import { IntegrationTabId } from './types';
 import { IntegrationCardTopCallout } from './callouts/integration_card_top_callout';
 import { trackOnboardingLinkClick } from '../../../lib/telemetry';
+import { useIntegrationCardGridTabsStyles } from './integration_card_grid_tabs.styles';
 
 export interface IntegrationsCardGridTabsProps {
   installedIntegrationsCount: number;
@@ -49,6 +57,8 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
   ({ installedIntegrationsCount, isAgentRequired, useAvailablePackages }) => {
     const { spaceId } = useOnboardingContext();
     const scrollElement = useRef<HTMLDivElement>(null);
+    const { colorMode } = useEuiTheme();
+    const isDark = colorMode === COLOR_MODES_STANDARD.dark;
     const [toggleIdSelected, setSelectedTabIdToStorage] = useStoredIntegrationTabId(
       spaceId,
       DEFAULT_TAB.id
@@ -78,6 +88,8 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
 
     const selectedTab = useMemo(() => INTEGRATION_TABS_BY_ID[toggleIdSelected], [toggleIdSelected]);
 
+    const buttonGroupStyles = useIntegrationCardGridTabsStyles();
+
     const onSearchTermChanged = useCallback(
       (searchQuery: string) => {
         setSearchTerm(searchQuery);
@@ -144,6 +156,7 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
       >
         <EuiFlexItem grow={false}>
           <EuiButtonGroup
+            css={isDark ? buttonGroupStyles : undefined}
             buttonSize="compressed"
             color="primary"
             idSelected={toggleIdSelected}