popover.background {
  background-color: transparent;
  font: initial; // Decouple the font of popovers from their entry/textview

  > arrow,
  > contents {
    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));

    background-color: $menu_color;
    color: $text_color;
    background-clip: padding-box;
    border: 1px solid $_popover_border;
    box-shadow: 0 1px 2px transparentize(black, 0.7);

    @if $variant == 'dark' {
      $_popover_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9));

      // Add an outline and move border to box-shadow instead
      background-clip: border-box;
      border-color: $_popover_outline;
      box-shadow: 0 0 0 1px $_popover_border,
                  0 1px 2px 1px transparentize(black, 0.7);
    }
  }

  > contents {
    padding: 8px;
    border-radius: $popover_radius;

    > list,
    > .view,
    > toolbar {
      border-style: none;
      background-color: transparent;
    }
  }

  .osd &.background,
  &.touch-selection,
  &.magnifier {
    background-color: transparent;

    > arrow,
    > contents {
      @extend %osd;

      border: 1px solid transparentize(white, 0.9);
      box-shadow: none;
    }
  }
}
