.td-hover-url {
  position: absolute;
  top: sizeToRem(-8);
  border: none;
  margin: 0;
  padding: sizeToRem(6) sizeToRem(4);
  word-wrap: break-all;
  left: sizeToRem(-6);
  line-height: 1.15;
  width: calc(100% + (#{sizeToRem(6)} * 2));
  height: auto;
  display: none;
  border-radius: $border-radius;
}

.td-truncated {
  position: relative;
  width: 100%;

  &:hover .td-hover-url {
    display: inline-block;
  }
}

.n6-table-container {
  display: block;
  max-width: 100%;

  .table-wrapper {
    display: block;
    max-width: 100%;
    overflow: auto hidden;
    border: 1px solid $grey-light;
  }

  .table {
    display: table;
    margin-bottom: 0;
    border-spacing: 0;
    border-collapse: collapse;
    word-break: break-word;

    .thead {
      background-color: $light-background;
      vertical-align: middle;
    }

    .tbody {
      vertical-align: middle;
      background-color: $light-background;
    }

    .tr {
      background-color: $table-even-row-color;
      display: table-row;
      vertical-align: inherit;

      .td-hover-url {
        background-color: $table-even-tooltip-color;
      }

      .th,
      .td {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0;
      }

      .th {
        padding: sizeToRem(16) sizeToRem(10);
        color: $dark;
        font-size: sizeToRem(14);
        background: $light-background;
        font-weight: medium;
      }

      .td {
        white-space: pre-line;
        padding: sizeToRem(4) sizeToRem(6);
        line-height: sizeToRem(16);
        font-size: sizeToRem(14);

        :last-child {
          border-right: 0;
        }
      }

      :last-child {
        .td {
          border-bottom: 0;
        }
      }

      &.dark {
        background-color: $table-odd-row-color;

        .td-hover-url {
          background-color: $table-odd-tooltip-color;
        }
      }

      &.last-row {
        .td-hover-url {
          bottom: sizeToRem(-8);
          top: unset;
        }
      }
    }

    .th-sort {
      color: $grey-light;
      margin-left: sizeToRem(4);
      width: 0;
      height: 0;

      &.inactive {
        border-left: sizeToRem(5) solid transparent;
        border-right: sizeToRem(5) solid transparent;
        border-bottom: sizeToRem(5) solid $grey-light;
      }

      &.up {
        border-left: sizeToRem(5) solid transparent;
        border-right: sizeToRem(5) solid transparent;
        border-bottom: sizeToRem(5) solid $dark;
      }

      &.down {
        border-left: sizeToRem(5) solid transparent;
        border-right: sizeToRem(5) solid transparent;
        border-top: sizeToRem(5) solid $dark;
      }
    }
  }
}

.virtualized-list {
  overflow-x: hidden !important;
}

.trimmed-url {
  position: relative;
}

.td-break {
  word-break: break-all;
}

.full-view-mode {
  position: fixed;
  top: sizeToRem(46);
  z-index: 3;
  max-width: calc(#{$content-max-width} - (#{$page-padding-lg} * 2));
  width: calc(100% - (#{$page-padding-lg} * 2));

  @include media-breakpoint-down(lg) {
    width: calc(100% - (#{$page-padding-md} * 2));
    max-width: calc(#{$content-max-width} - (#{$page-padding-md} * 2));
  }

  @include media-breakpoint-down(md) {
    width: calc(100% - (#{$page-padding-sm} * 2));
    max-width: calc(#{$content-max-width} - (#{$page-padding-sm} * 2));
  }
}

.full-view-mode-btn {
  width: sizeToRem(34);
  height: sizeToRem(34);
  padding: 0;
  text-align: center;
  background: transparent;
  margin-left: auto;
  z-index: 3;

  &.full-view {
    position: fixed;
    top: sizeToRem(12);
    margin-right: sizeToRem(2);
    background: $grey-background;
  }
}

.full-view-btn-wrapper {
  position: absolute;
  top: sizeToRem(-34);
  height: sizeToRem(34);
  width: calc(100% - (#{$page-padding-lg} * 2));
  max-width: calc(#{$content-max-width} - (#{$page-padding-lg} * 2));
  z-index: 3;
  background-color: transparent;

  @include media-breakpoint-down(lg) {
    width: calc(100% - (#{$page-padding-md} * 2));
    max-width: calc(#{$content-max-width} - (#{$page-padding-md} * 2));
  }

  @include media-breakpoint-down(md) {
    width: calc(100% - (#{$page-padding-sm} * 2));
    max-width: calc(#{$content-max-width} - (#{$page-padding-sm} * 2));
  }

  &.full-view {
    position: fixed;
    top: sizeToRem(12);

    .full-view-mode-btn {
      margin-right: sizeToRem(2);
      background: $grey-background;
    }
  }
}

.full-view-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba($dark-lighter, 0.5);
  display: none;
  z-index: 2;

  &.active {
    display: block;
  }
}

.full-view-mode-btn-icon {
  width: sizeToRem(20);
  height: sizeToRem(20);
  color: $dark;

  &:hover {
    color: $primary;
  }
}
