/*********
 * Menus *
 *********/
menubar,
.menubar {
  -GtkWidget-window-dragging: true;
  padding: 0;
  // box-shadow: inset 0 -1px $border_color;
  background-color: $titlebar_bg_color;
  
  &:backdrop { background-color: $inactive_titlebar_bg_color; }

  > menuitem {
    transition: $shorter_transition;
    min-height: $menuitem_size;
    padding: $menu_padding $small_padding;
    color: $titlebar_secondary_fg_color;

    &:hover { // Seems like it :hover even with keyboard focus
      transition: none;
      background-color: $titlebar_divider_color;
      color: $titlebar_fg_color;
    }

    &:disabled { color: $titlebar_disabled_secondary_fg_color; }

    label:disabled { color: inherit; } // to inherit the above color
  }
}

.csd.popup { background-color: transparent; }

menu,
.menu,
.context-menu {
  margin: $menu_padding; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
  padding: $menu_padding;
  box-shadow: inset 0 1px $highlight_color;
  background-color: $base_color;
  border: $border_size solid $border_color; // adds borders in a non composited env

  .csd & {
    border: none; // axes borders in a composited env
    border-radius: $other_radius;
  }

  menuitem {
    transition: none;
    min-height: $menuitem_size;
    min-width: $menuitem_size * 2;
    padding: $menu_padding $small_padding;
    font: initial;
    text-shadow: none;

    &:hover {
      transition: none;
      background-color: $divider_color;
    }

    &:disabled { color: $disabled_fg_color; }

    // submenu indicators
    arrow {
      min-height: $small_size;
      min-width: $small_size;

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

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

    // avoids labels color being overridden, see
    // https://bugzilla.gnome.org/show_bug.cgi?id=767058
    label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
  }

  // overflow arrows
  > arrow {
    min-height: $small_size;
    min-width: $small_size;
    padding: $menu_padding;
    background-color: $base_color;
    color: $secondary_fg_color;

    &.top {
      margin-top: -$menu_padding;
      border-bottom: $border_size solid $border_color;
      border-radius: $pocillo_radius $pocillo_radius 0 0;
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }

    &.bottom {
      margin-bottom: -$menu_padding * 3;
      border-top: $border_size solid $border_color;
      border-radius: 0 0 $pocillo_radius $pocillo_radius;
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }

    &:hover {
      background-image: image($divider_color);
      color: $fg_color;
    }

    &:disabled {
      border-color: transparent;
      background-color: transparent;
      color: transparent;
      // color: $disabled_secondary_fg_color;
    }
  }

  separator { margin: $menu_padding 0; }
}

menuitem {
  accelerator { color: $secondary_fg_color; }
}

// Electron/Atom render all translucent colors in opaque colors.
// It's a very critical issue for this theme and should be fixed by upstream...
.popup:not(.csd) menu {
  $opaque_fg_color:           if($variant == 'light', $grey_900, $white);
  $opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
  $opaque_disabled_fg_color:  if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
  $opaque_divider_color:      if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));

  menuitem {
    color: $opaque_fg_color;

    &:hover { background-color: $opaque_divider_color; }

    &:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
  }

  accelerator { color: $opaque_secondary_fg_color; }
}
