// 
// Datatables.scss
// 

.table-bordered {
  border: $table-border-width solid $table-border-color;
}

// gridjs-table

.gridjs-container{
  color: $table-color;
}

.gridjs-wrapper{
  box-shadow: none;
  border: 1px solid $table-border-color;

  &::-webkit-scrollbar {
    -webkit-appearance: none;
}

  &::-webkit-scrollbar:vertical {
      width: 12px;
  }

  &::-webkit-scrollbar:horizontal {
      height: 12px;
  }

  &::-webkit-scrollbar-thumb {
      background-color: rgba($dark, .075);
      border-radius: 10px;
      border: 2px solid $card-bg;
  }

  &::-webkit-scrollbar-track {
      border-radius: 10px;  
      background-color: $card-bg; 
  }
}

.gridjs-table{
  width: 100%;
}

th.gridjs-th, 
td.gridjs-td{
  border: 1px solid $table-border-color;
  padding: .75rem .75rem;
  background-color: var(--#{$variable-prefix}dropdown-bg);
}

th{
  &.gridjs-th{
    border-top: 0;
    color: $table-color;
    background-color: $table-head-bg;

  }

  &.gridjs-th-sort{
    &:focus, &:hover{
      background-color: $table-head-bg;
    }
  }
}

.gridjs-footer{
  box-shadow: none;
  border: 1px solid $table-border-color;
  border-top: 0;
  background-color: var(--#{$variable-prefix}table-head-bg);
}

.gridjs-pagination{
  color: $pagination-color;

  .gridjs-pages button{
    border: none !important;
    border-radius: 30px!important;
    margin: 0 5px;
    border: none;
    min-width: 32px;
    height: 32px;
    padding: 0;
    text-align: center;
    line-height: 32px;
    background-color: transparent;
    color: var(--#{$variable-prefix}body-color);

    

    &:disabled, 
    &:hover:disabled, 
    &[disabled]{
      color: $pagination-disabled-color;
      background-color: transparent;
    }

    &:hover{
      background-color: $pagination-hover-bg;
      color: $pagination-hover-color;
    }

    &:focus{
      box-shadow: none;
    }

    &:last-child, &:first-child{
      &:hover{
        background-color: transparent;
      }
    }
    &.gridjs-currentPage{
      background-color: $pagination-active-bg;
      color: $pagination-active-color;
      border-color: $pagination-active-border-color;
    }
  }
}

input.gridjs-input{
  border-color: $input-border-color;
  background-color: $input-bg;
  color: $input-color;
  &:focus{
    box-shadow: none;
    border-color: $input-focus-border-color;
    background-color: $input-focus-bg;
  }
}