@import '../../base/components/components.scss';
@import '../../base/mixins';


.enjoy-data-table {
  position: relative;
  border: $data-table-dividers;
  border-collapse: collapse;
  white-space: nowrap;
  font-size: $data-table-font-size;
  background-color: unquote("rgb(#{$color-white})");

  thead {
    padding-bottom: 3px;

    .enjoy-data-table__select {
      margin-top: 0;
    }
  }

  tbody {
    tr {
      position: relative;
      height: $data-table-row-height;
      @include enjoy-animation-default(0.28s);
      transition-property: background-color;

      &.is-selected {
        background-color: $data-table-selection-color;
      }

      &:hover {
        background-color: $data-table-hover-color;
      }
    }
  }

  td, th {
    padding: 0 $data-table-column-padding 12px $data-table-column-padding;
    text-align: right;

    &:first-of-type {
      padding-left: 24px;
    }

    &:last-of-type {
      padding-right: 24px;
    }
  }

  td {
    position: relative;
    vertical-align: middle;
    height: $data-table-row-height;
    border-top: $data-table-dividers;
    border-bottom: $data-table-dividers;
    padding-top: $data-table-cell-top;
    box-sizing: border-box;

    .enjoy-data-table__select {
      vertical-align: middle;
    }
  }

  th {
    position: relative;
    vertical-align: bottom;
    text-overflow: ellipsis;
    @include typo-body-2();
    height: $data-table-row-height;
    font-size: $data-table-header-font-size;
    color: $data-table-header-color;
    padding-bottom: 8px;
    box-sizing: border-box;

    &.enjoy-data-table__header--sorted-ascending,
    &.enjoy-data-table__header--sorted-descending {
      color: $data-table-header-sorted-color;
      &:before {
        @include typo-icon;
        font-size: $data-table-header-sort-icon-size;
        content: "\e5d8";
        margin-right: 5px;
        vertical-align: sub;
      }
      &:hover {
        cursor: pointer;
        &:before {
          color: $data-table-header-sorted-icon-hover-color;
        }
      }
    }
    &.enjoy-data-table__header--sorted-descending:before {
      content: "\e5db";
    }
  }
}

.enjoy-data-table__select {
  width: 16px;
}

.enjoy-data-table__cell--non-numeric.enjoy-data-table__cell--non-numeric {
  text-align: left;
}