@import 'flive-vars';

// table style
.table-wrapper {
  font-size: 0.8rem;
  font-family: $alt-font-family;
}
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0px;
  > thead {
    border-bottom: 1px solid $flive-night-blue;
    .table-row-column {
      color: $flive-night-blue;
    }
  }
  > tfoot {
    border-top: 1px solid $flive-medium-grey;
  }
}
.table--header {
   border-top: none;
 }
.table--footer {
   border-bottom: none;
 }
.table-row {
  background: $flive-light-grey;
  &:nth-child(odd) {
    background: #fff;
  }
}
.table-row.white {
  background: #fff;
}
.table-row.grey {
  background: $flive-light-grey;
}
.table-row--selected {
  &, &:nth-child(odd) {
    background: $flive-night-blue;
    color: #fff;
  }
}
.table-row--selected.white, .table-row--selected.grey {
  background: $flive-night-blue;
  color: #fff;
}

.table-row-column {
  border-bottom: 1px solid $flive-medium-grey;
  border-spacing: 0;
  padding: 10px;
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  tr:last-child > & {
    border-bottom: none;
  }
}

.table-row-column--not--selectable {
  //user-select: all !important;
}

.table-row-column--checkbox {
  width: 20px;
}
.table-row-column--selected {
  border-bottom: 1px solid adjust_color($background-selected, $saturation: -40,  $lightness: -10%);
}
.table-row-column--selectable {
  cursor: pointer;
}
.table-row:hover {
  .table-row-column--selectable {
    color: #fff;
    background: rgba($flive-night-blue, 0.6);
  }
}

  // sortable row column
.table-row-column--sortable {
  user-select: none;
  position: relative;
  cursor: pointer;
  &:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    top: 15px;
    left: 10px;
    border-style: solid;
    vertical-align: middle;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent darken($flive-medium-grey, 5%) transparent;
    margin-right: 6px;
  }
}
.table-row-column--order-asc:before {
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent darken($flive-medium-grey, 5%) transparent;
}
.table-row-column--order-desc:before {
  border-width: 6px 6px 0 6px;
  border-color: darken($flive-medium-grey, 5%) transparent transparent transparent;
}
.table-row-column--sorted {
  &.table-row-column--order-asc:before {
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent $flive-night-blue transparent;
  }
  &.table-row-column--order-desc:before {
    border-width: 6px 6px 0 6px;
    border-color: $flive-night-blue transparent transparent transparent;
  }
}
.table-body {
  color: $flive-text-light-grey;
}

// fixed version
.wrapper-fixed {
  display: flex;
  flex-direction: column;
  min-height: 100px;
}
.wrapper-scroll {
  position: relative;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.table--scrolled {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
}
.filter-wrapper {
  margin: 1em 0;
  display: flex;
  align-items: center;
}
.filter {
  width: 20em !important;
}
