@import '../core';

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

$table-z-indexes: (
  th-resizable: var(--ec-z-index-sticky-header),
  td-locked: calc(var(--ec-z-index-sticky-header) + 1),
  th-locked: calc(var(--ec-z-index-sticky-header) + 2)
);

@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 var(--ec-border-color-dark);
    color: var(--ec-color-secondary-dark);
    font-weight: normal;
    vertical-align: middle;
  }

  @if $type == td {
    border-top: 1px solid var(--ec-border-color);
    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: var(--ec-font-size-label);

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

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

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

  tbody {
    > tr.is-error {
      @include table-row-status(error);
    }

    > tr.is-success {
      @include table-row-status(success);
    }
  }

  tfoot td {
    font-weight: bold;
  }
}

@mixin table-selectable {
  thead th {
    height: 3rem;
  }

  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 {
  color: var(--ec-color-secondary-dark);
  font-size: var(--ec-font-size-label);
  font-weight: var(--ec-font-weight-bold);
  line-height: 1.333333333;
  text-transform: uppercase;
  padding-bottom: 0;
  vertical-align: bottom;
  border-top: 0;
}

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

@mixin table-scrollable {
  position: relative;

  > thead th {
    background-color: var(--ec-background-color);
    position: sticky !important;
    top: 0;
    z-index: var(--ec-z-index-sticky-header);
  }

  > tfoot td {
    background-color: var(--ec-background-color);
    position: sticky !important;
    bottom: 0;
    z-index: var(--ec-z-index-sticky-header);
  }
}

@mixin table-col-sort-icon() {
  width: .875rem;
  height: .875rem;
  margin: 0 .25rem;
  font-size: .75rem;
  display: none;
  align-items: center;
  justify-content: center;
}

@mixin icon-sort-asc {
	font: var(--fa-font-solid);
	content: "\f062";
}

@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 {
        @include icon-sort-asc;
        display: inline-flex;
      }
    }

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

    &.text-right {
      .content-wrapper {
        flex-direction: row-reverse;
      }
    }
  }

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

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

    &.is-sorted-desc,
    &.is-sorted-asc {
      &::after {
        @include icon-sort-asc;
        display: inline-flex;
      }
    }

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

    &.text-right {
      &::after {
        content: '';
        display: none !important;
      }

      &::before {
        @include table-col-sort-icon;
      }
      
      &.is-sorted-desc,
      &.is-sorted-asc {
        &::before {
          @include icon-sort-asc;
          display: inline-block;
        }
      }

      &.is-sorted-desc::before {
        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 !important;
  vertical-align: top;
}

@mixin table-detail-row() {
  background-color: var(--ec-background-color-detail);
}

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

@mixin form-table() {
  td {
    padding-bottom: .25rem;
    padding-top: .25rem;
    height: 2.5rem;
    line-height: 2rem;
    border-top: 0;
    font-size: var(--ec-font-size-body);
  }

  tr:first-child {
    td {
      padding-top: .5rem;
      height: 2.75rem;
    }
  }

  tr:last-child {
    td {
      padding-bottom: .5rem;
      height: 2.75rem;
    }
  }
}

@mixin table-row-status($status) {
  $bg-color: var(--ec-background-color-caution);

  @if $status == error {
    $bg-color: var(--ec-background-color-danger);
  } @else if $status == success {
    $bg-color: var(--ec-background-color-success);
  }

  td {
    background-color: $bg-color;
  }
}