.dscDiscoverGrid {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: $euiBorderRadius;

  .euiDataGrid__controls {
    border: none;
    border-bottom: $euiBorderThin;
  }

  .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
    border-left: none;
    padding: 0;
  }

  .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
    border-right: none;
  }

  .dscDiscoverGrid__table .euiDataGridRowCell:first-of-type,
  .dscDiscoverGrid__table .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type {
    border-left: none;
    border-right: none;
  }

  .euiDataGridRowCell:last-of-type,
  .euiDataGridHeaderCell:last-of-type {
    border-right: none;
  }
}

.dscDiscoverGrid__cellValue {
  font-family: $euiCodeFontFamily;
}

.dscDiscoverGrid__cellPopover {
  // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome
  .lines-content.monaco-editor-background {
    overflow: unset !important;
    contain: unset !important;
  }
}

.dscDiscoverGrid__cellPopoverValue {
  font-family: $euiCodeFontFamily;
  font-size: $euiFontSizeS;
}

.euiDataGridRowCell__definedHeight {
  white-space: pre-wrap;
}

.dscDiscoverGrid__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}

.dscDiscoverGrid__table {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
}

.dscDiscoverGrid__footer {
  flex-shrink: 0;
  background-color: $euiColorLightShade;
  padding: $euiSize / 2 $euiSize;
  margin-top: $euiSize / 4;
  text-align: center;
}

.dscTable__flyoutHeader {
  white-space: nowrap;
}

.dscTable__flyoutDocumentNavigation {
  justify-content: flex-end;
}

// We only truncate if the cell is not a control column.
.euiDataGridHeader {

  .euiDataGridHeaderCell__content {
    @include euiTextTruncate;
    overflow: hidden;
    white-space: pre-wrap;
    flex-grow: 1;
  }

  .euiDataGridHeaderCell__popover {
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    padding-left: $euiSizeXS;
  }
}

.euiDataGridRowCell--numeric {
  text-align: right;
}

.euiDataGrid__loading,
.euiDataGrid__noResults {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 100%;
  text-align: center;
  height: 100%;
  width: 100%;
}

.dscFormatSource {
  @include euiTextTruncate;
}

.dscDiscoverGrid__descriptionListDescription {
  word-break: break-all;
  white-space: normal;

  // Special handling for images coming from the image field formatter
  img {
    // Align the images vertically centered with the text
    vertical-align: middle;
    // Set the maximum height to the line-height. The used function is the same
    // function used to calculate the line-height for the EuiDescriptionList Description.
    // !important is required to overwrite the max-height on the element from the field formatter
    max-height: lineHeightFromBaseline(2) !important;
    // An arbitrary amount of width we don't want to go over, to not have very wide images.
    // For most width-height-ratios that will never be hit, because we'd usually limit
    // it by the way smaller height. But images with very large width and very small height
    // might be limited by that.
    max-width: ($euiSizeXXL * 12.5) !important;
  }
}

@include euiBreakpoint('xs', 's', 'm') {
  // EUI issue to hide 'of' text https://github.com/elastic/eui/issues/4654
  .dscTable__flyoutDocumentNavigation .euiPagination__compressedText {
    display: none;
  }
}