.nd-table {
  width: 100%;

  table {
    width: 100%;
    border: 1px solid var(--nd-color-border);
  }

  th {
    @include rem(10);
    color: var(--nd-color-text);
    background: #f5f6f5;
    font-weight: 700;
    border-right: 1px solid $white;
    padding: $default-spacing;
    padding-right: $default-spacing * 3;
    text-align: left;
    user-select: none;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;

    &.sortable {
      cursor: pointer;

      &.asc {
        i {
          transform: rotate(180deg);
        }
      }

      &:hover {
        background: darken(#f5f6f5, 3);
      }

      i {
        display: block;
      }
    }

    i {
      @include rem(6);
      opacity: 0.3;
      display: none;
      transition: $default-transition;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -3px;
    }
  }

  tr {
    transition: $default-transition;
    position: relative;

    &.drag-over {
      border: 1px dashed var(--nd-color-link);
    }

    &.active {
      background: #f6f6f6;
    }

    &:nth-child(even) {
      background: #fcfcfc;
    }
  }

  td {
    @include rem(10);
    padding: $default-spacing;
    border-right: 1px solid $white;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
    color: var(--nd-color-text);

    .icon-drag {
      padding-right: $default-spacing;
      color: var(--nd-color-subtle);
    }

    .nd-loader {
      .spinner {
        margin: auto;
      }
    }

    &.center {
      text-align: center;
    }

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

  .nd-search-box {
    width: 100%;

    @media screen and (min-width: 700px) {
      width: 50%;
    }
  }
}

.nd-table-header {
  display: flex;
  margin-bottom: $default-spacing;
  justify-content: space-between;

  input {
    margin-bottom: 0;
  }

  .nd-button-group {
    padding-left: $default-spacing;
  }
}

.nd-row__selected {
  opacity: 0.5;
}

.nd-table__container {
  width: 100%;
  overflow-x: scroll;
}

.nd-search-container {
  flex: 1;
  display: flex;
  flex-direction: column;

  .nd-search-box {
    width: 100%;
  }
}

.nd-table__container {
  width: 100%;
  overflow-x: scroll;
}

.actions .nd-button__icon {
  color: var(--nd-color-link);
}

.nd-table__loading-row,
.nd-table__no-data-row {
  text-align: center;
}