//#region Layout and basic styles
.bz-table-adv {
  width: 100%;
  display: flex;
  flex-direction: column;

  table, &__table {
    // display: table;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
    overflow: auto;
    flex: 1 1 auto;
    position: relative;
  }

  table > tbody, &__body {
    // display: table-row-group;
    display: block;
    overflow-y: auto;
    height: 100%;
  }

  table > thead > tr, &__header {
    // min-height: 32px;
    // display: table-row;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $bz-neutral-600;
  }

  table > tbody > tr, &__row {
    // display: table-row;
    display: flex;
    align-items: stretch;
    min-width: 100%;

    &:not(:last-child) {
      border-bottom: 1px solid $bz-neutral-300;
    }

    &:hover {
      background-color: $bz-neutral-200;
    }
  }

  &__row-wrapper {
    position: relative;
  
    &:not(:last-child) {
      border-bottom: 1px solid $bz-neutral-300;
    }
  }

  table > thead > tr > th, &__col-header {
    font-weight: $bz-font-weight-semibold;
    position: relative;
    text-align: left;
    flex: 1 1 auto;
  }

  table > tbody > tr > td, &__cell {
    // display: table-cell;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    vertical-align: middle;
    min-width: 0;
    font-size: $bz-font-size-body-small;
    padding: $bz-space-inset-squish-s;
  }
}
//#endregion

//#region Column Sorting
.bz-table-adv__col-sort {
  fill: $bz-neutral-400;
  margin: 0 $bz-space-inline-xs;
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;

  .bz-icn {
    fill: inherit;
  }

  svg {
    height: 16px;
    width: 16px;
    fill: inherit;
  }

  &--active {
    fill: $bz-theme-400;
    visibility: visible;
  }
}

.bz-table-adv {

  table > thead > tr > th, &__col-header {
    cursor: pointer;

    &:hover {

      .bz-table-adv__col-sort {
        visibility: visible;
      }
    }
  }
}
//#endregion

//#region Cell spacing

.bz-table-adv {
  &--compact {
    .bz-table-adv__cell {
      padding-bottom: $bz-space-inset-xs;
      padding-top: $bz-space-inset-xs;
    }
  }

  &--normal {
    .bz-table-adv__cell {
      padding-bottom: $bz-space-inset-s;
      padding-top: $bz-space-inset-s;
    }
  }

  &--comfortable {
    .bz-table-adv__cell {
      padding-bottom: $bz-space-inset-m;
      padding-top: $bz-space-inset-m;
    }
  }
}
//#endregion

//#region Table pagination
.bz-table-adv-pagination {
  border-top: 1px solid $bz-neutral-300;
  padding: $bz-space-inset-m;
  display: flex;
  justify-content: flex-end;
}
//#endregion

//#region Row Selection (More in responsive region)
.bz-table-adv__row-selector {

  &--selected {
    visibility: visible;
  }

  table > tbody > tr:hover &, .bz-table-adv__row:hover & {
    visibility: visible;
  }
}

@-moz-document url-prefix() {
  .bz-table-adv {
    
    .bz-checkbox__input {
      display: none;
    }
  }
}
//#endregion

//#region Row details (More in responsive region)
.bz-table-adv__row-wrapper {
  &.active {
    background-color: $bz-neutral-300;

    .bz-table-adv__row:first-child {
      border-bottom: 1px solid $bz-neutral-100;
      font-weight: bold;
    }

    .bz-table-adv__row:hover {
      background: none;
    }

    .bz-table-adv__cell--floating-actions > div {
      background: $bz-neutral-300;
      &::before {
        background-image: linear-gradient(
          90deg,
          rgba($bz-neutral-300, 0) 0%,
          $bz-neutral-300 100%
        );
        opacity: 0;
      }
    }
  }
}

.bz-table-adv__row-detail {
  width: 100%;
}

.bz-table-adv__detail-toggle {
  cursor: pointer;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
  line-height: 1;
  display: block;
}
//#endregion

//#region Fixed header
.bz-table-adv--fixed-header {
  display: flex;
  flex-direction: column;

  .bz-table-adv__table {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  .bz-table-adv__body {
    overflow-y: auto;
  }
}
//#endregion

//#region Horizontal scroll

.bz-table-adv--horizontal-scroll {
  .bz-table-adv__table {
    overflow-x: hidden;
  }

  .bz-table-adv__header {
    display: block;
  }

  .bz-table-adv__col-header {
    float: left;
  }

  .bz-table-adv__cell {
    float: left;
  }
}
//#endregion

//#region Header loading bar
.bz-table-adv--loading {

  thead, .bz-table-adv__header {
    border-color: $bz-theme-100;
    position: relative;

    &::after {
      animation: table-loader 4s ease infinite;
      background-color: $bz-theme-400;
      bottom: -1px;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
    }
  }
}

@keyframes table-loader {
  from {
    left:0%;
    width:0%;
  }
  50% {
    left:0%;
    width:100%;
  }
  to {
    left:100%;
    width:0%;
  }
}
//#endregion

//#region Cell content overflow

.bz-table-adv__body--singleline {
  .bz-table-adv__cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }
}

.bz-table-adv__col-title {
  user-select: none;
}

.bz-table-adv__header--singleline {
  .bz-table-adv__col-title {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;

    > span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 100%;
      vertical-align: middle;
    }
  }

  .bz-table-adv__col-header--sortable {
    > .bz-table-adv__col-title > span {
      max-width: calc(100% - 14px);
    }
  }
}
//#endregion

