---

export const CHART_ROOT_CLASSNAME = 'moex-chart-root';

export const CHART_PORTAL_HOST_CLASSNAME = 'moex-chart-portal-host';
export const CHART_MODAL_CONTAINER_CLASSNAME = 'moex-chart-modal-container';

export const CHART_PANE_OVERLAY_CONTAINER = 'moex-chart-pane-overlay-container';
export const CHART_PANE_EMPTY_STATE_CONTAINER = 'moex-chart-pane-empty-state-container';

export const CHART_DRAWING_TOOLBAR_CONTAINER = 'moex-chart-drawing-toolbar-container';
export const CHART_DRAWING_TOOLTIP = 'moex-chart-drawing-tooltip';

export const CHART_PRICE_SCALE_CONTROLS = 'moex-price-scale-controls';
export const CHART_PRICE_SCALE_CONTROLS_CONTENT = `${CHART_PRICE_SCALE_CONTROLS}-content`;
export const CHART_PRICE_SCALE_CONTROLS_VISIBLE = `${CHART_PRICE_SCALE_CONTROLS}_visible`;

export const CHART_FULLSCREEN_SAFARI_CLASSNAME = 'moex-chart-fullscreen-safari';
export const CHART_SCROLLABLE_CLASSNAME = 'moex-chart-scrollable';









@use '../theme/mixins' as m;
@use './preflight';

.moex-chart-root {
  font-family: 'Inter', sans-serif;
  position: relative;
  z-index: 0;
}

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

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

.moex-chart-drawing-tooltip .tooltip-arrow-apca {
  display: none;
}

.moex-price-scale-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;

  &_visible {
    opacity: 1;

    .moex-price-scale-controls-content {
      pointer-events: auto;
    }
  }
}

.moex-chart-pane-empty-state-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1000);
  font-size: var(--space-0875);
  color: var(--neutral-12);
  text-align: center;
  pointer-events: none;

  &[hidden] {
    display: none;
  }
}

.moex-chart-fullscreen-safari {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

.moex-chart-scrollable {
  @include m.scrollbar;
}