@use './ghost' as ghost;
@use './rows' as rows;

$datatable-disable-row-text-color: #83888e !default;

$datatable-ghost-cell-container-background: #fff !default;

$datatable-ghost-cell-strip-background: #dee2e5 !default;
$datatable-ghost-cell-strip-background-image: linear-gradient(
  to right,
  $datatable-ghost-cell-strip-background 0%,
  $datatable-ghost-cell-strip-background 10%,
  #fff,
  transparent
) !default;
$datatable-ghost-cell-strip-radius: 0 !default;
$datatable-ghost-cell-animation-duration: 10s;

.ngx-datatable.bootstrap {
  @include ghost.ghost-cell-styles(
    $datatable-ghost-cell-container-background,
    $datatable-ghost-cell-strip-background,
    $datatable-ghost-cell-strip-background-image,
    $datatable-ghost-cell-strip-radius,
    $datatable-ghost-cell-animation-duration
  );

  @include rows.row-disabled-styles($datatable-disable-row-text-color);

  box-shadow: none;
  font-size: 13px;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .datatable-header {
    block-size: unset !important; // stylelint-disable-line declaration-no-important

    .datatable-header-cell {
      flex-shrink: 0;
      vertical-align: bottom;
      padding: 0.75rem;
      border-block-end: 1px solid #d1d4d7;

      .datatable-header-cell-label {
        line-height: 24px;
      }
    }
  }

  .datatable-body {
    .datatable-body-row {
      vertical-align: top;
      border-block-start: 1px solid #d1d4d7;

      &.datatable-row-even {
        background-color: rgba(0, 0, 0, 0.05);
      }

      &.active {
        background-color: #1483ff;
        color: #fff;
      }

      .datatable-body-cell {
        flex-shrink: 0;
        padding: 0.75rem;
        text-align: start;
        vertical-align: top;
      }
    }

    .empty-row {
      $alert-padding-y: 0.75rem !default;
      $alert-padding-x: 1.25rem !default;
      position: relative;
      padding-block: $alert-padding-y;
      padding-inline: $alert-padding-x;
      margin-block-end: 0;
    }

    .custom-loading-indicator-wrapper {
      position: sticky;
      inset-block-start: 0;
      block-size: 0;
      z-index: 999;

      .custom-loading-content {
        inline-size: 100%;
        background-color: #fff;
      }
    }
  }

  .datatable-footer {
    background: #424242;
    color: #ededed;
    margin-block-start: -1px;

    .page-count {
      line-height: 50px;
      block-size: 50px;
      padding-block: 0;
      padding-inline: 1.2rem;
    }

    .datatable-pager {
      margin-block: 0;
      margin-inline: 10px;
      vertical-align: top;

      ul {
        li {
          margin-block: 10px;
          margin-inline: 0;
        }
      }

      .page-button {
        block-size: 22px;
        min-inline-size: 24px;
        line-height: 22px;
        padding: 0;
        border-radius: 3px;
        margin-block: 0;
        margin-inline: 3px;
        text-align: center;
        vertical-align: top;
        text-decoration: none;
        color: #ededed;
        border: 0;
        background: none;

        &:not(:disabled) {
          &.active,
          &:hover {
            background-color: #545454;
            font-weight: bold;
          }
        }
      }

      .datatable-icon-left,
      .datatable-icon-skip,
      .datatable-icon-right,
      .datatable-icon-prev {
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 27px;
        padding-block: 0;
        padding-inline: 3px;
      }
    }
  }
  // Summary row styles
  .datatable-summary-row {
    .datatable-body-row {
      .datatable-body-cell {
        font-weight: bold;
      }
    }
  }
}