---

:where(
  .moex-chart-root,
  .moex-chart-root::before,
  .moex-chart-root::after,
  .moex-chart-root *,
  .moex-chart-root *::before,
  .moex-chart-root *::after
) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

:where(.moex-chart-root) {
  min-width: 0;
  min-height: 0;
  line-height: 1.5;
  text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

:where(.moex-chart-root) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  figure,
  dl,
  dd
) {
  margin: 0;
}

:where(.moex-chart-root) :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

:where(.moex-chart-root) :where(ol, ul, menu) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.moex-chart-root) :where(
  button,
  input,
  optgroup,
  select,
  textarea
) {
  margin: 0;
  padding: 0;
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(.moex-chart-root) :where(button, select) {
  text-transform: none;
}

:where(.moex-chart-root) :where(
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit']
) {
  appearance: button;
  background-color: transparent;
  background-image: none;
}

:where(.moex-chart-root) :where(button, [role='button']) {
  cursor: pointer;
}

:where(.moex-chart-root) :where(
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled
) {
  cursor: default;
}

:where(.moex-chart-root) :where(textarea) {
  resize: vertical;
}

:where(.moex-chart-root) :where(input[type='search']) {
  appearance: textfield;
  outline-offset: -2px;
}

:where(.moex-chart-root) :where(
  input[type='search']::-webkit-search-decoration
) {
  appearance: none;
}

:where(.moex-chart-root) :where(
  button::-moz-focus-inner,
  input::-moz-focus-inner
) {
  padding: 0;
  border-style: none;
}

:where(.moex-chart-root) :where(
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object
) {
  display: block;
  vertical-align: middle;
}

:where(.moex-chart-root) :where(img, video) {
  max-width: 100%;
  height: auto;
}

:where(.moex-chart-root) :where(table) {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:where(.moex-chart-root) :where(hr) {
  height: 0;
  margin: 0;
  color: inherit;
  border-top-width: 1px;
}

:where(.moex-chart-root) :where(abbr[title]) {
  text-decoration: underline dotted;
}

:where(.moex-chart-root) :where(summary) {
  display: list-item;
  cursor: pointer;
}

:where(.moex-chart-root) :where(dialog) {
  padding: 0;
}

:where(.moex-chart-root) :where([hidden]) {
  display: none !important;
}





@use './preflight';

.moex-chart-root {
  font-family: 'Inter', sans-serif;
}

.moex-chart-portal-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.moex-chart-portal-host > * {
  pointer-events: auto;
}



import {
  CHART_PORTAL_HOST_CLASSNAME,
  CHART_ROOT_CLASSNAME,
} from '@src/constants/dom';

let portalHost: HTMLDivElement | null = null;
let isFullscreenListenerAttached = false;

function getPortalParent(): HTMLElement {
  const fullscreenElement = document.fullscreenElement;

  return fullscreenElement instanceof HTMLElement
    ? fullscreenElement
    : document.body;
}

function syncPortalHostParent(): void {
  if (!portalHost) {
    return;
  }

  const portalParent = getPortalParent();

  if (portalHost.parentElement !== portalParent) {
    portalParent.append(portalHost);
  }
}

export function getPortalHost(): HTMLDivElement {
  if (!portalHost) {
    portalHost = document.createElement('div');

    portalHost.classList.add(
      CHART_ROOT_CLASSNAME,
      CHART_PORTAL_HOST_CLASSNAME,
    );
  }

  if (!isFullscreenListenerAttached) {
    document.addEventListener(
      'fullscreenchange',
      syncPortalHostParent,
    );

    isFullscreenListenerAttached = true;
  }

  syncPortalHostParent();

  return portalHost;
}