//#region column resizing
.bz-table-adv__header {
  &:hover {
    .bz-table-adv__col-resize {
      opacity: 1;
    }
  }
}

.bz-table-adv__col-resize {
  align-items: stretch;
  bottom: 0px;
  cursor: e-resize;
  display: flex;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: -4px;
  top: 0;
  transition: opacity .3s ease;
  width: 9px;
  z-index: 1;

  &::after {
    background-color: $bz-theme-100;
    content: "";
    transition: background-color .3s ease;
    width: 1px;
  }

  &:hover {
    &::after {
      background-color: $bz-theme-400;
    }
  }

  &--active {
    opacity: 1;
    &::after {
      background-color: $bz-theme-400;
    }
  }
}

.bz-table-adv__col-border {
  border-right: 1px solid transparent;
  transition: border-right-color .3s ease;

  &--active {
    border-right-color: $bz-theme-400;
  }
}
//#endregion

//#region Selection column checkbox
.bz-table-adv__cell {
  > .bz-checkbox {
    padding: 0;
  }
}
//#endregion

//#region Row action and icon cells (More in responsive)

.bz-table-adv table > tbody > tr > td,
.bz-table-adv .bz-table-adv__cell {

  &--selection {
    justify-content: center;
    display: flex;
    min-width: 30px;
    max-width: 30px;
  }

  &--icon {
    justify-content: center;
    display: flex;
    padding-left: 0;
    padding-right: 0;
  }

  &--floating-actions {
    position: absolute;
    position: sticky;
    right: 0;
    width: 100%;
    top: 0;
    bottom: 0;

    > div {
      background: $bz-neutral-200;
      display: flex;
      opacity: 0;
      padding: 0 8px;
      position: absolute;
      right: 0;
      justify-content: flex-end;
      overflow: visible;
      height: 100%;
      align-items: center;
      top: 0;
      bottom: 0;
  
      &::before {
        width: 32px;
        transition: all 0.1s;
        content: "";
        height: 100%;
        margin-left: -32px;
        position: absolute;
        top: 0;
        left: 0;
        background-image: linear-gradient(
          90deg,
          rgba($bz-neutral-200, 0) 0%,
          $bz-neutral-200 100%
        );
        opacity: 0;
      }
    }
  }

  &--actions {
    justify-content: flex-end;
    display: flex;

    a, .bz-btn-icn {
      opacity: 0;
      padding: 0;

      &:focus {
        opacity: 1;
      }
    }

    a {
      text-decoration: underline;
    }

    .bz-btn-icn--active {
      opacity: 1;
    }
  }
}

.bz-table-adv table > tbody > tr,
.bz-table-adv__row {
  &:hover {
    .bz-table-adv__cell--actions {
      a, .bz-btn-icn {
        opacity: 1;
      }
    }

    .bz-table-adv__cell--floating-actions > div {
      opacity: 1;
      &::before {
        opacity: 1;
      }
    }
  }
}
//#endregion

//#region Other elements related to the table
.bz-table-adv__responsive-label {
  color: $bz-neutral-600;
  font-weight: $bz-font-weight-semibold;
}

.bz-table-adv__options {
  align-items: center;
  background-color: $bz-neutral-100;
  border-bottom: 1px solid $bz-neutral-300;
  display: flex;
  justify-content: space-between;
  padding: .5rem 1.6rem .5rem 2.4rem;

  &__left {
    flex: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__left,
  &__right {
    align-items: center;
    display: flex;
  }
}
//#endregion

//#region virtual scroll
.bz-table-adv__virtual-scroll {
  height: 100%;
}
//#endregion

//#region RESPONSIVE STYLES
@media screen and (max-width: 719px) {
  //#region Basic layout and elements
  .bz-table-adv {
    display: block;

    table > thead, &__header,
    table > tbody, &__body,
    table > thead th, &__col-header,
    table > tbody > tr, &__row, &__row-wrapper {
      display: block;
    }
  }

  .bz-table-adv thead tr, .bz-table-adv__header {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .bz-table-adv tr, .bz-table-adv .bz-table-adv__row {
    border: 1px solid $bz-neutral-300;
    border-bottom: none;
  }

  .bz-table-adv table > tbody > tr > td, .bz-table-adv .bz-table-adv__cell {
    border: none;
    display: flex;
    position: relative;
    width: 100% !important;       //Required because column width is dynamically set with element's style attribute
    max-width: 100% !important;   //Required because column max-width is dynamically set with element's style attribute
    align-items: center;
    justify-content: flex-start;
  }

  // IE10 Fix
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS styles go here
    .bz-table-adv table > tbody > tr > td {
      display: block;
    }
  }
  //#endregion
}

@media screen and (min-width: 720px) {
  //#region Row selection
  .bz-table-adv__row-selector {
    visibility: hidden;

    &--selected {
      visibility: visible;
    }
  }
  //#endregion

  //#region Row details
  .bz-table-adv__detail-toggle {
    padding-left: 0;
    padding-right: 0;
  }
  //#endregion

  //#region Row action and icon cells
  .bz-table-adv table > tbody > tr > td,
  .bz-table-adv__cell {
    &.bz-table-adv__cell--selection {
      padding-left: 0;
      padding-right: 0;
      justify-content: center;
    }
  }
  //#endregion
}
//#endregion