// datatable
umbrella-datatable {
  display: block;
}

.card-datatable {
  padding-bottom: $card-spacer-y;
  padding-top: $card-spacer-y;

  umbrella-datatable {
    .inline-toolbar {
      padding-right: $card-spacer-x;
      padding-left: $card-spacer-x;
    }

    .table-footer {
      padding-right: $card-spacer-x;
      padding-left: $card-spacer-x;
    }
  }
}

.modal-datatable {
  padding-bottom: $modal-inner-padding;
  padding-top: $modal-inner-padding;

  umbrella-datatable {
    .inline-toolbar {
      padding-right: $modal-inner-padding;
      padding-left: $modal-inner-padding;
    }

    .table-footer {
      padding-right: $modal-inner-padding;
      padding-left: $modal-inner-padding;
    }
  }
}

umbrella-datatable {

  table.dataTable {
    width: 100% !important;

    // Change icons view
    thead > tr > th.dt-orderable-asc span.dt-column-order,
    thead > tr > th.dt-orderable-desc span.dt-column-order {
      &::after {
        content: "\F04BA";
        font-family: Material Design Icons;
        font-size: 1rem;
        line-height: 24px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
      }

      &::before {
        content: '';
      }
    }

    thead .dt-orderable-asc.dt-ordering-asc span.dt-column-order::after {
      content: "\F0045";
      opacity: 1;
    }

    thead .dt-orderable-desc.dt-ordering-desc span.dt-column-order::after {
      content: "\F005D";
      opacity: 1;
    }

  }

  // toolbar
  .toolbar.inline-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;

    .toolbar-filters, .toolbar-actions {
      display: flex;
      gap: 0.5rem;
    }
  }

  // footer
  .table-footer {
    margin-top: .5rem !important;

    .dt-info {
      padding-top: .85rem;
    }

    .dt-paging {
      float: right;
    }
  }

  // select plugin
  .select-toolbar {
    padding: .5rem $table-cell-padding-x;
  }

  table.dataTable {
    tbody tr {
      &[data-select=false] .row-select {
        pointer-events: none;

        input {
          display: none;
        }
      }
    }
  }

  // child row plugin
  table.dataTable {
    .toggle-child-row {
      text-decoration: none;

      &::after {
        content: '\F0140';
        font-family: "Material Design Icons";
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        font-size: 1.5em;
      }

      &.collapsed::after {
        content: '\F0142';
      }
    }
  }

  // tree plugin
  table.dataTable {

    // tree plugin

    .tree-node.tree-node-first .tree-move-up {
      pointer-events: none;
      opacity: 0.3;
    }

    .tree-node.tree-node-last .tree-move-down {
      pointer-events: none;
      opacity: 0.3;
    }

    .tree-spacer {
      position: relative;
      display: inline;
    }

    a.tree-spacer {
      text-decoration: none;

      &::after {
        content: "\F0140";
        font-family: "Material Design Icons";
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        font-size: 1.5em;
        top: 0;
        bottom: 0;
        position: absolute;
        right: 0;
      }

      &.collapsed::after {
        content: '\F0142';
      }

    }
  }


  // overwrite bootstrap theme
  table.table.dataTable > tbody > tr > * {
    box-shadow: none !important;
  }

  table.table.dataTable > tbody > tr.selected > * {
    color: $table-color;
  }

  table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    background-color: $table-striped-bg;
  }
}

