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

@include drop-theme('error', $popover-error-bg, $white);
@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-popover-close {
  position: absolute;
  top: -5px;
  right: 0;
  font-size: $font-size-lg;
}

.drop-help {
  a {
    color: $gray-6;

    &:hover {
      color: $white;
    }
  }
}

.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;
  }
}

.drop-popover.gf-color-picker {
  .drop-content {
    width: 210px;
  }
}

// TODO: Remove. This is a temporary solution until color picker popovers are used
// with Drop.js.
.drop-popover.drop-popover--transparent {
  .drop-content {
    border: none;
    background: none;
    padding: 0;
    max-width: none;

    &:before {
      display: none;
    }
  }
}