@import "./config.less";

@minWidth: 33px;
@tableMaxHeight: 75vh;
@maxWidth: 55vw;

.gapCol {
  box-shadow: 0px 5px 0px 1px #f4f4f4, 0px -3px 0px 1px #f4f4f4;
  border-right: 1px solid @grey-border;
}

.container {
  background: @mainBackground;
}

#toptoolbar.container {
  background: #fff !important;
}

table {
  display: table;
  white-space: nowrap;
  overflow: auto;
  width: 100%;
  @media (max-width: 1028px) {
    width: 50vw;
  }
  @media screen and (max-height: 680px) {
    width: 65vw !important;
  }
  margin: 50px auto;
  border-collapse: separate;
  border-spacing: 0 8px;
  td {
    background: #fff;
    height: 34px;
    .table-item {
      height: 34px;
      margin-bottom: 0 !important;
    }
  }
}

tbody {
  tr {
    box-shadow: @table-shadow;
    &:hover {
      td {
        background: @hover;
        .table-item {
          background: @hover !important;
        }
      }
    }
    &:first-child {
      justify-content: center;
      width: 8rem;
    }
    max-width: @maxWidth;
    td {
      margin: 0 !important;
      background: @white;
      color: @grey-dark;
      white-space: nowrap;
    }
  }
}

thead {
  display: table-header-group;
}

th {
  color: @purple !important;
  min-width: 60px;
  text-align: right;
  padding: 0 10px;
  p {
    margin: 0 10px;
    float: right;
  }
  span {
    margin: auto;
  }
}

.sortBtn {
  float: left;
  margin-left: 1rem;
}

.order-list,
.ascending {
  padding-left: 0;
  padding-right: 22px;
  border: none;
  background: none;
  outline: none;
  &:hover {
    background: transparent;
    cursor: pointer;
  }
}

.rotate180 {
  transform: rotate(180deg);
}

.table {
  width: 100%;

  max-height: 1024px;
  direction: rtl;

  &-container {
    margin: auto;
    max-height: 75vh;
    -webkit-overflow-scrolling: touch;
    overflow: none;
    display: table;
    width: 100%;
    border-spacing: 0 8px;
    border-collapse: separate;
  }

  .table-container > div:first-child:not(.pagination) {
    display: table;
    width: 100%;
    border-spacing: 0 8px;
    border-collapse: separate;
  }

  &-item {
    img {
      max-width: 26px;
      justify-content: center;
    }
    background: @white !important;
    display: flex !important;
    align-items: center;
    margin-bottom: 0;
    height: 34px;
    border-top: 0.5px solid @grey-border !important;
    border-bottom: 0.5px solid @grey-border !important;
    border-left: 0.5px solid @grey-border !important;
    padding: 0 10px;
    &-first {
      justify-content: center;
      padding: 0 !important;
    }
  }

  &-item-small {
    background: @white;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    height: 25px;
    padding: 0 10px;
  }
  &--header {
    z-index: 3;
    background: @mainBackground;
    max-height: 26px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    padding-bottom: 10px;
  }
}

.pagination {
  margin-top: 50px;
}

.header-extended-container {
  position: relative;
  display: flex;
  // &:last-child {
  // flex-grow: 1;
  // }
}

.table-space-sml {
  width: 9px;
  margin: 0;
}

.table-space-med {
  width: 29px;
  margin: 0;
}

.table-space-lg {
  width: 49px;
  margin: 0;
}

.sorted-header {
  display: flex;
}

.sortBtn {
  float: left;
  margin-left: 1rem;
}

.paginationLong {
  bottom: 50px;
}

.paginationClose {
  position: absolute;
  left: 0;
  right: 0;
  top: 550px;
}

.header-extended-container {
  position: relative;
  display: flex;
  // &:last-child {
  // flex-grow: 1;
  // }
}

.extended {
  max-height: 300px;
  max-width: 99%;
  overflow-y: auto;
  overflow-x: hidden;
  animation: extendElement 0.25s ease-in-out;
}

tr.biggerFont {
  box-shadow: 0px 0px 1px 0px #6d99c5;
  td {
    border-top: 1px solid @purple !important;
    border-bottom: 1px solid @purple !important;
    .borderRight {
      border-right: none !important;
    }
    .table-item:last-of-type {
      border-left: none !important;
    }
    p {
      border-top: none !important;
      border-bottom: none !important;
      border-right: none !important;
    }
    &:first-of-type {
      border-right: 1px solid @purple !important;
    }
    &:last-of-type {
      border-left: 1px solid @purple !important;
    }
  }
}

.borderRight {
  border-right: 0.5px solid @grey-border !important;
}