@import "../../scss/_bootstrap-extended/include";
@import "datatables.net-bs5/css/dataTables.bootstrap5";

/* FIX: broken ui in tablet devices */
@media (hover: none) and (pointer: coarse) {
  table.dataTable {
    display: table;
    overflow-x: auto;
  }
}

/* Card header inside the datatable */
div.dt-container {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dt-buttons {
    inline-size: auto;
    .dt-button-down-arrow {
      display: none;
    }
    @include media-breakpoint-down(md) {
      &.btn-group {
        display: block;
      }
    }
  }

  /* Remove left and right border from datatable with table-bordered class */
  .table.table-bordered.dataTable {
    &.dt-complex-header,
    &.dt-column-search {
      thead tr th {
        border-width: $border-width;
        &:first-child {
          border-inline-start-width: 0;
        }
        &:last-child {
          border-inline-end-width: 0;
        }
      }
    }
    th,
    td {
      &:last-child {
        border-width: 0;
      }
    }
  }


  /* Responsive datatable in desktop screen */
  @media screen and (width >= 1399.98px) {
    table.table-responsive {
      display: table;
    }
  }
  div.dt-search {
    input {
      margin-inline: .5rem 0;
    }
    .form-control::-webkit-search-cancel-button {
      margin-inline-start: .375rem;
    }
  }

  div.dt-layout-end > *:not(:first-child) {
    margin-inline: 0;
  }

  table.dataTable {
    border-collapse: collapse;
    inline-size: 100%;
    margin-block: 0 $spacer;

    /* Checkbox height & width for datatables checkboxes */
    .form-check-input {
      block-size: $form-datatables-check-input-size;
      inline-size: $form-datatables-check-input-size;
    }

    thead {
      > tr {
        > th,
        > td {
          &.dt-orderable-asc,
          &.dt-orderable-desc {
            &:hover {
              outline: none !important;
            }
          }
        }
      }
      th {
        /* Used while complex headers */
        vertical-align: middle;
      }
    }
    .dt-control.dt-orderable-none .dt-column-order::before {
      opacity: 0;
    }
    td.dt-control::before {
      border: 2px solid;
      block-size: .55em;
      border-block-start: 0;
      border-inline-start: 0;
      inline-size: .55em;
      transform: rotate(-45deg);
      :dir(rtl) & {
        transform: rotate(-315deg);
      }
    }
    tr.dt-hasChild td.dt-control::before {
      border-block-start: 0;
      border-inline-start: 0;
      transform: rotate(45deg);
      :dir(rtl) & {
        transform: rotate(-45deg);
      }
    }
    &.table tbody > tr {
      &.selected,
      & > .selected {
        background-color: rgba(var(--#{$prefix}primary-rgb), .08);
        > * {
          box-shadow: none;
          color: var(--#{$prefix}body-color);
        }
        a {
          color: var(--#{$prefix}body-color);
        }
      }
    }
  }

  div.dt-scroll-body {
    border-block-end-width: 0;
  }

  @media screen and (width <= 575.98px) {
    .card-header {
      .dt-action-buttons {
        padding-block-start: 1rem;
      }
    }
    .dtr-bs-modal.modal {
      .modal-body {
        padding: 0;
        .table {
          margin-block-end: 0;
        }
      }
    }
  }

  @media screen and (width <= 767.98px) {
    div.dt-info {
      padding-block: 0 $table-cell-padding-y;
    }
  }

  div.dt-length,
  div.dt-search {
    margin-block: $spacer * 1.5;
  }

  div.dt-length select {
    margin-inline: .5rem;
  }

  /* common style for light / dark */
  div.dt-paging ul.pagination .page-link {
    padding: $pagination-padding-y;
    font-size: $font-size-base;
    line-height: $pagination-line-height;
    @include border-radius($border-radius);
  }

  @media screen and (width <= 575.98px) {
    div.dt-paging ul.pagination .page-link {
      font-size: $font-size-sm;
      min-block-size:
        calc(
          #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)"}
        );
      min-inline-size:
        calc(
          #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)"}
        );
      padding-block: $pagination-padding-y-sm - .1055rem;
      padding-inline: $pagination-padding-x-sm - .1055rem;
    }
    div.dt-paging ul.pagination {
      .page-item {
        .next,
        .previous,
        .first,
        .last {
          &.page-link {
            padding: calc($pagination-padding-y-sm - .1055rem);
          }
        }
      }
    }
  }
  div.dt-info .select-info .select-item {
    margin-inline: .5rem;
  }
}

/* DataTable within card */
div.card-datatable {
  padding-block-end: $card-spacer-x-sm;
  div.dt-info {
    color: var(--#{$prefix}secondary-color);
  }
}

.table-bordered > :not(caption) > * > * {
  border-width: 0;
}

/* overrides styles of library for rtl */
table.dataTable {
  &,
  thead,
  tfoot {
    th,
    td {
      &,
      &.dt-type-numeric,
      &.dt-type-date {
        text-align: start;
      }
      &:first-child{
        padding-inline: $card-spacer-x;
      }
    }
    th:last-child{
      padding-inline-end: $card-spacer-x-sm;
    }
  }
  thead {
    .dt-orderable-asc.dt-orderable-desc,
    .dt-ordering-desc,
    .dt-ordering-asc {
      .dt-column-order {
        inset-inline: auto 1em;
        &::before,
        &::after {
          background-color: var(--#{$prefix}heading-color);
          block-size: 1.125rem;
          content: "";
          inline-size: 1.125rem;
          mask-repeat: no-repeat;
          mask-size: 100% 100%;
          visibility: hidden;
        }

        &::before {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m6.293 13.293l1.414 1.414L12 10.414l4.293 4.293l1.414-1.414L12 7.586z'/%3E%3C/svg%3E");
        }
        &::after {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'/%3E%3C/svg%3E");
        }
      }
      &:hover {
        .dt-column-order {
          &::before,
          &::after {
            visibility: visible;
          }
        }
      }
    }
  }
}

/* text align styles in modal */
.modal.dtr-bs-modal .text-xxl-center {
  text-align: start !important;
}

/* Dark theme */

@if $enable-dark-mode {
  @include color-mode(dark) {
    div.dt-container table.dataTable tr.dt-hasChild td.dt-control::before {
      border-color: rgba(var(--#{$prefix}white-rgb), .5);
    }
  }
}