@import "mixins";
@import "colors";
@import "assets";

@mixin cygnus-reach-datatable {
  datatable-scroller {
    display: inherit !important;
  }

  datatable-header {
    background-color: var(--surface-brandPrimary);
    color: var(--text-onFill);
    height: auto !important;
    padding: var(--spacing-sm) 0;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  }

  datatable-row-wrapper {
    margin: 10px 0;

    .datatable-body-row {
      .datatable-row-center {
        padding: 0;
        padding-left: var(--spacing-xs);
        border: var(--spacing-micro) solid transparent;
        border-bottom: var(--spacing-micro) solid var(--border-primary);
      }

      &.active {
        .datatable-row-center {
          padding-left: 0;
          // @include selected-row;
        }
      }
    }
  }

  .ngx-datatable.single-selection {
    .datatable-body-row {
      .datatable-row-center {
        cursor: pointer;
        transition: 0.3s ease;
        background-color: var(--color-neutral-transparent);

        &:hover {
          background-color: var(--surface-neutralLight);
        }
      }

      // &.active {
      //   .datatable-row-center {
      //     &:hover {
      //       @include highlighted-selected;
      //     }
      //   }
      // }
    }
  }

  .ngx-datatable .datatable-body-cell {
    padding: 20px 10px;

    .custom-control {
      position: initial;
    }
  }

  .ngx-datatable .datatable-header-cell {
    padding: 0 10px;
  }

  .ngx-datatable .datatable-body-cell,
  .ngx-datatable .datatable-header-cell {
    vertical-align: middle;

    &:first-child {
      padding-left: 2%;
    }

    &:last-child {
      padding-right: 2%;
    }
  }

  .ngx-datatable .datatable-body .datatable-body-row > div {
    display: flex;
    align-items: center;
  }

  // TODO: This asset input system is still relatively inflexible
  .ngx-datatable .datatable-header-cell.sortable {
    .sort-btn {
      padding: 0 0 1px 5px;
      display: inline-block;
      width: 14px;
      height: 14px;
      background: transparent $path-sort-unselected 0 0 / 14px 14px no-repeat;
      margin-left: 20px;

      &.datatable-icon-up {
        background-image: $path-sort-asc;
      }

      &.datatable-icon-down {
        background-image: $path-sort-asc;
        transform: rotateX(180deg);
      }
    }
  }

  .ngx-datatable .datatable-footer .datatable-footer-inner {
    display: block !important;
    text-align: center;
  }

  .ngx-datatable .empty-row {
    margin: 10px 0;
    padding: 20px 0;
    text-align: center;
  }

  label.datatable-checkbox {
    margin-bottom: 0;
  }
}