@import "datatables.net-bs/css/dataTables.bootstrap";
@import "datatables.net-responsive-bs/css/responsive.bootstrap";
 
.table {
  background-color: $color-white;
}

.table > thead > tr > th {
  border-bottom: none;
  line-height: 32px;
  font-weight: 500;
  color: $color-gray-15;
}

.table > tbody > tr > td {
  line-height: 31px; //31px + 1px border = 32px
}

.embla-table-wrapper {

  table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    tbody tr.selected{
      background-color: $color-gray-95;
    }
  }
}


.dataTables_wrapper h3.datatables-title {
  margin-top: 6px;
  margin-bottom: 0;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  right: initial;
  display: inline-block;
  margin-left: 8px;
}

div.dataTables_wrapper div.dataTables_paginate {
  text-align: center;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 0;
}

.embla-pagination-wrapper {
  background-color: $color-white;
  border-top: $default-border;

  padding-top: $padding-m;
  padding-bottom: $padding-m;



  @media only screen and (min-width: 768px) {

    position: relative;

    .dataTables_length{
      position: absolute;
      margin-left: $padding-m;
      top: $padding-m;
    }  
  }
  @media only screen and (max-width: 768px) {
    .dataTables_length{
      margin-bottom: $padding-m;
    }

    > div:not(:first-child) {
      margin-top: $padding-m;
    }

    > div:last-child {
      margin-bottom: 0;
    }
  }
  .dataTables_paginate.paging_simple_numbers{
    line-height: 1;
  }

  .pagination {

    > li.paginate_button {

      > a {
        border-radius: 0;
      }

      &.previous{
        > a {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }
      }

      &.next{
        > a {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }
      }

      &.previous, &.next {

        > a {
          padding: 3px;

          height: 32px;
          width: 32px;

          > svg.table-pagination-icon {
            margin-bottom: -4px;
          }
        }
      }

      > a,
      > span {
        @include button-size(7px,
                          11px,
                          12px,
                          16px,
                          0);
        letter-spacing: $btn-letter-spacing;
        font-weight: $btn-font-weight;
      
        @include embla-button-variant($btn-default-color, $btn-default-bg, $btn-default-border, $btn-default-color, $btn-hover-default-bg, $btn-hover-default-border, $btn-active-default-color, $btn-active-default-bg, $btn-active-default-border);
      }

      &.active {
        > a,
        > span {
          @include embla-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border, $btn-primary-color, $btn-hover-primary-bg, $btn-hover-primary-border, $btn-active-primary-color, $btn-active-primary-bg, $btn-active-primary-border);
        }
      }

      &.disabled {
        > a,
        > span {
          @include embla-button-variant(rgba($btn-default-color, $disabled-text-opacity), $btn-default-bg, rgba($btn-default-border, $disabled-opacity), rgba($btn-default-color, $disabled-text-opacity), $btn-default-bg, rgba($btn-default-border, $disabled-opacity), rgba($btn-default-color, $disabled-text-opacity), $btn-default-bg, rgba($btn-default-border, $disabled-opacity));
        }
      }

      &:first-child {
        > a,
        > span {
          border-bottom-left-radius: 50%;
          border-top-left-radius: 50%;
        } 
      }

      &:last-child {
        > a,
        > span {
          border-bottom-right-radius: 50%;
          border-top-right-radius: 50%;
        }
      }
    }
  }
}



div.dataTables_wrapper {
  .title-row {
    .title-column {
      h3 {
        margin-top: 24px;
      }

      &.no-search-column {
        h3 {
          margin-top: 0;
        }
      }
    }
  }

  .action-column {
    padding-top: 4px;
  }

  .search-column div.dataTables_filter {

    label {
      font-weight: 500;
    }

    input {
      font-weight: 400;
      display: block;
      margin-left: 0;
    }
  }

  .filter-column {
    label {
      display: block;
    }

    .form-group {
      width: 100%;
    }

    .form-control {
      width: 100%;
    }
  }
}

.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
  border-top: $default-border;
}

.embla-responsive-child-table{
  margin-left: $margin-l;
  margin-top: $margin-s;
  margin-bottom: $margin-m;
  width: calc(100% - 64px); //64 = 2x $margin-l

  .embla-responsive-tr-border{
    border-bottom: $default-border;
  }

  tr td:first-child{
    font-weight: $font-weight-bold;
    padding-right: 16px; 
  }
}


/*Responsive table*/

table.responsive-table {
  white-space: nowrap;
}


table.responsive-state:not(.embla-responsive-child-table) thead tr th
{
  &.details-button{

    &.actions-enabled{
      width: 60px;

      .datatable-select-all-label{
        margin-left: 26px;
      }
    }
  }
}

table.responsive-state:not(.embla-responsive-child-table) tr {

  td.details-button:before{
    content: "";
    background: url($base-icon-path + 'arrow-right.svg') no-repeat center center;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-bottom: -5px;
    margin-right: 6px;
  }



  &.parent td.details-button:before {
    background: url($base-icon-path + 'arrow-down.svg') no-repeat center center;
  }
}


/* table actions*/
.dataTables_wrapper {

  table:not(.embla-responsive-child-table){
    width: 100%;
  }

  .checkbox-header-th{
    width: 28px;
  }

  td:first-child, th:first-child{
    padding-left: $padding-m;
  }

  td:last-child, th:last-child{
    padding-left: $padding-m;
  }

  td.actions-enabled, td.responsive-enabled, th.responsive-enabled, th.actions-enabled{
    outline: 0;
  }

  .panel {
    .panel-body.panel-body-actions-row
    {
      background-color: $color-gray-95;
      height: 0;
      padding: 0;
      transition: all 350ms ease-in;
      overflow: hidden;
      display: flex;
      align-items: center;
      
      &.visible{
        height: 65px;
      }

      .actions-row{
        padding: $padding-m;

        .selected-rows-text {
          display: inline-block;
          font-family: $font-family-headings;
          font-weight: 500;
          color: $text-heading-color-subtle;
          line-height: $line-height-h4;
          font-size: $font-size-h4;
          margin-right: $margin-m;
          margin-left: $margin-s;
        }
      
        .selected-rows-actions {
            display: inline-block;
          }  
        }
    }
  }
}