@value (colorTooltipFill, colorTextInversePrimary, colorTextInverseSecondary) from '../../styles/variables/_color.css';
@value (size300) from '../../styles/variables/_size.css';
@value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
@value (borderRadiusSmall) from '../../styles/variables/_border.css';
@value (elevationTooltip) from '../../styles/variables/_elevation.css';

.tooltip {
  --tooltip-elevation: elevationTooltip;
  display: flex;
  flex-flow: column;
  max-width: size300;
  gap: spaceXXSmall;
  padding: spaceXSmall spaceSmall;
  background: colorTooltipFill;
  pointer-events: none;
  border-radius: borderRadiusSmall;
  word-wrap: break-word;
  z-index: var(--tooltip-elevation);
}

.title {
  composes: subTitleExtraSmall from '../../styles/typography.module.css';
  color: colorTextInversePrimary;
}

.body {
  composes: bodyMedium from '../../styles/typography.module.css';
  color: colorTextInversePrimary;
}

.hasTitle {
  color: colorTextInverseSecondary;
}