@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";

.table-wrapper.scroll-top {
  overflow-x: auto;
  width: 100%;

  &, & > table {  // scrollbar at the top
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
  }
}

table {
  width: 100%;
  border-collapse: collapse;

  ::ng-deep tr {
    border-bottom: 1px solid $color-gray-mercury;

    ::ng-deep td, ::ng-deep th {
      padding: 8px 5px;
    }

    ::ng-deep th {
      text-align: left;
    }
  }
}

table.ellipsis {
  ::ng-deep td, ::ng-deep th {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
  }
}