grafana/public/sass/components/_drop.scss

$popover-arrow-size: 0.7rem;
$color: inherit;
$color: $text-color;
$useDropShadow: false;
$attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1);

@include drop-theme("error", $popover-error-bg, $popover-color);
@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color);
@include drop-theme("help", $popover-help-bg, $popover-help-color);

@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);

.drop-element {
  z-index: 10000;
  position: absolute;
  display: none;
  opacity: 0;

  &.drop-open {
    display: block;
  }
}

.drop-element,
.drop-element * {
  box-sizing: border-box;
}

.drop-popopver-close {
  position: absolute;
  top: -5px;
  right: 0;
  font-size: $font-size-lg;
}

.drop-help {
  a {
    color: $white;
    &:hover {
      color: darken($white, 10%);
    }
  }
}

.drop-hide-out-of-bounds {
  &.drop-open.drop-help.drop-out-of-bounds,
  &.drop-open-transitionend.drop-help.drop-out-of-bounds {
    display: none;
  }
}

.drop-element.drop-popover {
  .drop-content {
    box-shadow: $popover-shadow;
  }
}

.drop-element.drop-popover--form {
  .drop-content {
    max-width: none;
    padding: 0;
  }
}

.drop-element.drop-popover--annotation {
  .drop-content {
    padding: 0;
  }
}