[TSVB/SCSS] Migrate _annotation.scss file (#221296)

## Summary

Part of https://github.com/elastic/kibana/issues/220095

Migrates `_annotation.scss` file.

### Considerations

For details on considerations, read
[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).

## Checklist

- [ ] 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)

src/platform/plugins/shared/vis_types/timeseries/public/application/visualizations/views/_annotation.scss

@@ -1,25 +0,0 @@
-.tvbVisAnnotation {
-  position: absolute;
-  z-index: 90; // Specific to not overlap chart tooltip
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.tvbVisAnnotation__line {
-  flex: 1 0 auto;
-  width: 2px;
-}
-
-.tvbVisAnnotation__icon {
-  flex: 0 0 auto;
-  width: $euiSizeM;
-  text-align: center;
-}
-
-.tvbVisAnnotation__tooltip {
-  @include euiFontSizeXS;
-  padding: $euiSizeS;
-  animation-duration: 0s;
-  animation-delay: 0s;
-}

src/platform/plugins/shared/vis_types/timeseries/public/application/visualizations/views/annotation.js

@@ -11,9 +11,33 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import moment from 'moment';
 import { css } from '@emotion/react';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, euiFontSize } from '@elastic/eui';
 
-import './_annotation.scss';
+export const annotationStyle = css`
+  position: absolute;
+  z-index: 90; // Specific to not overlap chart tooltip
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const annotationLineStyle = css`
+  flex: 1 0 auto;
+  width: 2px;
+`;
+
+export const annotationIconStyle = ({ euiTheme }) => css`
+  flex: 0 0 auto;
+  width: ${euiTheme.size.m};
+  text-align: center;
+`;
+
+export const annotationTooltipStyle = ({ euiTheme }) => css`
+  ${euiFontSize({ euiTheme }, 'xs')};
+  padding: ${euiTheme.size.s};
+  animation-duration: 0s;
+  animation-delay: 0s;
+`;
 
 export class Annotation extends Component {
   constructor(props) {
@@ -53,10 +77,15 @@ export class Annotation extends Component {
       color: ${color};
     `;
     return (
-      <div css={containerCSS} className="tvbVisAnnotation">
-        <div css={lineCSS} className="tvbVisAnnotation__line" />
-        <EuiToolTip className="tvbVisAnnotation__tooltip" content={tooltip} position="top">
-          <i css={iconCSS} className={`tvbVisAnnotation__icon fa ${icon}`} />
+      <div css={[containerCSS, annotationStyle]} className="tvbVisAnnotation">
+        <div css={[lineCSS, annotationLineStyle]} className="tvbVisAnnotation__line" />
+        <EuiToolTip
+          css={annotationTooltipStyle}
+          className="tvbVisAnnotation__tooltip"
+          content={tooltip}
+          position="top"
+        >
+          <i css={[iconCSS, annotationIconStyle]} className={`tvbVisAnnotation__icon fa ${icon}`} />
         </EuiToolTip>
       </div>
     );