[Lens/SCSS] Delete and migrate reference_lines.scss file (elastic#2…

…09982)

## Summary

Part of elastic#208908

Replaces scss to css-in-js.

### 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
(cherry picked from commit 3b3bbb1)

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx

@@ -8,7 +8,6 @@
  */
 
 import './annotations.scss';
-import './reference_lines/reference_lines.scss';
 
 import React, { Fragment } from 'react';
 import { snakeCase } from 'lodash';

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.tsx

@@ -7,8 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './reference_lines.scss';
-
 import React from 'react';
 import { Position } from '@elastic/charts';
 import type { FieldFormat } from '@kbn/field-formats-plugin/common';

src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { Position } from '@elastic/charts';
 import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,
@@ -123,9 +124,12 @@ export function MarkerBody({
     <div
       className="xyDecorationRotatedWrapper"
       data-test-subj="xyVisAnnotationText"
-      css={{
-        width: LINES_MARKER_SIZE,
-      }}
+      css={[
+        xyDecorationRotatedWrapperStyles,
+        {
+          maxWidth: LINES_MARKER_SIZE,
+        },
+      ]}
     >
       <div
         className="eui-textTruncate xyDecorationRotatedWrapper__label"
@@ -221,3 +225,22 @@ export function Marker({
   }
   return null;
 }
+
+const xyDecorationRotatedWrapperStyles = css({
+  display: 'inline-block',
+  overflow: 'hidden',
+  lineHeight: 1.5,
+
+  '& .xyDecorationRotatedWrapper__label': {
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    transform: 'translate(0, 100%) rotate(-90deg)',
+    transformOrigin: '0 0',
+
+    '&::after': {
+      content: '""',
+      float: 'left',
+      marginTop: '100%',
+    },
+  },
+});

src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json

@@ -8,6 +8,7 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
+    "../../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     { "path": "../tsconfig.json" },