@import '../../../globals/vars';
@import '../../../vendor/carbon-components/scss/globals/scss/layout';
@import 'column-resize';
@import 'ColumnHeaderRow/column-header-row';
@import 'FilterHeaderRow/filter-header-row';
@import 'ColumnGrouping/column-grouping';

.#{$prefix}--data-table {
  th {
    height: $spacing-09;
    border-top: none;
    border-bottom: none;
    position: relative;

    // always vertically align headers to middle--even with xl size prop
    &.#{$iot-prefix}--table-head--table-header {
      vertical-align: middle;
    }
  }

  // override sort icons, so they stay in the middle, at xl size, too.
  &--xl {
    .#{$prefix}--table-sort__icon-unsorted,
    .#{$prefix}--table-sort__icon {
      margin-top: 0;
    }

    // fix positioning of order number when in multi-sort
    span.#{$iot-prefix}--table-header-label__sort-order {
      bottom: $spacing-06;
    }

    // fix sort icon missing at xl sizes
    &.#{$prefix}--data-table--sort th .#{$prefix}--table-sort {
      display: flex;
    }

    th {
      height: $spacing-10;
    }
  }

  &--md {
    th {
      height: $spacing-08;
    }
  }

  &--sm {
    th {
      height: $spacing-07;
    }
  }

  &--xs {
    th {
      height: $spacing-06;
    }
  }

  th:last-of-type {
    position: relative;
  }

  .#{$prefix}--table-header-label {
    display: flex;
    user-select: none;
    overflow: hidden;
    // allow the multiselect filter to expand to full height and the table to scroll
    .#{$prefix}--multi-select .#{$prefix}--list-box__menu {
      max-height: unset;
    }

    & > span {
      margin: auto 0;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .#{$iot-prefix}--table-header-label__sort-order {
    position: absolute;
    bottom: $spacing-04;
    right: $spacing-04;
    font-size: 0.667rem;
    font-weight: bold;

    html[dir='rtl'] & {
      left: $spacing-03;
      right: unset;
    }
  }

  .column-header__btn {
    margin: 0 $spacing-05 $spacing-05 0;
    max-height: $spacing-07;
  }

  .column-header__select {
    opacity: 1;
  }

  .column-header__select--hidden {
    opacity: 0.5;
  }

  .column-header__select--isOver {
    border-color: $focus;
    box-shadow: inset 0 0 0 1px $gray-10;
  }

  .lightweight {
    tr:last-of-type {
      th {
        border-bottom: solid 2px $interactive-02;
      }
    }
    th {
      background-color: $ui-01;
      .#{$prefix}--table-sort {
        background-color: $ui-01;
        &:hover {
          background-color: $ui-03;
        }
      }
    }
  }

  .#{$iot-prefix}--table-expand-resize {
    width: 40px;
  }

  .#{$iot-prefix}--table-header-checkbox {
    vertical-align: middle;
  }

  .#{$iot-prefix}--table-header-checkbox-resize {
    width: 54px;
  }

  .#{$iot-prefix}--table-header-resize {
    word-break: break-all;
  }

  .#{$iot-prefix}--table-header-row-action-column {
    min-width: 40px;
  }

  .#{$iot-prefix}--table-header-expander-column {
    width: auto;
    padding: 0;
  }

  .#{$iot-prefix}--tableheader-filter > .#{$prefix}--table-header-label {
    overflow: visible;
  }

  th:last-of-type.#{$iot-prefix}--table-header-row-action-column--extra-wide {
    min-width: 250px;
    width: 250px; // Needed for fixed/resizable columns that don't respect min-width
  }

  .#{$iot-prefix}--clear-filters-button--disabled {
    @include disabled-icon-button();
  }

  .#{$prefix}--table-sort {
    padding-left: 0;
    padding-right: 0;

    .#{$prefix}--table-header-label {
      padding-left: $spacing-05;
      padding-right: 0;
    }
  }
}

.#{$iot-prefix}--table-head {
  &--overflow {
    margin: auto 0;
    flex-shrink: 0;

    .#{$prefix}--table-sort:focus &:hover {
      margin-top: -2px;
      margin-bottom: -2px;
      background-color: $gray-40;
    }
  }

  &--table-header {
    position: relative;
    vertical-align: middle;

    .#{$prefix}--table-header-label {
      height: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      line-height: 1rem;
    }

    &--with-overflow {
      .#{$prefix}--table-header-label {
        padding-right: 0;
      }

      .#{$prefix}--overflow-menu-options:after {
        width: 3rem;
      }
    }
  }
}