.cf-table {
  &__result-value {
    &--changed {
      @extend .cf-table__result-value;
      position: relative;
      z-index: 1;
      &:after {
        background-color: var(--pf-global--palette--blue-50);
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        z-index: -1;
      }
    }
  }
  &__slider-cell {
    padding: 0;
    &__slider {
      font-size: 1.5rem;
      position: absolute;
      bottom: 8px;
      left: 2px;
      --pf-c-button--disabled--Color: var(--pf-global--disabled-color--200);
    }
  }
  &__ids-row td {
    padding-top: var(--pf-global--spacer--sm);
    padding-bottom: var(--pf-global--spacer--sm);
  }
  &__result--new {
    animation: result-blink 1s forwards;
  }
}

@media screen and (min-width: 768px) {
  .cf-table--with-results {
    table-layout: fixed;
    width: 100%;
    // separate border collapse needed to keep border bottom in thead th's with position sticky
    border-collapse: separate;

    thead tr {
      // removing tr border and setting it to sticky th's and td's
      --pf-c-table--border-width--base: 0;
    }

    thead tr td,
    thead tr th {
      position: sticky;
      z-index: 9999;
      top: 0;
      background-clip: padding-box;
      background-color: #ffffff;
      border-bottom: var(--pf-global--BorderWidth--sm) solid
        var(--pf-c-table--BorderColor);
    }

    tbody td {
      border-bottom: var(--pf-global--BorderWidth--sm) solid
        var(--pf-c-table--BorderColor);
    }

    thead th:nth-child(-n + 5),
    thead td:nth-child(-n + 5),
    thead th:last-child.cf-table__slider-cell {
      z-index: 10000;
    }

    tbody td:nth-child(-n + 5),
    tbody td:last-child.cf-table__slider-cell {
      background-clip: padding-box;
      background-color: #ffffff;
      position: sticky;
      z-index: 9999;
    }

    thead th:first-child,
    thead td:first-child,
    tbody td:first-child {
      left: 0;
      width: 53px;
      min-width: 53px;
      max-width: 53px;
    }
    thead th:nth-child(2),
    tbody td:nth-child(2) {
      left: 53px;
    }
    thead th:nth-child(3),
    tbody td:nth-child(3) {
      left: 253px;
    }
    thead th:nth-child(4),
    tbody td:nth-child(4) {
      left: 453px;
    }
    thead th:nth-child(5),
    tbody td:nth-child(5) {
      left: 652px;
    }
    thead th:last-child.cf-table__slider-cell,
    tbody td:last-child.cf-table__slider-cell {
      right: 0;
    }

    thead th:not(:first-child):not(.cf-table__slider-cell),
    tbody td:not(:first-child):not(.cf-table__slider-cell) {
      width: 200px;
      min-width: 200px;
    }
    thead th.cf-table__slider-cell,
    thead td.cf-table__slider-cell {
      width: 30px;
      min-width: 30px;
      max-width: 30px;
    }
  }

  .cf-table-container {
    &--with-results {
      position: relative;
      height: 100%;
      overflow: auto;
    }
  }

  .cf-table-outer-container {
    overflow: hidden;
    height: calc(100% - 80px);
  }

  .cf-table-inner-container {
    height: 100%;
    overflow: hidden;
  }
}

@media screen and (min-width: 1600px) {
  .cf-table--with-results {
    thead th:nth-child(2),
    tbody td:nth-child(2) {
      left: 53px;
    }
    thead th:nth-child(3),
    tbody td:nth-child(3) {
      left: 302px;
    }
    thead th:nth-child(4),
    tbody td:nth-child(4) {
      left: 552px;
    }
    thead th:nth-child(5),
    tbody td:nth-child(5) {
      left: 801px;
    }
    thead th:not(:first-child):not(.cf-table__slider-cell),
    tbody td:not(:first-child):not(.cf-table__slider-cell) {
      width: 250px;
      min-width: 250px;
      &.cf-table__no-result-cell {
        width: 350px;
        min-width: 350px;
      }
    }
  }
}

.cf-table__scroll-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  z-index: 30000;
  &--vertical,
  &--horizontal {
    @extend .cf-table__scroll-thumb;
  }
}

.cf-table__scroll-track {
  &--horizontal {
    top: 0;
    right: 40px;
    width: calc(100% - 600px - 53px - 70px);
  }
  &--vertical {
    top: 0;
    right: 0;
    height: 100%;
  }
}

.cf-table__scroll-area {
  margin-top: 16px;
  margin-right: -16px !important;
}

@media screen and (min-width: 1600px) {
  .cf-table__scroll-track--horizontal {
    width: calc(100% - 750px - 53px - 70px);
  }
}

@keyframes result-blink {
  from {
    background-color: rgba(115, 188, 247, 1);
  }
  to {
    background-color: rgba(255, 255, 255, 1);
  }
}
