@external popupTopLeft, popupTopCenter, popupTopRight,
   popupMiddleLeft, popupMiddleCenter, popupMiddleRight,
   popupBottomLeft, popupBottomCenter, popupBottomRight,
   popupContent;
@external gwt-MenuBarPopup, gwt-PopupPanel, menuPopupTopLeft, menuPopupTopCenter, menuPopupTopRight,
   menuPopupMiddleLeft, menuPopupMiddleCenter, menuPopupMiddleRight,
   menuPopupBottomLeft, menuPopupBottomCenter, menuPopupBottomRight,
   menuPopupContent;
@external gwt-SuggestBoxPopup, suggestPopupTopLeft, suggestPopupTopCenter, suggestPopupTopRight,
   suggestPopupMiddleLeft, suggestPopupMiddleCenter, suggestPopupMiddleRight,
   suggestPopupBottomLeft, suggestPopupBottomCenter, suggestPopupBottomRight,
   suggestPopupContent, suggestPopupTop, suggestPopupBottom;
@external gwt-MenuBar-vertical;

@external safari;
@external rstudio-themes-dark-menus;

@external menuPopupTop, menuPopupBottom, menuPopupMiddle;
@external popupTop, popupBottom, popupMiddle;
@external gwt-DecoratedPopupPanel;

/* This is exposed to allow users to customize RStudio further with their rsthemes. */
@external themedPopupPanel;

@eval THEME_DARKGREY_MENU_BACKGROUND org.rstudio.core.client.theme.ThemeColors.darkGreyMenuBackground;
@eval THEME_DARKGREY_MENU_BORDER org.rstudio.core.client.theme.ThemeColors.darkGreyMenuBorder;

/* https://github.com/rstudio/rstudio/issues/10821 */
.safari .themedPopupPanel, .safari .gwt-MenuBarPopup, .safari .gwt-PopupPanel {
   transform: translateZ(0);
}

.themedPopupPanel {
   margin: -6px;
   margin-top: 0px;
   z-index: 99999;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);
}

@sprite .themedPopupPanel .popupTopLeft, .menuPopupTopLeft, .suggestPopupTopLeft {
   gwt-image: 'popupTopLeft';
   width: value('popupTopLeft.getWidth', 'px');
   height: value('popupTopLeft.getHeight', 'px');
}
@sprite .themedPopupPanel .popupTopCenter, .menuPopupTopCenter, .suggestPopupTopCenter {
   gwt-image: 'popupTopCenter';
   height: value('popupTopCenter.getHeight', 'px');
}
@sprite .themedPopupPanel .popupTopRight, .menuPopupTopRight, .suggestPopupTopRight {
   gwt-image: 'popupTopRight';
   width: value('popupTopRight.getWidth', 'px');
   height: value('popupTopRight.getHeight', 'px');
}
@sprite .themedPopupPanel .popupMiddleLeft, .menuPopupMiddleLeft, .suggestPopupMiddleLeft {
   gwt-image: 'popupMiddleLeft';
   width: value('popupMiddleLeft.getWidth', 'px');
}
.themedPopupPanel .popupMiddleCenter, .menuPopupMiddleCenter, .suggestPopupMiddleCenter {
   background-color: white;
}

.themedPopupPanel .popupMiddleLeft {
   min-width: value('popupMiddleLeft.getWidth', 'px'); /* don't let the browser collapse the table cell if there's no space */
}
@sprite .themedPopupPanel .popupMiddleRight, .menuPopupMiddleRight, .suggestPopupMiddleRight {
   gwt-image: 'popupMiddleRight';
   width: value('popupMiddleRight.getWidth', 'px');
}
@sprite .themedPopupPanel .popupBottomLeft, .menuPopupBottomLeft, .suggestPopupBottomLeft {
   gwt-image: 'popupBottomLeft';
   width: value('popupBottomLeft.getWidth', 'px');
   height: value('popupBottomLeft.getHeight', 'px');
}
@sprite .themedPopupPanel .popupBottomCenter, .menuPopupBottomCenter, .suggestPopupBottomCenter {
   gwt-image: 'popupBottomCenter';
   height: value('popupBottomCenter.getHeight', 'px');
}
@sprite .themedPopupPanel .popupBottomRight, .menuPopupBottomRight, .suggestPopupBottomRight {
   gwt-image: 'popupBottomRight';
   width: value('popupBottomRight.getWidth', 'px');
   height: value('popupBottomRight.getHeight', 'px');
}

.gwt-MenuBarPopup {
   margin: -5px;
   margin-top: 0;
   z-index: 1000;
}

.gwt-MenuBarPopup,
.gwt-DecoratedPopupPanel,
.gwt-SuggestBoxPopup {
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.gwt-SuggestBoxPopup {
   margin-top: 3px;
}

.menuPopupMiddleCenter,
.popupMiddleCenter {
   padding: 4px;
}

.menuPopupMiddleCenter,
.popupMiddleCenter,
.gwt-SuggestBoxPopup .suggestPopupMiddleCenter {
   border: solid 1px #a3a8b2;
}

.menuPopupTop,
.popupTop,
.suggestPopupTop {
   display: none;
}

.menuPopupMiddle .menuPopupMiddleLeft,
.popupMiddle .popupMiddleLeft,
.suggestPopupMiddleLeft {
   display: none;
}

.menuPopupMiddle .menuPopupMiddleRight,
.popupMiddle .popupMiddleRight,
.suggestPopupMiddleRight {
   display: none;
}

.menuPopupBottom,
.popupBottom,
.suggestPopupBottom {
   display: none;
}

.rstudio-themes-dark-menus .menuPopupMiddleCenter,
.rstudio-themes-dark-menus .themedPopupPanel .popupMiddleCenter,
.rstudio-themes-dark-menus .gwt-SuggestBoxPopup .suggestPopupMiddleCenter {
   background: THEME_DARKGREY_MENU_BACKGROUND;
   border: solid 1px THEME_DARKGREY_MENU_BORDER;
   color: #f0f0f0;
}
