@import '../variables';

:root {
  --itf-table-background-color: #fff;
  --itf-table-sticky-top: 0;
  --itf-table-border-color: #e1e4e7;
  --itf-table-hover-color: #f0f0f0;
  --itf-table-strip-color: #f8f8f8;//#dadce033;
  --itf-table-sorted-color: #f8f8f8;//#dadce033;
  --itf-table-shadow-width: 3px;
  --itf-table-row-cursor: default;
  --itf-table-sticky-shadow1: rgb(0 0 0 / 16%);
  --itf-table-sticky-shadow2: rgb(0 0 0 / 23%);
}

[data-theme="dark"] {
  --itf-table-background-color: #{$dark-body-bg};
  --itf-table-border-color: #666;
  --itf-table-hover-color: #111;
  --itf-table-strip-color: #222;
  --itf-table-sorted-color: #444;
  --itf-table-sticky-shadow1: rgb(255 255 255 / 16%);
  --itf-table-sticky-shadow2: rgb(255 255 255 / 23%);
}

.itf-table {
  width: 100%;
  grid-template-columns: [col-start] auto [col-end];
  grid-template-rows: [header-start] 56px [header-end row-start] auto [row-end];

  &__wrapper {
    margin-top: 10px;
    margin-right: -30px;
    background-color: var(--itf-table-background-color);
    padding-right: 0;
    //overflow: hidden;
    width: 100%;
  }

  &__headers {
    .scroller {
      overflow-x: hidden;
      overflow-y: visible;
      padding-bottom: 1px;
    }
    .itf-table__header-row {
      display: grid;
      grid-template-columns: var(--itf-table-template);
    }
    .itf-table__header.align-left > span {
      justify-content: flex-start;
      text-align: left;
    }
  }
  &__rows {
    display: grid;
    overflow: auto;
    grid-template-columns: var(--itf-table-template);
    padding-bottom: 10px;

    & > .itf-table__row {
      display: contents;

      &:not(.itf-table__summary-row) {
        cursor: var(--itf-table-row-cursor);
      }
    }
  }

  &--striped &__row:nth-child(even) &__cell {
    background-color: var(--itf-table-strip-color);
  }

  &__cell.itf-table__cell--sorted {
    background-color: var(--itf-table-sorted-color);
  }
  &--hoverable &__rows{
    & > .itf-table__row:not(.itf-table__summary-row) {
      &:hover > .itf-table__cell,
      &:hover > .itf-table__cell--sorted {
        background-color: var(--itf-table-hover-color);
      }
    }
  }

  .itf-table__sticky-header &__headers {
    position: sticky;
    top: var(--itf-table-sticky-top);
    z-index: 4;

    .itf-table__header-row:last-child .itf-table__header {
      &:after {
        display: block;
        content: ' ';
        border-top: 1px solid var(--itf-table-border-color);
        left: 0;
        bottom: 0;
        right: 0;
        height: 0;
      }
    }
  }

  &__header {
    background-color: var(--itf-table-background-color);
    grid-row: header;
    font-weight: 500;
    &--sortable {
      cursor: pointer;
    }
    &--sorted {
      background-color: var(--itf-table-sorted-color);
    }

    & > span {
      text-overflow: ellipsis;
      overflow: hidden;
      height: 100%;
      display: block;
      padding: 8px 10px;
      text-align: right;

      &:hover .com-table-sort-btn {
        opacity: 1;
      }
    }

    &:first-child > span {
      text-align: left;
    }
  }

  &__small &__header span, &__small &__cell {
    padding: 4px 5px;
  }

  &__summary-row &__cell {
    padding-top: 2rem;
    border-bottom: 1px solid var(--itf-table-border-color);

    &:first-child {
      font-weight: 500;
    }
  }

  &--borders &__cell {
    border-bottom: 1px solid var(--itf-table-border-color);
  }

  &__cell {
    background-color: var(--itf-table-background-color);
    padding: 8px 10px;
    //border-left: 1px solid var(--itf-table-border-color);
    align-items: center;
    display: flex;
    justify-content: end;
    text-align: right;
    word-break: break-word;

    &:first-child, &.align-left {
      justify-content: flex-start;
      text-align: left;
    }
  }

  // First column sticky
  &__sticky-column & {
    .itf-table__header:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 5;
      border-right: solid 1px var(--itf-table-border-color);
    }
    .itf-table__cell:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 3;
      border-right: solid 1px var(--itf-table-border-color);
    }
  }
  &__sticky-column &__header, &__sticky-column &__cell {
    &:first-child {
      &:before {
        content: " ";
        display: block;
        //background: rgba(0, 0, 0, .1);
        top: 0;
        left: 100%;
        width: 1px;
        box-shadow: var(--itf-table-sticky-shadow1) 2px 0px 3px, var(--itf-table-sticky-shadow2) 2px 0px 3px;
        height: 100%;
        bottom: 0;
        position: absolute;
        opacity: 0;
        transition: opacity .25s ease-in-out;
      }
    }
  }
  .scrolled-x & {
    .itf-table__header, .itf-table__cell {
      &:first-child {
        &:before {
          opacity: 1;
        }
      }
    }
  }

  // Last column sticky
  &__sticky-last-column & {
    .itf-table__header:last-child {
      position: sticky;
      right: 0;
      z-index: 5;
      border-left: solid 1px var(--itf-table-border-color);
    }
    .itf-table__cell:last-child {
      position: sticky;
      right: 0;
      z-index: 3;
      border-left: solid 1px var(--itf-table-border-color);
    }
  }
  &__sticky-last-column &__header, &__sticky-column &__cell {
    &:last-child {
      &:before {
        content: " ";
        display: block;
        //background: rgba(0, 0, 0, .1);
        top: 0;
        left: 0;
        width: 1px;
        box-shadow: var(--itf-table-sticky-shadow1) -2px 0px 3px, var(--itf-table-sticky-shadow2) -2px 0px 3px;
        height: 100%;
        bottom: 0;
        position: absolute;
        opacity: 1;
        transition: opacity .25s ease-in-out;
      }
    }
  }
  .scrolled-right & {
    .itf-table__header, .itf-table__cell {
      &:last-child {
        &:before {
          opacity: 0;
        }
      }
    }
  }

  .scrolled-y & {
    .scroller {
      .itf-table__header {
        border-top: 1px solid var(--itf-table-border-color);
      }
      &:after {
        content: " ";
        display: block;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .1);
        height: calc(var(--itf-table-shadow-width) - 1px); // subtract 1px border-top
        top: 100%;
        position: absolute;
      }
    }
  }
}

.table2.table-retrieve tbody tr td.value {
  border: solid 1px transparent; }

.table2.table-border-hover tbody tr:hover td.value:hover,
.table2.table-retrieve tbody tr:hover td.value:hover {
  border: solid 1px #64abdc !important;
  cursor: pointer; 
}
