@import '../../styles/utils/variables';
@import '../../styles/utils/mixins';

.bn-table {
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  height: 100%;

  &-left {
    text-align: left;
  }

  &__header, &__row {
    display: flex;
    flex-wrap: wrap;
  }

  &__header {
    font-family: $open-sans;
    background: $bn-blue2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    padding: 13px;
    flex-wrap: nowrap;
    overflow-x: hidden;

    @include screen(lg) {
      padding: 2px 13px 6px;
    }

    & > div {
      white-space: nowrap;
      cursor: default;
      position: relative;
      &::after {
        position: absolute;
        font-family: 'Material Icons';
        font-weight: 400;
        vertical-align: bottom;
        margin-left: 2px;
      }
      &.sortable {
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover, &:active {
          color: $bn-blue-light;
        }
        @media (hover: none) {
          &:hover, &:active {
            color: white;
          }
        }
      }
      &.active {
        font-weight: bold;
        &.sort-up {
          &::after {
            content: '\E316';
          }
        }
        &.sort-down {
          &::after {
            content: '\E313';
          }
        }
      }
    }
  }

  &__body {
    font-family: $roboto-mono;
    padding: 0;
    height: calc(100% - 42px);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;

    @include screen(lg) {
      height: calc(100% - 28px);
    }
  }

  &__body_no_padding {
    font-family: $roboto-mono;
    padding: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    height: calc(100% - 43px);

    @include screen(lg) {
      height: calc(100% - 24px);
    }

    perfect-scrollbar div.ps {
      display: flex;
      flex-direction: column;

      .ps-content {
        margin-top: auto;
      }

    }

  }

  &__body_no_header {
    font-family: $roboto-mono;
    padding: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }

  &__info {
    padding: 0 4px;
    cursor: default;
  }

  ::ng-deep {
    .ps-content {
      padding: 5px 0;
    }

    .ps.ps--scrolling-y > .ps__rail-y,
    .ps__rail-y:focus,
    .ps__rail-y:hover {
      background: none;
    }
  }

  &__section-title {
    padding: 5px 13px;
    text-align: left;
    text-transform: uppercase;
    font-family: $open-sans;
    font-weight: bold;
    opacity: 0.4;
    cursor: default;
  }

  &__row {
    padding: 0 13px;
    cursor: default;
    line-height: 24px;
    @include screen(lg) {
      line-height: 20px;
    }
    &.selectable {
      cursor: pointer;
    }
    &.selected, &:hover, &:active, &.selectable:focus {
      background-color: rgba(255,255,255,0.04);
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    }
  }

  &__row-detail {
    flex: 0 0 100%;
    text-align: left;
  }

  &__cell {
    cursor: inherit;
    ::ng-deep .material-icons {
      font-size: 1.2em;
      vertical-align: text-bottom;
    }
  }
}

.bn-table__section + .bn-table__section {
  margin-top: 10px;
}
