/**
  This mixin is used to switch the position of the two header rows 
  ("column row" and "group row") and adjust the heights and positions for
  all the different table sizes. Since Safari doesn't support position: relative;
  on 'tr' elements we have to manage the repositioning on the 'th' level. 
**/
@mixin adjustPositionsAndHeights($group-height, $col-height) {
  .#{$iot-prefix}--table-head--with-column-groups {
    // Move column row down to the position of the group row
    .#{$iot-prefix}--table-header__column-row {
      th {
        position: relative;
        top: $group-height;
        // Height is needed for FF & Safari
        height: $col-height;
      }

      // cells with span-group-row are columns that don't belong to a group
      // and span both the column row and the group row.
      th.#{$iot-prefix}--table-header--span-group-row {
        top: 0;
        > span {
          // Add padding top to have the labels in these extra tall cells
          // align with the normal height cells.
          margin-top: $group-height;
        }
        button.#{$iot-prefix}--table-head--table-header,
        a.#{$iot-prefix}--table-head--table-header {
          // Add padding top to have the labels in these extra tall cells
          // align with the normal height cells.
          padding-top: $group-height;
          // Height is needed for FF & Safari
          height: calc(#{$group-height} + #{$col-height});
          // Undo 'fix' added to sort button in teable-head.scss
          &:focus button.#{$iot-prefix}--table-head--overflow:hover {
            margin-top: auto;
            margin-bottom: auto;
          }
        }
      }
    }
    // Move group row up to the position of the column row
    .#{$iot-prefix}--table-header__group-row {
      th {
        position: relative;
        top: calc(#{$col-height} * -1);
      }
    }
  }
}

