.tooltipContainer {
  z-index: $popperZIndex;
}

.tooltip {
  position: relative;

  &.default {
    background-color: var(--popoverBodyBackgroundColor);
    box-shadow: 0 5px 10px var(--popoverShadowColor);
  }

  &.inverse {
    background-color: var(--themeDarkColor);
    box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
    color: var(--white);
  }
}

.body {
  padding: 5px;
}

@media only screen and (min-width: $breakpointExtraSmall) {
  .tooltip {
    max-width: calc($breakpointSmall * 0.8);
  }
}

@media only screen and (min-width: $breakpointSmall) {
  .tooltip {
    max-width: calc($breakpointMedium * 0.8);
  }
}

@media only screen and (min-width: $breakpointMedium) {
  .tooltip {
    max-width: calc($breakpointLarge * 0.8);
  }
}
