/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiDataGrid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  height: 100%;
}

.ouiDataGrid--fullScreen {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $ouiZModal;
  background: $ouiColorEmptyShade;

  .ouiDataGrid__pagination {
    padding-bottom: $ouiSizeXS;
    background: $ouiColorLightestShade;
    border-top: $ouiBorderThin;
  }

  .ouiDataGrid__verticalScroll .ouiDataGridRow {
    will-change: transform;
  }
}

.ouiDataGrid__content {
  height: 100%;
  font-feature-settings: 'tnum' 1; // Tabular numbers
  max-width: 100%;
  width: 100%;
  z-index: 2; // Sits above the pagination below it, but below the controls above it
  background: $ouiColorEmptyShade;
}

.ouiDataGrid__controls {
  background: $ouiPageBackgroundColor;
  position: relative;
  z-index: 3; // Needs to sit above the content blow that sits below it
  border: $ouiBorderThin;
  padding: $ouiSizeXS;
  flex-grow: 0;

  > * {
    margin-left: calc($ouiSizeXS / 2);
  }
}

.ouiDataGrid__controlBtn {
  border-radius: $ouiBorderRadius;

  &:focus {
    background: shadeOrTint($ouiColorLightestShade, 10%, 10%);
  }
}

.ouiDataGrid__controlBtn--active,
.ouiDataGrid__controlBtn--active:focus {
  font-weight: $ouiFontWeightSemiBold;
  color: $ouiColorFullShade;
}

@include ouiDataGridStyles(bordersNone) {
  .ouiDataGrid__controls {
    border: none;
    background: $ouiColorEmptyShade;
  }
}

@include ouiDataGridStyles(bordersHorizontal) {
  .ouiDataGrid__controls {
    border-right: none;
    border-left: none;
    border-top: none;
    background: $ouiColorEmptyShade;
  }
}

.ouiDataGrid__pagination {

  padding-top: $ouiSizeXS;
  flex-grow: 0;
}

.ouiDataGrid__verticalScroll {
  flex-grow: 1;
  overflow-y: hidden;
  height: 100%;
}

.ouiDataGrid__overflow {
  overflow-y: hidden;
  height: 100%;
  background: $ouiColorEmptyShade;
}

// This is used to remove extra scrollbars on the body when fullscreen is enabled
.ouiDataGrid__restrictBody {
  height: 100vh;
  overflow: hidden;
}


.ouiDataGrid__controlScroll {
  @include ouiYScrollWithShadows;
  max-height: $ouiDataGridPopoverMaxHeight;
  padding: $ouiSizeS;
  margin: -$ouiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
}

.ouiDataGrid__focusWrap {
  height: 100%;
}

.ouiDataGrid__virtualized {
  @include ouiScrollBar($ouiColorDarkShade, $ouiColorEmptyShade);
  scroll-padding: 0;
}