// Flex-based table structure
$header-row-height: 56px;
$row-height: 48px;
$row-horizontal-padding: 24px;

// Only use tag name selectors here since the styles are shared between MDC and non-MDC
@mixin private-table-flex-styles {
  mat-table {
    display: block;
  }

  mat-header-row {
    min-height: $header-row-height;
  }

  mat-row, mat-footer-row {
    min-height: $row-height;
  }

  mat-row, mat-header-row, mat-footer-row {
    display: flex;
    // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
    // which should be 1px;
    border-width: 0;
    border-bottom-width: 1px;
    border-style: solid;
    align-items: center;
    box-sizing: border-box;

    // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
    // element that will stretch the row the correct height. See:
    // https://connect.microsoft.com/IE/feedback/details/802625
    &::after {
      display: inline-block;
      min-height: inherit;
      content: '';
    }
  }

  mat-cell, mat-header-cell, mat-footer-cell {
    // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
    // elements like ripples or badges from throwing off the layout (see #11165).
    &:first-of-type {
      padding-left: $row-horizontal-padding;

      [dir='rtl'] &:not(:only-of-type) {
        padding-left: 0;
        padding-right: $row-horizontal-padding;
      }
    }

    &:last-of-type {
      padding-right: $row-horizontal-padding;

      [dir='rtl'] &:not(:only-of-type) {
        padding-right: 0;
        padding-left: $row-horizontal-padding;
      }
    }
  }

  mat-cell, mat-header-cell, mat-footer-cell {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
  }
}