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

.ouiTableRowCell__mobileHeader {
  // Don't display by default unless table is responsive
  display: none;
}

@include ouiBreakpoint('xs', 's') {
  .ouiTableRowCell--hideForMobile { // must come last to override any special cases
    // sass-lint:disable-block no-important
    display: none !important;
  }
}

@include ouiBreakpoint('m', 'l', 'xl') {
  .ouiTableRowCell--hideForDesktop { // must come last to override any special cases
    // sass-lint:disable-block no-important
    display: none !important;
  }
}

@include ouiBreakpoint('xs', 's') {

  .ouiTable.ouiTable--responsive {
    // Not allowing compressed styles in mobile view (for now)

    thead {
      display: none; // Use mobile versions of selecting and filtering instead
    }

    tfoot {
      display: none; // Not supporting responsive footer content
    }

    .ouiTableRowCell__mobileHeader {
      // Always truncate
      @include ouiTextTruncate;
      @include fontSize($ouiFontSize * .6875);

      display: block;
      color: $ouiColorDarkShade;
      padding: $ouiSizeS;
      padding-bottom: 0;
      margin-bottom: -$ouiSizeS; // pull up cell content closer
      min-height: $ouiSizeL; // aligns contents of cells if header doesn't exist

      // Remove min-height of cell header if it's the only cell
      .ouiTableRowCell:only-child & {
        min-height: 0;
      }
    }

    .ouiTableRowCell--enlargeForMobile {
      @include ouiFontSize;
    }

    .ouiTableRowCell--isMobileFullWidth {
      width: 100%;

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

    // Make each row a Panel
    @include ouiPanel($selector: '.ouiTableRow');

    .ouiTableRow {
      @include ouiBottomShadowSmall;
      background-color: map-get($ouiPanelBackgroundColorModifiers, 'plain');
      border-radius: $ouiBorderRadius;
      display: flex;
      flex-wrap: wrap;
      padding: $ouiTableCellContentPadding;
      margin-bottom: $ouiTableCellContentPadding;

      &:hover {
        background-color: map-get($ouiPanelBackgroundColorModifiers, 'plain');
      }

      &.ouiTableRow-isExpandable,
      &.ouiTableRow-hasActions {
        @include ouiTableActionsBackgroundMobile;
        padding-right: $ouiSizeXXL;
        position: relative;
      }

      &.ouiTableRow-isExpandable .ouiTableRowCell--isExpander,
      &.ouiTableRow-hasActions .ouiTableRowCell--hasActions {
        min-width: 0;
        width: $ouiSizeL;
        position: absolute;
        top: $ouiTableCellContentPadding + (($ouiTableCellContentPadding * $ouiLineHeight) - $ouiTableCellContentPadding) + $ouiSizeXS; // same as row padding-top + cell padding + 1/2 line height
        right: $ouiTableCellContentPadding;

        &::before {
          display: none; // Don't display table headers
        }

        .ouiTableCellContent {
          flex-direction: column;
          padding: 0;

          .ouiLink {
            padding: $ouiSizeXS;
          }
        }
      }

      &.ouiTableRow-hasActions.ouiTableRow-isExpandable {
        .ouiTableRowCell--isExpander {
          top: auto;
          bottom: $ouiSize; // same as row padding-bottom
          right: 0;
        }
      }

      &.ouiTableRow-isSelectable {
        padding-left: $ouiTableCellCheckboxWidth + calc($ouiTableCellContentPadding / 2);
        position: relative;

        .ouiTableRowCellCheckbox {
          position: absolute;
          left: calc($ouiTableCellContentPadding / 2);
          top: $ouiSizeS;
        }
      }

      // override hover & selected colors
      &.ouiTableRow-isSelected {
        &,
        &:hover,
        + .ouiTableRow.ouiTableRow-isExpandedRow,
        &:hover + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
          background-color: $ouiTableSelectedColor;
        }
      }

      &.ouiTableRow-isExpandedRow {
        @include ouiTableActionsBackgroundMobile;
        @include ouiBottomShadowSmall;
        margin-top: -$ouiTableCellContentPadding * 2;
        position: relative;
        z-index: 2; // on top of its parent/previous row
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-left: $ouiSizeS; // override selectable as the padding is already applied via the contents

        &:hover {
          background-color: $ouiColorEmptyShade; // keep white background to cover triggering row's border
        }

        .ouiTableRowCell {
          width: calc(100% - #{$ouiSizeXXL});

          &::before {
            display: none;
          }
        }
      }
    }

    .ouiTableRowCell {
      display: block; /* IE requires block to grow and wrap. */
      min-width: 50%;
      border: none;
    }

    .ouiTableRowCellCheckbox {
      border: none;
    }

    // never show hidden items and always show hover items on mobile,
    .ouiTableRow-hasActions .ouiTableCellContent--showOnHover {
      > * {
        margin-left: 0;
      }

      .expandedItemActions__completelyHide {
        display: none;
      }

      .ouiTableCellContent__hoverItem {
        opacity: 1;
        filter: none;
        margin-left: 0;
        margin-bottom: $ouiSizeS;
      }
    }

    // force all content back to left side
    .ouiTableCellContent--alignRight {
      justify-content: flex-start;
    }

    .ouiTableCellContent--alignCenter {
      justify-content: flex-start;
    }
  }
}