/*!
 * Created by PhpStorm.
 * Developer: Tariq Ayman ( tariq.ayman94@gmail.com )
 * Date: 1/5/20, 1:52 AM
 * Last Modified: 12/22/19, 10:14 PM
 * Project Name: Wafaq
 * File Name: datatables.scss
 */

/*!
 * Created by PhpStorm.
 * Developer: Tariq Ayman ( tariq.ayman94@gmail.com )
 * Date: 12/22/19, 10:14 PM
 * Last Modified: 11/1/19, 5:58 PM
 *
 * File Name: datatables.scss
 */

@import "~datatables.net-bs4/css/dataTables.bootstrap4";

div.dataTables_wrapper {
  padding: 0;
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
  display: flex;
  align-items: center;
  margin: 0;
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_info {
  justify-content: flex-start;
}

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_paginate,
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: flex-end;
}

div.dataTables_wrapper div.dataTables_length {
  .form-control {
    margin: 0 .5rem;
  }

  [dir=rtl] & label {
    text-align: right;
  }
}

[dir=rtl] div.dataTables_filter {
  text-align: left;

  label {
    text-align: right;
  }

  input {
    margin-right: .5em;
    margin-left: 0;
  }
}

div.dataTables_wrapper div.dataTables_info {
  padding-top: .25rem;
  white-space: normal;
}

[dir=rtl] div.dataTables_wrapper div.dataTables_paginate {
  text-align: right;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  flex-wrap: wrap;
  justify-content: center;
  white-space: normal;

  .page-link {
    outline: 0;
  }
}

div.dataTables_wrapper [class*="col-md-"] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

table.dataTable {
  width: 100% !important;
  border-collapse: collapse !important;

  [dir=rtl] &.table-sm > thead > tr > th {
    padding-left: 1.25rem;
  }

  [dir=rtl] &.table-sm .sorting:before,
  [dir=rtl] &.table-sm .sorting_asc:before,
  [dir=rtl] &.table-sm .sorting_desc:before {
    right: auto;
    left: .85em;
  }
}

[dir=rtl] table.dataTable thead > tr > th,
[dir=rtl] table.dataTable thead > tr > td {
  &.sorting_asc,
  &.sorting_desc,
  &.sorting {
    padding-left: 1.875rem;
  }
}

table.dataTable thead th {
  vertical-align: middle;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  &::before,
  &::after {
    top: 50%;
    margin-top: -.625rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }

  [dir=rtl] &::before {
    right: auto;
    left: 1em;
  }

  [dir=rtl] &::after {
    right: auto;
    left: .5em;
  }
}

[dir=rtl] table.table-bordered.dataTable th,
[dir=rtl] table.table-bordered.dataTable td {
  border-right-width: 0;
  border-left-width: 1px;

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

// DataTable within card
div.card-datatable.dataTable,
div.card-datatable .dataTable {
  border-right: 0;
  border-left: 0;
}

.default-style {
  @import "../../sass/_appwork/include";

  div.dataTables_wrapper div.dataTables_length label,
  div.dataTables_wrapper div.dataTables_filter label {
    margin-bottom: $spacer / 2;
  }

  div.dataTables_wrapper div.dataTables_info {
    color: $text-muted;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
    padding: $pagination-padding-y-sm $pagination-padding-x-sm;
    min-width: calc(#{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + #{$pagination-border-width * 2}"});
    font-size: $font-size-sm;
    line-height: $pagination-line-height;
  }

  @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
      justify-content: center;
    }
  }

  // DataTable within card
  div.card-datatable {
    padding: $card-spacer-x 0;

    [class*="col-md-"] {
      padding-right: $card-spacer-x !important;
      padding-left: $card-spacer-x !important;
    }
  }

  &:not([dir=rtl]) {
    @media (min-width: map-get($grid-breakpoints, md)) {
      div.dataTables_wrapper .row [class*="col-sm-"] {
        &:first-child {
          padding-right: 0 !important;
        }

        &:last-child {
          padding-left: 0 !important;
        }
      }
    }

    div.card-datatable table.dataTable thead th,
    div.card-datatable table.dataTable tbody td,
    div.card-datatable table.dataTable tfoot th {
      &:first-child {
        padding-left: $card-spacer-x;
      }

      &:last-child {
        padding-right: $card-spacer-x;
      }
    }
  }

  &[dir=rtl] {
    table.dataTable.table-sm > thead > tr > th {
      padding-right: $table-cell-padding-sm;
    }

    @media (min-width: map-get($grid-breakpoints, md)) {
      div.dataTables_wrapper .row [class*="col-sm-"] {
        &:first-child {
          padding-left: 0 !important;
        }

        &:last-child {
          padding-right: 0 !important;
        }
      }
    }

    table.dataTable {
      thead th,
      tbody td,
      tfoot th {
        padding-right: $table-cell-padding;
      }

      &.table-sm thead th,
      &.table-sm tbody td,
      &.table-sm tfoot th {
        padding-right: $table-cell-padding-sm;
      }
    }

    div.card-datatable table.dataTable {
      thead th,
      tbody td,
      tfoot th {
        &:first-child {
          padding-right: $card-spacer-x;
        }

        &:last-child {
          padding-left: $card-spacer-x;
        }
      }
    }
  }
}

.material-style {
  @import "../../sass/_appwork/include-material";

  div.dataTables_wrapper div.dataTables_length label,
  div.dataTables_wrapper div.dataTables_filter label {
    margin-bottom: $spacer / 2;
  }

  div.dataTables_wrapper div.dataTables_info {
    color: $text-muted;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
    padding: $pagination-padding-y-sm $pagination-padding-x-sm;
    min-width: calc(#{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + #{$pagination-border-width * 2}"});
    font-size: $font-size-sm;
    line-height: $pagination-line-height;
  }

  @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
      justify-content: center;
    }
  }

  // DataTable within card
  div.card-datatable {
    padding: $card-spacer-x 0;

    [class*="col-md-"] {
      padding-right: $card-spacer-x !important;
      padding-left: $card-spacer-x !important;
    }
  }

  &:not([dir=rtl]) {
    @media (min-width: map-get($grid-breakpoints, md)) {
      div.dataTables_wrapper .row [class*="col-sm-"] {
        &:first-child {
          padding-right: 0 !important;
        }

        &:last-child {
          padding-left: 0 !important;
        }
      }
    }

    div.card-datatable table.dataTable thead th,
    div.card-datatable table.dataTable tbody td,
    div.card-datatable table.dataTable tfoot th {
      &:first-child {
        padding-left: $card-spacer-x;
      }

      &:last-child {
        padding-right: $card-spacer-x;
      }
    }
  }

  &[dir=rtl] {
    table.dataTable.table-sm > thead > tr > th {
      padding-right: $table-cell-padding-sm;
    }

    @media (min-width: map-get($grid-breakpoints, md)) {
      div.dataTables_wrapper .row [class*="col-sm-"] {
        &:first-child {
          padding-left: 0 !important;
        }

        &:last-child {
          padding-right: 0 !important;
        }
      }
    }

    table.dataTable {
      thead th,
      tbody td,
      tfoot th {
        padding-right: $table-cell-padding;
      }

      &.table-sm thead th,
      &.table-sm tbody td,
      &.table-sm tfoot th {
        padding-right: $table-cell-padding-sm;
      }
    }

    div.card-datatable table.dataTable {
      thead th,
      tbody td,
      tfoot th {
        &:first-child {
          padding-right: $card-spacer-x;
        }

        &:last-child {
          padding-left: $card-spacer-x;
        }
      }
    }
  }
}