@import '../core';

$table-row-bg-selected: $ec-color-bg-info;
$table-row-bg-hover: $ec-color-bg-hover;
$table-row-bg-heading: #EBEDEE;
$table-cell-padding-x: .5rem;
$table-cell-padding-y: .5rem;

$table-z-indexes: (
  th-resizable: 1,
  td-locked: 2,
  th-locked: 3
);

@mixin table-cell($type) {
  height: 2rem;
  line-height: 1rem;
  padding: $table-cell-padding-x $table-cell-padding-y;
  @include truncate;

  @if $type == th {
    border-bottom: 1px solid $ec-border-color-dark;
    color: $ec-color-text-secondary-dark;
    font-weight: normal;
    vertical-align: middle;
  }

  @if $type == td {
    border-top: 1px solid $ec-border-color-default;
    vertical-align: top;
  }

  &:first-child {
    padding-left: $table-cell-padding-x * 2;
  }

  &:last-child {
    padding-right: $table-cell-padding-x * 2;
  }
}

@mixin table-base {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: $ec-font-size-label;

  th {
    @include table-cell(th);
  }

  td {
    @include table-cell(td);
  }

  tbody > tr:first-child td {
    border-top: 0;
  }

  tfoot td {    
    font-weight: bold;
  } 
}

@mixin table-selectable {
  tbody > tr:hover {
    > td {
      background-color: $table-row-bg-hover;
      border-color: transparent;
      cursor: pointer;
    }

    &.is-selected {
      background-color: $table-row-bg-selected;
    }

    & + tr > td {
      border-color: $table-row-bg-hover;
    }
  } 
}

@mixin table-condensed() {
  th,
  td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    height: 1.5rem;
  }
}

@mixin table-row-heading {
  background-color: $table-row-bg-heading;
  color: $ec-color-text-secondary-dark;
  border-bottom-color: rgba($black, .09);
}

@mixin table-row-selected {
  background-color: $table-row-bg-selected;
}

@mixin table-scrollable {
  position: relative;

  thead th {
    background-color: $ec-color-bg-content;
    position: sticky !important;
    top: 0;
    z-index: 1;
  }

  tfoot td {
    background-color: $ec-color-bg-content;
    position: sticky !important;
    bottom: 0;
    z-index: 1;
  }
}

@mixin table-col-sort-icon() {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  width: .875rem;
  height: .875rem;
  margin-left: .25rem;
  display: inline-block;
  vertical-align: top;
}

@mixin table-col-sort() {
  &.is-resizable {
    .content-wrapper {
      display: flex;
      cursor: pointer;
    }

    .content {
      flex: 0 1 auto;
    }

    .content-wrapper::after {
      flex: none;
      @include table-col-sort-icon;
    }

    &.is-sorted-desc,
    &.is-sorted-asc {
      .content-wrapper::after {
        background-image: icon-sort-asc-bg();
      }
    }

    &.is-sorted-desc {
      .content-wrapper::after {
        transform: scaleY(-1);
      }
    }
  }

  &:not(.is-resizable) {
    cursor: pointer;

    &::after {
      @include table-col-sort-icon;
    }

    &.is-sorted-desc,
    &.is-sorted-asc {
      &::after {
        background-image: icon-sort-asc-bg();
      }
    }

    &.is-sorted-desc::after {
      transform: scaleY(-1);
    }
  }
}

@mixin table-action-widths($selector: '.actions') {
  $action-width: 2rem;
  @each $n in (1, 2, 3, 4, 5) {
    #{$selector}-#{$n} {
      width: ($action-width * $n) + .0625rem;
    }
  }
}

@mixin table-master-cell {
  width: 1.5rem;
  padding: .25rem 0;
  vertical-align: top;
}

@mixin table-detail-row() {
  background-color: $ec-color-bg-content-secondary;
}

@mixin table-detail-content() {
  background-color: transparent;
  border-top: 1px solid $ec-border-color;
  padding: 1rem 2rem 1rem 0 !important;
}