@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/z-index' as z-index;
@use './tooltip' as *;

.#{$prefix} {
  max-width: spacing.semantic-variable(size, container, narrow);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: spacing.semantic-variable(padding, vertical, tiny) spacing.semantic-variable(padding, horizontal, base);
  border-radius: radius.variable(tiny);
  background-color: palette.semantic-variable("background", fixed-dark);
  color: palette.semantic-variable(text, fixed-light);
  box-shadow: effect.variable(shadow, floating);
  z-index: z-index.get(popover);
  white-space: pre-line;
  word-break: break-all;

  @include typography.semantic-variable(caption);

  &__arrow {
    color: palette.semantic-variable("background", fixed-dark);
  }
}