// SET BORDERS
// We need the bx--data-table selector in order to override some Carbon styles
.#{$prefix}--data-table {
  .#{$iot-prefix}--table-head--with-column-groups {
    $border-width: 2px;

    // Basic border styling to simplify further border modifications
    // using color or width only.
    th {
      border-color: $ui-02;
      border-style: solid;
      border-width: 0;
    }

    // THE ROW OF COLUMN HEADERS
    .#{$iot-prefix}--table-header__column-row {
      th {
        // Add left border width to the "real" columns (i.e. not to nesting/muli select etc)
        &.#{$iot-prefix}--table-head--table-header {
          border-left-width: $border-width;
        }
        // But first columm should never get a left border.
        &:first-of-type {
          border-left-width: 0;
          // But again, if the first column is a "real" column it should get a right border
          // because we can't put a left border on the first group row column
          // since the rowspan makes it in possible to tell when a group row column is the
          // first visual column.
          &.#{$iot-prefix}--table-header--span-group-row {
            border-right-width: $border-width;
            // We need to compensate the next sibling by removing that left border
            // or else we end up with double borders.
            & + .#{$iot-prefix}--table-head--table-header {
              border-left-width: 0;
            }
          }
        }

        // Add a right border to the last "real" column. This is not an ideal solution, but
        // it is needed since we can't put a left border on the first column after the "real"
        // columns because that one might the the "resize expand" column which, when the extra wide
        // row action column (needed for online row edit) is present, be can forced into having
        // no width at all, and hence not showing the border.
        &:not(:last-of-type) {
          &.#{$iot-prefix}--table-head--table-header.#{$iot-prefix}--table-header--last-data-column {
            border-right-width: $border-width;
          }
        }
      }

      // Fix for multisort/overflow button that exceeded its container
      .#{$iot-prefix}--table-head--table-header--with-overflow {
        .#{$prefix}--table-header-label {
          padding-bottom: 0;
          padding-top: 0;
        }
      }

      // Fix to undo the removal of padding left and right padding for non sort
      // elements inside a sortable headers (which happens when table head is disabled).
      // We need to undo this since our sort element can be a child of the header rather
      // then the header itself. We add the spacing back as margin of the child label instead.
      .table-header-sortable:not(.#{$prefix}--table-sort) > .#{$prefix}--table-header-label,
      .table-header-sortable:not(.#{$prefix}--table-sort) > .#{$prefix}--tooltip--definition {
        margin-left: $spacing-05;
        margin-right: $spacing-05;
      }

      // Fix for combination of resize, overflow and tooltip that caused the headers to expand in height.
      .#{$iot-prefix}--table-header-resize.#{$iot-prefix}--table-head--table-header--with-overflow
        .#{$prefix}--tooltip--definition {
        word-break: normal;
      }
    }

    // THE ROW OF THE GROUPS
    .#{$iot-prefix}--table-header__group-row {
      th {
        border-left-width: $border-width;
        &.#{$iot-prefix}--table-header__column-group {
          text-align: center;
          border-bottom-width: $border-width;
          span {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        &:first-of-type {
          &.#{$iot-prefix}--table-header__group-row-spacer,
          &.#{$iot-prefix}--table-header__column-group {
            border-left-width: 0;
          }
        }
        &:last-of-type {
          &.#{$iot-prefix}--table-header__group-row-spacer {
            border-left-width: 0;
          }
        }
        &:not(:last-of-type) {
          &.#{$iot-prefix}--table-header__column-group--last-data-column {
            border-right-width: $border-width;
          }
        }
      }
    }

    // RTL STYLING
    [dir='rtl'] & {
      .#{$iot-prefix}--table-header__column-row {
        th {
          &.#{$iot-prefix}--table-head--table-header {
            border-right-width: $border-width;
            border-left-width: 0;
          }
          &:first-of-type {
            border-right-width: 0;
            &.#{$iot-prefix}--table-header--span-group-row {
              border-left-width: $border-width;
              border-right-width: 0;
              & + .#{$iot-prefix}--table-head--table-header {
                border-right-width: 0;
              }
            }
          }
          &:not(:last-of-type) {
            &.#{$iot-prefix}--table-head--table-header.#{$iot-prefix}--table-header--last-data-column {
              border-left-width: $border-width;
            }
          }
        }
      }

      .#{$iot-prefix}--table-header__group-row {
        th {
          border-right-width: $border-width;
          border-left-width: 0;
          &:first-of-type {
            &.#{$iot-prefix}--table-header__group-row-spacer,
            &.#{$iot-prefix}--table-header__column-group {
              border-right-width: 0;
            }
          }
          &:last-of-type {
            &.#{$iot-prefix}--table-header__group-row-spacer {
              border-right-width: 0;
            }
          }
          &:not(:last-of-type) {
            &.#{$iot-prefix}--table-header__column-group--last-data-column {
              border-right-width: 0;
              border-left-width: $border-width;
            }
          }
        }
      }
    }
  }

  // ADJUST FOR DIFFERENT TABLE ROW SIZES
  // Default size is lg
  $size-lg: $spacing-09;
  @include adjustPositionsAndHeights($size-lg, $size-lg);

  &--xl {
    @include adjustPositionsAndHeights($spacing-10, $spacing-10);
  }
  &--md {
    @include adjustPositionsAndHeights($spacing-08, $spacing-08);
    &.#{$iot-prefix}--data-table--column-groups--min-size-large {
      @include adjustPositionsAndHeights($spacing-08, $size-lg);
    }
  }
  &--sm {
    .#{$iot-prefix}--table-head--with-column-groups {
      .#{$prefix}--table-header-label {
        padding-bottom: 0;
        padding-top: 0;
      }
    }
    @include adjustPositionsAndHeights($spacing-07, $spacing-07);
    &.#{$iot-prefix}--data-table--column-groups--min-size-large {
      @include adjustPositionsAndHeights($spacing-07, $size-lg);
    }
  }
  &--xs {
    .#{$iot-prefix}--table-head--with-column-groups {
      .#{$prefix}--table-header-label {
        padding-bottom: 0;
        padding-top: 0;
      }
    }
    @include adjustPositionsAndHeights($spacing-06, $spacing-06);
    &.#{$iot-prefix}--data-table--column-groups--min-size-large {
      @include adjustPositionsAndHeights($spacing-06, $size-lg);
    }
  }
}