// N.B. Material design specifically discouragaes the usage of tooltips with rich information
// (https://material.google.com/components/tooltips.html#tooltips-usage)
// Therefore, popovers are styled as Material design's dialogs

.popover {
  @include reset-text;
  @include border-radius($border-radius);

  background-clip: padding-box;
  background-color: $dialog-content-bg;
  box-shadow: map-get($dialog-elevation-shadow, shadow);
  display: block;
  font-size: $font-size-base;
  margin: $tooltip-margin;
  max-width: $dialog-width-sm;
  position: absolute;
  top: 0;
  left: 0;
  z-index: map-get($dialog-elevation-shadow, elevation);

  @include media-breakpoint-up(md) {
    margin: $tooltip-margin-desktop;
  }
}

.popover-body {
  padding: $dialog-padding-y $dialog-padding-x;

  > :last-child {
    margin-bottom: 0;
  }
}

.popover-header {
  @include typography-title;

  margin-bottom: 0;
  padding: $dialog-padding-y $dialog-padding-x 0;

  &:empty {
    display: none;
  }

  &:last-child {
    padding-bottom: $dialog-padding-y;
  }
}