
@eval fixedWidthFont org.rstudio.core.client.theme.ThemeFonts.getFixedWidthFont();

@external rstudio-themes-dark;

@eval THEME_DARK_ROW_SELECTED org.rstudio.core.client.theme.ThemeColors.darkRowSelected;

.cellTreeWidget {
}

.cellTreeEmptyMessage {
  text-align: center;
  font-style: normal;
  margin-top: 50px;
  outline: none;
  cursor: default;
}


.cellTreeItem {
  padding-top: 1px;
  padding-bottom: 1px;
}
.cellTreeItemImage {

}

.cellTreeItemImageValue {
}

.cellTreeItemValue {
  font-family: fixedWidthFont;
  padding-right: 0px;
  cursor: default;
}

.cellTreeOpenItem {

}
.cellTreeTopItem {
  font-weight: normal;
  margin-top: 0;
  padding: 2px 0px 2px 6px !important;
  color: inherit;
}

.cellTreeTopItemImage,
.cellTreeItemImage {
  width: 14px !important;
  height: 14px !important;
}

.cellTreeTopItemImageValue,
.cellTreeItemImageValue {
  padding-left: 14px !important;
  border-bottom: none;
}

.cellTreeTopItemImage > img, 
.cellTreeItemImage > img {
  width: 14px !important;
  height: 14px !important;
  background-size: 14px 14px !important;
}

.cellTreeKeyboardSelectedItem {
  background: white;
}

.rstudio-themes-dark .cellTreeKeyboardSelectedItem {
  background: THEME_DARK_ROW_SELECTED;
}

.fieldName {
  float: left;
  margin-right: 7px;
  margin-left: -5px;
}

.fieldType {
  color: #707070;
}

.tableViewDataset, 
.containerIcon {
   float: right;
   width: 16px;
   height: 16px;
   margin-right: 16px;
}

.tableViewDataset {
   cursor: pointer;
}

/* GWT computes indent levels based on the size of the images; this winds up
 * creating indents that are too large, so we push them to the left here */

.cellTreeWidget div[aria-level="2"] {
   margin-left: -5px;
}

.cellTreeWidget div[aria-level="3"] {
   margin-left: -10px;
}

.cellTreeWidget div[aria-level="4"] {
   margin-left: -15px;
}

/* These two classes just let us tag search results for easy lookup in the DOM
 * later */
.searchMatches {
}

.searchHidden {
}

.cellTreeItem.searchHidden {
   display: none;
}
