/*********
 * Menus *
 *********/
.menubar {
  -GtkWidget-window-dragging: true;
  padding: 0px;
  box-shadow: inset 0 -1px transparentize(black, 0.9);
  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;

  &:backdrop { background-color: $backdrop_headerbar_bg_color; }

  > .menuitem {
    padding: 4px 8px;

    &:hover { //Seems like it :hover even with keyboard focus
      box-shadow: inset 0 -3px $selected_bg_color;
      color: $headerbar_fg_color;
    }

    &:insensitive {
      color: $insensitive_fg_color;
      box-shadow: none;
    }
  }
}

%menu {
  padding: 4px 0px;
  background-color: $menu_color;
  border: 1px solid $borders_color;

  &:backdrop { background-color: $backdrop_menu_color; }

  .menuitem {
    padding: 8px 4px;
    text-shadow: none;

    &:hover {
      color: $selected_fg_color;
      background-color: $selected_bg_color;
    }

    &:insensitive {
      color: $insensitive_fg_color;
      &:backdrop { color: $backdrop_insensitive_color; }
    }

    &:backdrop,
    &:backdrop:hover {
      color: $backdrop_fg_color;
      background-color: transparent;
    }

    // submenu indicators
    .arrow {

      &:dir(ltr) {
        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
        margin-left: 10px;
      }

      &:dir(rtl) {
        -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
        margin-right: 10px;
      }
    }

    // separator
    &.separator {
      color: transparentize(black, 0.8);
    }

  }
  // overflow arrows
  > .arrow {
    @include button(undecorated);

    padding: 4px;
    background-color: $menu_color;
    border-radius: 0;

    &.top {
      margin-top: -6px;
      border-bottom: 1px solid mix($fg_color, $base_color, 10%);
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }

    &.bottom {
      margin-bottom: -6px;
      border-top: 1px solid mix($fg_color, $base_color, 10%);
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }

    &:hover { background-color: mix($fg_color, $base_color, 10%); }

    &:backdrop { background-color: $backdrop_menu_color; }

    &:insensitive {
      color: transparent;
      background-color: transparent;
      border-color: transparent ;
    }
  }
}


.menuitem {
  &.accelerator { color: gtkalpha(currentColor,0.55);}

  &.check,
  &.radio {
    padding:4px;

    &:dir(ltr) { margin-right: 7px;}
    &:dir(rtl) { margin-left: 7px; }
  }
}

.menu {
  @extend %menu;
  box-shadow: inset 0 1px 0 0 $top_highlight;

  .csd & {border: none;}
}

.content-view .menu,
.popup,
.context-menu {
  @extend %menu;
  box-shadow: 0 2px 4px 0 transparentize(black,0.9), inset 0 1px 0 0 $top_highlight;
}
