@external rstudio-themes-dark;
@external rstudio-theme-aware-dialog;

@eval THEME_DARKGREY_INACTIVE org.rstudio.core.client.theme.ThemeColors.darkGreyInactiveBackground;
@eval THEME_DARKGREY_BORDER org.rstudio.core.client.theme.ThemeColors.darkGreyBorder;
@eval THEME_DARKGREY_BACKGROUND org.rstudio.core.client.theme.ThemeColors.darkGreyBackground;
@eval THEME_DARKGREY_MOST_INACTIVE org.rstudio.core.client.theme.ThemeColors.darkGreyMostInactiveBackground;

@def MODIFIED_COLOUR #cdefcd;
@def CUSTOM_COLOUR #EFF;

/* DataGrid styling / overrides */
/* Avoid GWT's inset styling for selected cells */
.dataGridKeyboardSelectedRowCell, .dataGridKeyboardSelectedRowCell:active,
.dataGridKeyboardSelectedRowCell:hover, .dataGridKeyboardSelectedRowCell:focus {
   border-top: 0px solid #FFF !important;
   border-left: 0px solid #FFF !important;
   border-right: 0px solid #FFF !important;
}

.dataGridKeyboardSelectedRowCell:first-child {
   border-left: 2px solid #0AF !important;
}

.dataGridKeyboardSelectedRowCell:first-child div {
   margin-left: -1px;
}

.dataGridWidget > div {
   min-height: 18px !important;
}

.dataGridWidget thead > tr {
   height: 18px;
}

.dataGridWidget td > div {
   float: left;
}

.dataGridCell {
   border-bottom: 1px solid #ddd !important;
}

.dataGridHeader:active, .dataGridHeader:focus {
   outline: 0;
}

.dataGridWidget input {
   height: 14px !important;
}

/* Other styling */

.modifiedRow {
   background-color: MODIFIED_COLOUR !important;
}

.modifiedRow td {
   border-color: MODIFIED_COLOUR !important;
}

.customBindingRow {
   background-color: CUSTOM_COLOUR !important;
}

.customBindingRow td {
   border-color: CUSTOM_COLOUR !important;
}

.maskedEditorCommandCell div {
   text-decoration: line-through;
}

.conflictRow {
   background-color: #FED;
}

.shortcutInput {
   border: 1px solid #CCC;
   border-radius: 5px;
}

.icon {
   float: right;
   margin-right: 10px;
}

.icon:hover {
   border-radius: 20px;
   box-shadow: 0 0 4px #8BF;
}

fieldset.showChoice {
   float: left;
   border: none;
   padding: 0;
   margin: 0;
}

.dataGridWidget {
   background: #FFF;
}

.dataGridOddRowCell,
.dataGridEvenRowCell {
   border: none;
}

.dataGridCell:first-child {
   border-left: 2px solid #FFF;
}

.dataGridCell:first-child div {
   margin-left: -1px;
}

.dataGridKeyboardSelectedRowCell:first-child, .dataGridKeyboardSelectedRowCell:first-child:active,
.dataGridKeyboardSelectedRowCell:first-child:hover, .dataGridKeyboardSelectedRowCell:first-child:focus {
   border-left: 2px solid #0AF !important;
}

.dataGridKeyboardSelectedRowCell:first-child div {
}

.dataGridWidget {
   border: 1px solid #ddd;
}

/* Dark theme ---- */

.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridWidget {
   background: THEME_DARKGREY_INACTIVE;
   border-color: THEME_DARKGREY_BORDER;
   color: #eee;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridHeader {
   background-color: THEME_DARKGREY_MOST_INACTIVE;
   border-bottom-color: THEME_DARKGREY_BORDER;
   border-right-color: THEME_DARKGREY_BORDER;
   color: #ccc;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridCell {
   border-bottom-color: THEME_DARKGREY_MOST_INACTIVE !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridCell:first-child {
   border-left-color: THEME_DARKGREY_INACTIVE;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridKeyboardSelectedRowCell:first-child,
.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridKeyboardSelectedRowCell:first-child:active,
.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridKeyboardSelectedRowCell:first-child:hover,
.rstudio-themes-dark.rstudio-theme-aware-dialog .dataGridKeyboardSelectedRowCell:first-child:focus {
   border-left-color: #0AF !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .shortcutInput {
   border-color: THEME_DARKGREY_BACKGROUND;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .modifiedRow {
   background-color: rgb(60, 85, 60) !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .modifiedRow td {
   border-color: rgb(60, 85, 60) !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .customBindingRow {
   background-color: rgb(50, 70, 75) !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .customBindingRow td {
   border-color: rgb(50, 70, 75) !important;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .conflictRow {
   background-color: rgb(90, 70, 45);
}
