[UII] Remove scss usage (#213281)

## Summary

Part of https://github.com/elastic/kibana-team/issues/1417.

Removes Fleet's single usage of an `.scss` file to control page tab
position for integration details page. Replaces it with a passed down
css prop, UI looks the same:

<img width="1346" alt="image"
src="https://github.com/user-attachments/assets/b9d545b5-d062-4cde-9ace-6fdfe21376cd"
/>

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss

@@ -1,5 +0,0 @@
-@import '@elastic/eui/src/global_styling/variables/_size.scss';
-
-.fleet__epm__shiftNavTabs {
-  margin-left: $euiSize * 6 + $euiSizeXL * 2 + $euiSizeL;
-}

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx

@@ -21,6 +21,7 @@ import {
   EuiSelect,
   EuiSpacer,
   EuiText,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -88,7 +89,6 @@ import { CustomViewPage } from './custom';
 import { DocumentationPage, hasDocumentation } from './documentation';
 import { Configs } from './configs';
 
-import './index.scss';
 import type { InstallPkgRouteOptions } from './utils/get_install_route_options';
 import { InstallButton } from './settings/install_button';
 
@@ -130,6 +130,7 @@ function Breadcrumbs({ packageTitle }: { packageTitle: string }) {
 }
 
 export function Detail() {
+  const theme = useEuiTheme();
   const { getId: getAgentPolicyId } = useAgentPolicyContext();
   const { getFromIntegrations } = useIntegrationsStateContext();
   const { pkgkey, panel } = useParams<DetailParams>();
@@ -805,7 +806,10 @@ export function Detail() {
       rightColumnGrow={false}
       topContent={securityCallout}
       tabs={headerTabs}
-      tabsClassName="fleet__epm__shiftNavTabs"
+      tabsCss={`
+        margin-left: calc(${theme.euiTheme.size.base} * 6 + ${theme.euiTheme.size.xl} * 2 +
+          ${theme.euiTheme.size.l});
+      `}
     >
       {integrationInfo || packageInfo ? (
         <Breadcrumbs packageTitle={integrationInfo?.title || packageInfo?.title || ''} />

x-pack/platform/plugins/shared/fleet/public/components/header.tsx

@@ -35,11 +35,12 @@ const Wrapper = styled.div<{ maxWidth?: number | string }>`
   padding-right: ${(props) => props.theme.eui.euiSizeM};
 `;
 
-const Tabs = styled(EuiTabs)`
+const Tabs = styled(EuiTabs)<{ $tabsCss?: string }>`
   top: 1px;
   &:before {
     height: 0px;
   }
+  ${({ $tabsCss }) => $tabsCss || ''}
 `;
 
 export interface HeaderProps {
@@ -49,7 +50,7 @@ export interface HeaderProps {
   rightColumnGrow?: EuiFlexItemProps['grow'];
   topContent?: JSX.Element;
   tabs?: Array<Omit<EuiTabProps, 'name'> & { name?: JSX.Element | string }>;
-  tabsClassName?: string;
+  tabsCss?: string;
   'data-test-subj'?: string;
 }
 
@@ -69,7 +70,7 @@ export const Header: React.FC<HeaderProps> = ({
   topContent,
   tabs,
   maxWidth,
-  tabsClassName,
+  tabsCss,
   'data-test-subj': dataTestSubj,
 }) => (
   <Container data-test-subj={dataTestSubj}>
@@ -83,7 +84,7 @@ export const Header: React.FC<HeaderProps> = ({
       <EuiFlexGroup>
         {tabs ? (
           <EuiFlexItem>
-            <Tabs className={tabsClassName}>
+            <Tabs $tabsCss={tabsCss}>
               {tabs.map((props, index) => (
                 <EuiTab {...(props as EuiTabProps)} key={`${props.id}-${index}`}>
                   {props.name}