/***************
 * Popovers   *
 ***************/

popover.background {

  background-color: transparent;
  font: initial;

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

    background-color: $main_dark_color;
    background-clip: padding-box;
    border: 1px solid $borders_color;
    box-shadow: 0 4px 6px $menu_shadow_color;
    color: $fg_color;
  }

  &:backdrop {
    background-color: transparent;
    box-shadow: none;
  }

  > contents {
    padding: 8px;
    border-radius: 5px;

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

    separator {
      background-color: mix($bg_color, $base_color, 30%);
      margin: 3px;
    }

    list separator { margin: 0; }
  }

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

    > arrow,
    > contents {
      @extend %osd;

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

  &.touch-selection,
  &.magnifier {
    button { @extend %osd_button; }
  }
}

magnifier {
  background-color: $base_color;
}


/**********************
 * Popover Base Menus *
 **********************/

 $_menu-padding: 12px; //inner menuitem padding
 //global 5px for outside menuitems
 
 popover.menu {
   padding: 0;
 
   box.inline-buttons {
     padding: 0 $_menu-padding;
 
     button.image-button.model {
       @include button(undecorated);
 
       min-height: 30px;
       min-width: 30px;
       padding: 0;
       border: none;
       outline: none;
       transition: none;
 
       &:selected {
         background: image($popover_hover_color);
 
        //  @if $contrast == 'high' {
        //    box-shadow: inset 0 0 0 1px $borders_color;
        //  }
       }
     }
   }
 
   box.circular-buttons {
     padding: $_menu-padding $_menu-padding 6px;
 
     button.circular.image-button.model {
      // @extend %list_button;
 
       padding: 11px;
       &:focus {
          background-color: $popover_hover_color;
          border-color: $popover_hover_color;
       }
     }
   }
 
   & > arrow,
   &.background > contents {
     background-color: $main_dark_color;
     color: $fg_color;
     padding: 5px;
     .view {
      background-color: transparent;
      row { margin: 0; }
     }
   }
 
   &.background separator {
     margin: 6px 0;
   }
 
   accelerator {
     color: gtkalpha(currentColor,0.55);
 
     &:dir(ltr) { margin-left: $_menu-padding; }
     &:dir(rtl) { margin-right: $_menu-padding; }
   }

   check,
   radio {
   //  @include check('menu', 'transparent', $text_color);
 
     &:hover, &:active { background-color: transparent; }
   }
 
 
   radio { border-color: $borders_color;
    &:active { border-color: transparentize($borders_color,0.5); }
  }


   arrow.left,
   radio.left,
   check.left {
     margin-left: -2px;
     margin-right: 6px;
   }
 
   arrow.right,
   radio.right,
   check.right {
     margin-left: 6px;
     margin-right: -2px;
   }
 
   modelbutton, &.background > contents .view row {
     min-height: 30px;
     min-width: 40px;
     padding: 0 $_menu-padding;
     border-radius: 5px;
 
     &:selected {
       &, label { color: $text-color; }
       background-color: $popover_hover_color;
     }
     &:selected:active {
       //@extend %selected_items;
       //color: $selected_fg_color;
       background-color: lighten($popover_hover_color, 10%); // matching buttons
     }
   }
 
   label.title {
     font-weight: bold;
     padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
   }
 }