/*!
 * 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.
 */

/**
 * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
 * specifying a column width, e.g. the checkbox column.
 */
.ouiTable {
  @include ouiFontSizeS;
  @include ouiNumberFormat;

  width: 100%;
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  background-color: $ouiColorEmptyShade;

  &.ouiTable--auto {
    table-layout: auto;
  }
}

.ouiTableCaption {
  position: relative;
}

// Compressed styles not for mobile
@include ouiBreakpoint('m', 'l', 'xl') {
  .ouiTable--compressed {
    .ouiTableCellContent {
      @include ouiFontSizeXS;
      padding: $ouiTableCellContentPaddingCompressed;
    }
  }
}

.ouiTableFooterCell,
.ouiTableHeaderCell {
  @include ouiTableCell;
  @include ouiTitle('xxs');
  font-weight: $ouiFontWeightMedium;
  border-top: none;

  .ouiTableHeaderButton {
    text-align: left;
    font-weight: $ouiFontWeightMedium;
  }

  .ouiTableCellContent__text {
    @include ouiFontSizeXS;
    font-weight: $ouiFontWeightSemiBold;
  }
}

.ouiTableHeaderButton {
  @include ouiFontSizeS;
  color: inherit;
  width: 100%;

  &:hover,
  &:focus {
    .ouiTableCellContent__text {
      text-decoration: underline;
      color: $ouiColorPrimary;
    }

    .ouiTableSortIcon {
      fill: $ouiColorPrimary;
    }
  }
}

.ouiTableSortIcon {
  margin-left: $ouiSizeXS;
  flex-shrink: 0; // makes sure the icon doesn't change size because the text is long

  .ouiTableHeaderButton-isSorted & {
    fill: $ouiTitleColor;
  }
}

.ouiTableHeaderCellCheckbox {
  @include ouiTableCellCheckbox;
  border-top: none;
}

.ouiTableRow {
  &:hover {
    background-color: $ouiTableHoverColor;
  }


  &.ouiTableRow-isClickable {

    &:hover {
      background-color: $ouiTableHoverClickableColor;
      cursor: pointer;
    }

    &:focus {
      background-color: $ouiTableFocusClickableColor;
    }
  }

  &.ouiTableRow-isExpandedRow {
    background-color: $ouiTableHoverColor;

    &.ouiTableRow-isSelectable .ouiTableCellContent {
      padding-left: $ouiTableCellCheckboxWidth + $ouiTableCellContentPadding;
    }
  }

  &.ouiTableRow-isSelected {
    background-color: $ouiTableSelectedColor;

    + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
      background-color: $ouiTableSelectedColor;
    }

    &:hover,
    &:hover + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell  {
      background-color: $ouiTableHoverSelectedColor;
    }
  }
}

.ouiTableRowCell {
  @include ouiTableCell;

  color: $ouiTextColor;

  &.ouiTableRowCell--isMobileHeader {
    display: none; // Hide if not mobile breakpoint
  }
}

.ouiTableRowCellCheckbox {
  @include ouiTableCellCheckbox;
}

// Must come after .ouiTableRowCell selector for border to be removed
.ouiTableFooterCell {
  background-color: $ouiColorLightestShade;
  border-bottom: none;
}

/**
 * 1. Vertically align all children.
 * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
 *    the padding was on the cell, the ellipsis would be cropped.
 * 3. Support wrapping.
 * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
 *    the cell.
 */
.ouiTableCellContent {
  overflow: hidden; /* 4 */
  display: flex;
  align-items: center; /* 1 */
  padding: $ouiTableCellContentPadding; /* 2 */
}

.ouiTableCellContent__text {
  @include ouiTextBreakWord; /* 4 */
  min-width: 0;
  text-overflow: ellipsis;
}

.ouiTableCellContent--alignRight {
  justify-content: flex-end;
  text-align: right;
}

.ouiTableCellContent--alignCenter {
  justify-content: center;
  text-align: center;
}

.ouiTableHeaderCell,
.ouiTableFooterCell,
.ouiTableCellContent--truncateText {
  white-space: nowrap; /* 3 */

  .ouiTableCellContent__text {
    overflow: hidden;
  }
}

.ouiTableCellContent--overflowingContent {
  overflow: visible;
  white-space: normal;
  //* 4 */ overflow-wrap is not supported on flex parents
  word-break: break-all; // Fallback for FF and IE
  word-break: break-word;
}

.ouiTableCellContent--showOnHover {
  > *:not(:first-child) {
    margin-left: $ouiSizeS;
  }
}

.ouiTableRow-hasActions {
  .ouiTableCellContent--showOnHover {
    .ouiTableCellContent__hoverItem {
      flex-shrink: 0;
      opacity: .7;
      filter: grayscale(100%);
      transition: opacity $ouiAnimSpeedNormal $ouiAnimSlightResistance, filter $ouiAnimSpeedNormal $ouiAnimSlightResistance;
    }

    .expandedItemActions__completelyHide,
    .expandedItemActions__completelyHide:disabled,
    .expandedItemActions__completelyHide:disabled:hover,
    .expandedItemActions__completelyHide:disabled:focus,
    .ouiTableRow:hover & .expandedItemActions__completelyHide:disabled {
      filter: grayscale(0%);
      opacity: 0;
    }
  }

  &:hover .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem:not(:disabled) {
    &,
    &:hover,
    &:focus {
      opacity: 1;
      filter: grayscale(0%);
    }
  }
}

// Animate expanded row must be on the contents div inside

.ouiTableRow-isExpandedRow .ouiTableCellContent {
  overflow: hidden;
  animation: $ouiAnimSpeedNormal $ouiAnimSlightResistance 1 normal forwards growExpandedRow;
}

@keyframes growExpandedRow {
  0% {
    max-height: 0;
  }

  99% {
    max-height: 100vh;
  }

  100% {
    max-height: unset;
  }
}