diff --git a/package.json b/package.json
index 94e59463..1bb959ab 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
     "vite": "^2.6.13",
-    "vue": "^3.2.20",
+    "vue": "^3.5.13",
     "vue-jest": "^5.0.0-0",
     "vuepress": "^2.0.0-rc.15",
     "webpack-node-externals": "^3.0.0"
diff --git a/src/components/VgtGlobalSearch.vue b/src/components/VgtGlobalSearch.vue
index 818a044f..4d793ca7 100644
--- a/src/components/VgtGlobalSearch.vue
+++ b/src/components/VgtGlobalSearch.vue
@@ -1,17 +1,17 @@
 <template>
 <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
-  <div class="vgt-global-search__input vgt-pull-left">
+  <div class="vgt-global-search__input vgt-pull-start">
     <form @submit.prevent v-if="searchEnabled" role="search">
       <label :for="id">
         <span aria-hidden="true" class="input__icon">
-          <div class="magnifying-glass"></div>
+        <div class="magnifying-glass"></div>
         </span>
         <span class="sr-only">Search</span>
       </label>
     <input
       :id="id"
       type="text"
-      class="vgt-input vgt-pull-left"
+      class="vgt-input vgt-pull-start"
       :placeholder="globalSearchPlaceholder"
       :value="value"
       @input="updateValue($event.target.value)"
diff --git a/src/components/VgtHeaderRow.vue b/src/components/VgtHeaderRow.vue
index af5c6bf7..c9b6d2ce 100644
--- a/src/components/VgtHeaderRow.vue
+++ b/src/components/VgtHeaderRow.vue
@@ -55,24 +55,24 @@
   >
     <th
       v-if="headerRow.mode !== 'span' && !column.hidden"
-      class="vgt-row-header"
-      :class="getClasses(i, 'td')"
+    class="vgt-row-header"
+    :class="getClasses(i, 'td')"
       @click="columnCollapsable(i) ? $emit('vgtExpand', !headerRow.vgtIsExpanded) : () => {}"
     >
-      <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
-      <slot
+    <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
+    <slot
         name="table-header-row"
-        :row="headerRow"
-        :column="column"
-        :formattedRow="formattedRow(headerRow, true)"
+      :row="headerRow"
+      :column="column"
+      :formattedRow="formattedRow(headerRow, true)"
       >
-        <span v-if="!column.html">
-          {{ collectFormatted(headerRow, column, true) }}
-        </span>
-        <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)">
-        </span>
-      </slot>
-    </th>
+      <span v-if="!column.html">
+        {{ collectFormatted(headerRow, column, true) }}
+      </span>
+      <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)">
+      </span>
+    </slot>
+  </th>
   </template>
 </tr>
 </template>
diff --git a/src/components/pagination/VgtPagination.vue b/src/components/pagination/VgtPagination.vue
index 03847d45..d141b809 100644
--- a/src/components/pagination/VgtPagination.vue
+++ b/src/components/pagination/VgtPagination.vue
@@ -32,13 +32,28 @@
         :page-text="pageText"
         :info-fn="infoFn"
         :mode="mode" />
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !firstIsPossible }"
+        @click.prevent.stop="firstPage"
+      >
+        <span
+          aria-hidden="true"
+          class="chevron start"
+        ></span>
+        <span>{{ firstText }}</span>
+      </button>
+
       <button
         type="button"
         aria-controls="vgt-table"
         class="footer__navigation__page-btn"
         :class="{ disabled: !prevIsPossible }"
         @click.prevent.stop="previousPage">
-        <span aria-hidden="true" class="chevron" v-bind:class="{ 'left': !rtl, 'right': rtl }"></span>
+        <span aria-hidden="true" class="chevron start"></span>
         <span>{{prevText}}</span>
       </button>
 
@@ -49,7 +64,22 @@
         :class="{ disabled: !nextIsPossible }"
         @click.prevent.stop="nextPage">
         <span>{{nextText}}</span>
-        <span aria-hidden="true" class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span>
+        <span aria-hidden="true" class="chevron end"></span>
+      </button>
+
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !lastIsPossible }"
+        @click.prevent.stop="lastPage"
+      >
+        <span>{{ lastText }}</span>
+        <span
+          aria-hidden="true"
+          class="chevron end"
+        ></span>
       </button>
     </div>
   </div>
@@ -73,8 +103,11 @@ export default {
     customRowsPerPageDropdown: { default() { return []; } },
     paginateDropdownAllowAll: { default: true },
     mode: { default: PAGINATION_MODES.Records },
+    jumpFirstOrLast: { default: false },
 
     // text options
+    firstText: { default: "First" },
+    lastText: { default: "Last" },
     nextText: { default: 'Next' },
     prevText: { default: 'Prev' },
     rowsPerPageText: { default: 'Rows per page:' },
@@ -104,8 +137,8 @@ export default {
 
     customRowsPerPageDropdown: {
       handler() {
-        this.handlePerPage();
-      },
+      this.handlePerPage();
+    },
       deep: true,
     },
 
@@ -121,12 +154,26 @@ export default {
   computed: {
     // Number of pages
     pagesCount() {
+      // if the setting is set to 'all'
+      if(this.currentPerPage === -1) {
+        return 1;
+      }
       const quotient = Math.floor(this.total / this.currentPerPage);
       const remainder = this.total % this.currentPerPage;
 
       return remainder === 0 ? quotient : quotient + 1;
     },
 
+    // Can go to first page
+    firstIsPossible() {
+      return this.currentPage > 1;
+    },
+
+    // Can go to last page
+    lastIsPossible() {
+      return this.currentPage < Math.ceil(this.total / this.currentPerPage);
+    },
+
     // Can go to next page
     nextIsPossible() {
       return this.currentPage < this.pagesCount;
@@ -151,6 +198,24 @@ export default {
       }
     },
 
+    // Go to first page
+    firstPage() {
+      if (this.firstIsPossible) {
+        this.currentPage = 1;
+        this.prevPage = 0;
+        this.pageChanged();
+      }
+    },
+
+    // Go to last page
+    lastPage() {
+      if (this.lastIsPossible) {
+        this.currentPage = this.pagesCount;
+        this.prev = this.currentPage - 1;
+        this.pageChanged();
+      }
+    },
+
     // Go to next page
     nextPage() {
       if (this.nextIsPossible) {
diff --git a/src/components/pagination/VgtPaginationPageInfo.vue b/src/components/pagination/VgtPaginationPageInfo.vue
index 92e2b260..e525bf7c 100644
--- a/src/components/pagination/VgtPaginationPageInfo.vue
+++ b/src/components/pagination/VgtPaginationPageInfo.vue
@@ -70,6 +70,10 @@ export default {
       return ((this.currentPage - 1) * this.currentPerPage) + 1;
     },
     lastRecordOnPage() {
+      // if the setting is set to 'all'
+      if(this.currentPerPage === -1) {
+        return this.totalRecords;
+      }
       return Math.min(this.totalRecords, this.currentPage * this.currentPerPage);
     },
     recordInfo() {
@@ -93,7 +97,7 @@ export default {
         lastRecordOnPage: last,
         totalRecords: this.totalRecords,
         currentPage: this.currentPage,
-        totalPages: this.lastPage,
+        totalPage: this.lastPage,
       };
     },
   },
diff --git a/src/components/types/date.js b/src/components/types/date.js
index 26661b69..be3d7e2e 100644
--- a/src/components/types/date.js
+++ b/src/components/types/date.js
@@ -5,23 +5,10 @@ const date = Object.assign({}, def);
 
 date.isRight = true;
 
-/**
- * Compare the two dates and return 1 if the first date is after the second, -1 if the first date is before the second or 0 if dates are equal.
- * @param {*} x Date 1
- * @param {*} y Date 2
- * @param {Object} column Additional parameters (e.g. dateInputFormat, dateOutputFormat)
- * @returns 
- */
 date.compare = function (x, y, column) {
   function cook(d) {
     if (column && column.dateInputFormat) {
       return parse(`${d}`, `${column.dateInputFormat}`, new Date());
-    } else if (typeof d === 'string') {
-      try {
-        return Date.parse(d);
-      } catch(err) {
-        return d;
-      }
     }
     return d;
   }
diff --git a/src/styles/_bordered.scss b/src/styles/_bordered.scss
index dee11b8a..e788f060 100644
--- a/src/styles/_bordered.scss
+++ b/src/styles/_bordered.scss
@@ -1,8 +1,10 @@
+@use "variables";
+
 .vgt-table{
   &.bordered td, &.bordered th {
-      border: 1px solid $border-color;
+      border: 1px solid variables.$border-color;
   }
   &.bordered th.vgt-row-header{
-    border-bottom: 3px solid $border-color;
+    border-bottom: 3px solid variables.$border-color;
   }
 }
\ No newline at end of file
diff --git a/src/styles/_compact.scss b/src/styles/_compact.scss
index ed582611..1accc5a2 100644
--- a/src/styles/_compact.scss
+++ b/src/styles/_compact.scss
@@ -23,7 +23,7 @@
       &:before {
         content: attr(data-label);
         position: relative;
-        float: left;
+        float: inline-start;
         left: 0;
         width: 40%;
         padding-left: 10px;
diff --git a/src/styles/_control-bar.scss b/src/styles/_control-bar.scss
index 67a0bd0f..4da401d4 100644
--- a/src/styles/_control-bar.scss
+++ b/src/styles/_control-bar.scss
@@ -1,11 +1,14 @@
+@use "variables";
+@use 'sass:color';
+
 .vgt-global-search{
   padding: 5px 0px;
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
-  border:  1px solid $border-color;
+  border:  1px solid variables.$border-color;
   border-bottom: 0px;
-  background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+  background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   form {
     display: flex;
     label {
@@ -56,13 +59,13 @@
 }
 
 .vgt-selection-info-row{
-  background: $notify-bg-color;
+  background: variables.$notify-bg-color;
   padding: 5px 16px;
   font-size: 13px;
-  border-top:  1px solid $border-color;
-  border-left:  1px solid $border-color;
-  border-right:  1px solid $border-color;
-  color: lighten($notify-fg-color, 10%);
+  border-top:  1px solid variables.$border-color;
+  border-left:  1px solid variables.$border-color;
+  border-right:  1px solid variables.$border-color;
+  color:  color.adjust(variables.$notify-fg-color, $lightness: 10%);
   font-weight: bold;
   a{
     font-weight: bold;
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index f7269daa..47d148cd 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 
 .vgt-input, .vgt-select{
   width: 100%;
@@ -7,20 +9,20 @@
   font-size: 14px;
   font-weight: normal;
   padding: 6px 12px;
-  color: $text-color;
+  color: variables.$text-color;
   border-radius: 4px;
   box-sizing: border-box;
   background-image: none;
   background-color: #fff;
-  border: 1px solid $input-border-color;
+  border: 1px solid variables.$input-border-color;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: $text-color;
+    color: variables.$text-color;
     opacity: 0.3; /* Firefox */
   }
   &:focus{
     outline: none;
-    border-color: $link-color;
+    border-color: variables.$link-color;
   }
 }
 
diff --git a/src/styles/_loading.scss b/src/styles/_loading.scss
index 0ba765a4..56c7e4c9 100644
--- a/src/styles/_loading.scss
+++ b/src/styles/_loading.scss
@@ -1,11 +1,14 @@
+@use "variables";
+@use 'sass:color';
+
 .vgt-loading{
   position: absolute;
   width: 100%;
   z-index: 10;
   margin-top: 117px;
   &__content{
-    background-color: lighten($link-color, 25%);
-    color: $link-color;
+    background-color:  color.adjust(variables.$link-color, $lightness: 25%) ;
+    color: variables.$link-color;
     padding: 7px 30px;
     border-radius: 3px;
   }
diff --git a/src/styles/_rtl.scss b/src/styles/_rtl.scss
index 77cac38b..a68e39ad 100644
--- a/src/styles/_rtl.scss
+++ b/src/styles/_rtl.scss
@@ -2,20 +2,12 @@
   direction: rtl;
 
   .vgt-table{
-    thead th, &.condensed thead th {
-      padding-left:  1.5em;
-      padding-right:  .75em;
-    }
     th.sorting:after,
     th.sorting-asc:after{
       margin-right:  5px;
       margin-left:  0px;
     }
 
-    th.sortable:after, 
-    th.sortable:before {
-      right: inherit;
-      left: 6px;
-    }
+   
   }
 }
diff --git a/src/styles/_table-footer.scss b/src/styles/_table-footer.scss
index 1162cc67..a017e5ba 100644
--- a/src/styles/_table-footer.scss
+++ b/src/styles/_table-footer.scss
@@ -1,17 +1,19 @@
+@use "variables";
+
 $footer-font-size: 1.1rem;
 
 .vgt-wrap__actions-footer{
-  border: 1px solid $border-color;
+  border: 1px solid variables.$border-color;
 }
 .vgt-wrap__footer{
-  color: $text-color;
+  color: variables.$text-color;
   font-size:  $footer-font-size;
   padding:  1em;
-  border: 1px solid $border-color;
-  background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+  border: 1px solid variables.$border-color;
+  background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   .footer__row-count{
     position: relative;
-    padding-right: 3px;
+    padding-inline-end: 3px;
     &__label, &__select{
       display: inline-block;
       vertical-align: middle;
@@ -27,20 +29,20 @@ $footer-font-size: 1.1rem;
       border: 0;
       border-radius: 0;
       height: auto;
-      margin-left: 8px;
-      color:  $text-color;
+      margin-inline-start: 8px;
+      color:  variables.$text-color;
       font-weight: bold;
       -webkit-appearance: none; 
       -moz-appearance: none;
       appearance: none;
-      padding-right: 15px;
-      padding-left: 5px;
+      padding-inline-end: 15px;
+      padding-inline-start: 5px;
       &::-ms-expand{
         display: none;
       }
       &:focus{
         outline: none;
-        border-color: $link-color;
+        border-color: variables.$link-color;
       }
     }
     &::after{
@@ -49,12 +51,11 @@ $footer-font-size: 1.1rem;
       position: absolute;
       height: 0px;
       width: 0px;
-      right: 6px;
+      inset-inline-end: 6px;     
       top: 50%;
       margin-top: -1px;
-      border-top:  6px solid $text-color;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
+      border-top:  6px solid variables.$text-color;
+      border-inline: 6px solid transparent;
       border-bottom: none;
       pointer-events: none
     }
@@ -67,7 +68,7 @@ $footer-font-size: 1.1rem;
     &__page-btn, &__info, &__page-info{
       display: inline-block;
       vertical-align: middle;
-      color: $secondary-text-color;
+      color: variables.$secondary-text-color;
     }
     &__page-btn{
       -webkit-appearance: none;
@@ -76,7 +77,7 @@ $footer-font-size: 1.1rem;
       background: transparent;
       border: none;
       text-decoration: none;
-      color: $text-color;
+      color: variables.$text-color;
       font-weight: bold;
       white-space:nowrap;
       vertical-align: middle;
@@ -87,11 +88,11 @@ $footer-font-size: 1.1rem;
       &.disabled:hover {
         opacity: 0.5;
         cursor: not-allowed;
-        .chevron.left:after{
-          border-right-color: $text-color;
+        .chevron.start:after{
+          border-inline-start-color: variables.$text-color;
         }
-        .chevron.right:after{
-          border-left-color: $text-color;
+        .chevron.end:after{
+          border-inline-end-color: variables.$text-color;
         }
       }
       span{
@@ -111,26 +112,20 @@ $footer-font-size: 1.1rem;
           content:  '';
           position:  absolute;
           display:  block;
-          left:  50%;
+          inset-inline-start:  50%;
           top:  50%;
           margin-top:  -6px;
           border-top: 6px solid transparent;
           border-bottom: 6px solid transparent;
+          margin-inline-start:  -3px;
         }
-        &.left::after{
-          border-right:  6px solid $link-color;
-          margin-left:  -3px;
-        }
-      
-        &.right::after{
-          border-left:  6px solid $link-color;
-          margin-left:  -3px;
-        }
+        &.start::after {border-inline-end:  6px solid variables.$link-color;}
+        &.end::after {border-inline-start:  6px solid variables.$link-color;}
       }
     }
     &__info, &__page-info{
       display: inline-block;
-      margin:  0px 16px;
+      margin-inline:   16px;
     }
     &__page-info{
       span{
@@ -142,7 +137,7 @@ $footer-font-size: 1.1rem;
         text-align: center;
         vertical-align: middle;
         display: inline-block;
-        margin: 0px 10px;
+        margin-inline: 10px;
         font-weight: bold;
       }
     }
diff --git a/src/styles/_table-th.scss b/src/styles/_table-th.scss
index 3ed9814f..62f476c2 100644
--- a/src/styles/_table-th.scss
+++ b/src/styles/_table-th.scss
@@ -1,10 +1,13 @@
+@use "variables";
+@use 'sass:color';
+
 $sort-chevron-width: 5px;
 
 .vgt-table{
   & th{
-    padding: .75em 1.5em .75em .75em;
+    padding: .75em .75em .75em .75em;
     vertical-align: middle;
-    position: relative;
+    position: relative; 
     &.sortable{
       button {
         -webkit-appearance: none;
@@ -14,8 +17,9 @@ $sort-chevron-width: 5px;
         border: none;
         position: absolute;
         top: 0;
-        left: 0;
-        width: 100%;
+        inset-inline-end: 0;
+        cursor:pointer;
+        width: 1rem;
         height: 100%;
         &:focus{
           outline: none;
@@ -25,45 +29,45 @@ $sort-chevron-width: 5px;
           position: absolute;
           height: 0px;
           width: 0px;
-          right: 6px;
+          inset-inline-end: 6px;
           top: 50%;
           margin-top: -7px;
-          border-left: $sort-chevron-width solid transparent;
-          border-right: $sort-chevron-width solid transparent;
-          border-bottom: $sort-chevron-width solid $chevron-color;
+          border-inline: $sort-chevron-width solid transparent;
+          border-bottom: $sort-chevron-width solid variables.$chevron-color;
         }
         &:before{
           content: '';
           position: absolute;
           height: 0px;
           width: 0px;
-          right: 6px;
+          inset-inline-end: 6px;
           top: 50%;
           margin-bottom: -7px;
-          border-left: $sort-chevron-width solid transparent;
-          border-right: $sort-chevron-width solid transparent;
-          border-top: $sort-chevron-width solid $chevron-color;
+          border-inline: $sort-chevron-width solid transparent;
+          border-top: $sort-chevron-width solid variables.$chevron-color;
         }
       }
     }
+
+    .drag {position:absolute;top:0; bottom:0; background-color: variables.$border-color; user-select: none; inset-inline-end: 0; width: 0.4rem; cursor: e-resize;}
   }
   & th.line-numbers, & th.vgt-checkbox-col {
     padding: 0 .75em 0 .75em;
-    color: $text-color;
-    border-right: 1px solid $border-color;
+    color: variables.$text-color;
+    border-inline-end: 1px solid variables.$border-color;
     word-wrap: break-word;
     width: 25px;
     text-align: center;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   }
   & th.filter-th {
     padding: .75em .75em .75em .75em;
   }
 
   th.vgt-row-header{
-    border-bottom: 2px solid $border-color;
-    border-top: 2px solid $border-color;
-    background-color: lighten($border-color, 10%);
+    border-bottom: 2px solid variables.$border-color;
+    border-top: 2px solid variables.$border-color;
+    background-color:  color.adjust(variables.$border-color, $lightness: 10%);
     .triangle {
       width: 24px;
       height: 24px;
@@ -74,13 +78,13 @@ $sort-chevron-width: 5px;
         content: '';
         position: absolute;
         display: block;
-        left: 50%;
+        inset-inline-start: 50%;
         top: 50%;
         margin-top: -6px;
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-left: 6px solid $text-color;
-        margin-left: -3px;
+        border-inline-end: 6px solid variables.$text-color;
+        margin-inline-end: -3px;
         transition: 0.3s ease transform;
       }
       &.expand:after {
@@ -90,22 +94,22 @@ $sort-chevron-width: 5px;
   }
 
   thead th{
-    color: $text-color;
+    color: variables.$text-color;
     vertical-align: bottom;
-    border-bottom:  1px solid $border-color;
-    padding-right: 1.5em;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    border-bottom:  1px solid variables.$border-color;
+    padding-inline-end: 1.5em;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
     &.vgt-checkbox-col{
       vertical-align: middle;
     }
     &.sorting-asc button {
       &:after{
-        border-bottom: $sort-chevron-width solid $link-color;
+        border-bottom: $sort-chevron-width solid variables.$link-color;
       }
     }
     &.sorting-desc button {
       &:before{
-        border-top: $sort-chevron-width solid $link-color;
+        border-top: $sort-chevron-width solid variables.$link-color;
       }
     }
   }
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index 29c8b71c..f0ac8544 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -1,21 +1,23 @@
+@use "variables";
+
 table.vgt-table{
   font-size: 16px;
   border-collapse: collapse;
-  background-color: $table-bg;
+  background-color: variables.$table-bg;
   width: 100%;
   max-width: 100%;
   table-layout: auto;
-  border: 1px solid $border-color;
+  border: 1px solid variables.$border-color;
   & td {
     padding: .75em .75em .75em .75em;
     vertical-align: top;
-    border-bottom:  1px solid $border-color;
-    color: $text-color;
+    border-bottom:  1px solid variables.$border-color;
+    color: variables.$text-color;
   }
   & tr.clickable {
     cursor: pointer;
     &:hover{
-      background-color: $highlight-color;
+      background-color: variables.$highlight-color;
     }
   }
 }
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
index a641f9cf..77087562 100644
--- a/src/styles/_utils.scss
+++ b/src/styles/_utils.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /* Utility styles
 ************************************************/
 .vgt-right-align{
@@ -26,14 +28,14 @@
   clear: both;
 }
 
-.vgt-responsive {
+.vgt-responsive-old {
   width: 100%;
   overflow-x: auto;
   position: relative;
 }
 
 .vgt-text-disabled{
-  color: $secondary-text-color;
+  color: variables.$secondary-text-color;
 }
 
 .sr-only {
diff --git a/src/styles/_wrap.scss b/src/styles/_wrap.scss
index c284f751..b9bb98f1 100644
--- a/src/styles/_wrap.scss
+++ b/src/styles/_wrap.scss
@@ -1,8 +1,11 @@
-.vgt-wrap{
-  position: relative;
-}
+.vgt-wrap { position: relative;}
+
 .vgt-fixed-header{
   position: absolute;
   z-index: 10;
   overflow-x: auto;
+}
+
+.vgt-responsive  { overflow-x: auto; overflow-y: scroll; display: flex;
+  #vgt-table {flex: 1 1 auto; align-self: baseline}
 }
\ No newline at end of file
diff --git a/src/styles/black-rhino/_overrides.scss b/src/styles/black-rhino/_overrides.scss
index a3f06d40..c3696695 100644
--- a/src/styles/black-rhino/_overrides.scss
+++ b/src/styles/black-rhino/_overrides.scss
@@ -1,18 +1,21 @@
+@use "../variables";
+@use 'sass:color';
+
 $thead-bg-color-1: #4c5c79;
-$thead-bg-color-2: #4e5d7c;
+variables.$thead-bg-color-2: #4e5d7c;
 
-$chevron-color: lighten($thead-bg-color-1, 10%);
+variables.$chevron-color: color.adjust(variables.$thead-bg-color-1, $lightness: 10%);
 
-$text-color: #dae2f0;
+variables.$text-color: #dae2f0;
 $text-color-td: rgb(73, 81, 94);
-$text-shadow-color: lighten(#2C394F, 10%);
+$text-shadow-color:  color.adjust(#2C394F, $lightness: 10%);
 
-$secondary-text-color: rgb(152, 165, 185) ;
-$border-color: #435169;
+variables.$secondary-text-color: rgb(152, 165, 185) ;
+variables.$border-color: #435169;
 $border-color-td: #bbc5d6;
 
-$input-border-color: transparent;
+variables.$input-border-color: transparent;
 $input-bg: #34445f;
 
-$table-bg: #dfe5ee;
-$highlight-color:#fff;
\ No newline at end of file
+variables.$table-bg: #dfe5ee;
+variables.$highlight-color:#fff;
\ No newline at end of file
diff --git a/src/styles/black-rhino/black-rhino.scss b/src/styles/black-rhino/black-rhino.scss
index 1ac440aa..f89e4a02 100644
--- a/src/styles/black-rhino/black-rhino.scss
+++ b/src/styles/black-rhino/black-rhino.scss
@@ -1,49 +1,52 @@
-@import './overrides';
+@use 'sass:color';
+@use 'overrides'; 
+@use "../variables";
+
 // suggested by wifey
 .vgt-table.black-rhino{
-  border: 1px solid $border-color;
-  background-color: $table-bg;
+  border: 1px solid variables.$border-color;
+  background-color: variables.$table-bg;
 
   & tr.clickable {
     &:hover{
-      background-color: $highlight-color;
+      background-color: variables.$highlight-color;
     }
   }
 
   // td
   & td {
-    border-bottom:  1px solid $border-color-td;
-    color: $text-color-td;
+    border-bottom:  1px solid overrides.$border-color-td;
+    color: overrides.$text-color-td;
   }
 
   //th
   & th.line-numbers, & th.vgt-checkbox-col {
-    color: $text-color;
-    border-right: 1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    border-inline-end: 1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   }
   thead th{
-    color: $text-color;
-    text-shadow: 1px 1px $text-shadow-color;
-    border-bottom:  1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    text-shadow: 1px 1px overrides.$text-shadow-color;
+    border-bottom:  1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
     &.sortable {
-      // color: lighten($text-color, 15%);
+      // color: l_ighten($text-color, 15%);
       &:before{
-        border-top-color: $chevron-color;
+        border-top-color: variables.$chevron-color;
       }
       &:after{
-        border-bottom-color: $chevron-color;
+        border-bottom-color: variables.$chevron-color;
       }
       &.sorting-asc{
         color: white;
         &:after{
-          border-bottom-color: $link-color;
+          border-bottom-color: variables.$link-color;
         }
       }
       &.sorting-desc {
         &:before{
-          border-top-color: $link-color;
+          border-top-color: variables.$link-color;
         }
       }
     }
@@ -51,20 +54,20 @@
   
   //bordered
   &.bordered td {
-    border: 1px solid $border-color-td;
+    border: 1px solid overrides.$border-color-td;
   }
 
   &.bordered th {
-    border: 1px solid $border-color;
+    border: 1px solid variables.$border-color;
   }
 
   //input
   .vgt-input, .vgt-select{
-    color: $text-color;
-    background-color: $input-bg;
-    border: 1px solid $input-border-color;
+    color: variables.$text-color;
+    background-color: overrides.$input-bg;
+    border: 1px solid variables.$input-border-color;
     &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-      color: $text-color;
+      color: variables.$text-color;
       opacity: 0.3; /* Firefox */
     }
   }
@@ -72,30 +75,30 @@
 
 .vgt-wrap.black-rhino{
   .vgt-wrap__footer{
-    color: $text-color;
-    border: 1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    border: 1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
     .footer__row-count{
       position: relative;
-      padding-right: 3px;
+      padding-inline-end: 3px;
       &__label{
-        color: $secondary-text-color;
+        color: variables.$secondary-text-color;
       }
       &__select{
-        color:  $text-color-td;
-        background: $input-bg;
+        color:  overrides.$text-color-td;
+        background: overrides.$input-bg;
         border: none;
         -webkit-appearance: none; 
         -moz-appearance: none;
         appearance: none;
-        padding-right: 15px;
-        padding-left: 5px;
+        padding-inline-end: 15px;
+        padding-inline-start : 5px;
         border-radius: 3px;
         &::-ms-expand{
           display: none;
         }
         &:focus{
-          border-color: $link-color;
+          border-color: variables.$link-color;
         }
       }
       &::after{
@@ -104,55 +107,51 @@
         position: absolute;
         height: 0px;
         width: 0px;
-        right: 6px;
+        inset-inline-end: 6px;
         top: 50%;
         margin-top: -1px;
-        border-top:  6px solid $text-color-td;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
+        border-top:  6px solid overrides.$text-color-td;
+        border-inline : 6px solid transparent;
         border-bottom: none;
         pointer-events: none
       }
     }
     .footer__navigation{
       &__page-btn{
-        color: $text-color;
+        color: variables.$text-color;
         &.disabled,
         &.disabled:hover {
-          .chevron.left:after{
-            border-right-color: $text-color;
-          }
-          .chevron.right:after{
-            border-left-color: $text-color;
+          .chevron:after{
+            border-inline-end-color: variables.$text-color;
           }
         }
       }
       &__info, &__page-info{
-        color: $text-color;
+        color: variables.$text-color;
       }
     }
   }
 
   // control bar
   .vgt-global-search{
-    border:  1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    border:  1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   }
   .vgt-global-search__input{
     .input__icon{
       .magnifying-glass{
-        border: 2px solid darken($border-color, 2%);
+        border: 2px solid color.adjust(variables.$border-color, $lightness: -2%);
         &:before{
-          background: darken($border-color, 2%);
+          background: color.adjust(variables.$border-color, $lightness: -2%);
         }
       }
     }
     .vgt-input, .vgt-select{
-      color: $text-color;
-      background-color: darken($thead-bg-color-2, 5%);
-      border: 1px solid $input-border-color;
+      color: variables.$text-color;
+      background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%);
+      border: 1px solid variables.$input-border-color;
       &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: $text-color;
+        color: variables.$text-color;
         opacity: 0.3; /* Firefox */
       }
     }
diff --git a/src/styles/nocturnal/_overrides.scss b/src/styles/nocturnal/_overrides.scss
index 361adb70..050cb1f0 100644
--- a/src/styles/nocturnal/_overrides.scss
+++ b/src/styles/nocturnal/_overrides.scss
@@ -1,11 +1,14 @@
-$thead-bg-color-1: #2C394F;
-$thead-bg-color-2: #2C394F;
-$chevron-color: lighten($thead-bg-color-1, 10%);
+@use "../variables";
 
-$text-color: #C7CED8;
-$secondary-text-color: #8290A7 ;
-$border-color: #435169;
-$input-border-color: $border-color;
+@use 'sass:color';
+variables.$thead-bg-color-1: #2C394F;
+variables.$thead-bg-color-2: #2C394F;
+variables.$chevron-color: color.adjust(variables.$thead-bg-color-1, $lightness: 10%);
 
-$table-bg: #324057;
-$highlight-color: #445168;
\ No newline at end of file
+variables.$text-color: #C7CED8;
+variables.$secondary-text-color: #8290A7 ;
+variables.$border-color: #435169;
+variables.$input-border-color: variables.$border-color;
+
+variables.$table-bg: #324057;
+variables.$highlight-color: #445168;
\ No newline at end of file
diff --git a/src/styles/nocturnal/nocturnal.scss b/src/styles/nocturnal/nocturnal.scss
index 5497b3dd..db41fd76 100644
--- a/src/styles/nocturnal/nocturnal.scss
+++ b/src/styles/nocturnal/nocturnal.scss
@@ -1,49 +1,53 @@
-@import './overrides';
+@use 'sass:color';
+@use 'overrides';
+@use "../variables.scss";
+
+
 // suggested by wifey
 .vgt-table.nocturnal{
-  border: 1px solid $border-color;
-  background-color: $table-bg;
+  border: 1px solid variables.$border-color;
+  background-color: variables.$table-bg;
 
   & tr.clickable {
     &:hover{
-      background-color: $highlight-color;
+      background-color: variables.$highlight-color;
     }
   }
 
   // td
   & td {
-    border-bottom:  1px solid $border-color;
-    color: $text-color;
+    border-bottom:  1px solid variables.$border-color;
+    color: variables.$text-color;
   }
 
   //th
   & th.line-numbers, & th.vgt-checkbox-col {
-    color: $text-color;
-    border-right: 1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    border-right: 1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   }
   thead th{
-    color: $text-color;
-    border-bottom:  1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    border-bottom:  1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
     &.sortable {
-      // color: lighten($text-color, 15%);
+      // color: _$text-color, 15%);
       &:before{
-        border-top-color: $chevron-color;
+        border-top-color: variables.$chevron-color;
       }
       &:after{
-        border-bottom-color: $chevron-color;
+        border-bottom-color: variables.$chevron-color;
       }
       &.sorting-asc{
         color: white;
         &:after{
-          border-bottom-color: $link-color;
+          border-bottom-color: variables.$link-color;
         }
       }
       &.sorting-desc {
         color: white;
         &:before{
-          border-top-color: $link-color;
+          border-top-color: variables.$link-color;
         }
       }
     }
@@ -51,16 +55,16 @@
   
   //bordered
   &.bordered td, &.bordered th {
-      border: 1px solid $border-color;
+      border: 1px solid variables.$border-color;
   }
 
   //input
   .vgt-input, .vgt-select{
-    color: $text-color;
-    background-color: darken($thead-bg-color-2, 5%);
-    border: 1px solid $input-border-color;
+    color: variables.$text-color;
+    background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%);
+    border: 1px solid variables.$input-border-color;
     &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-      color: $text-color;
+      color: variables.$text-color;
       opacity: 0.3; /* Firefox */
     }
   }
@@ -68,17 +72,17 @@
 
 .vgt-wrap.nocturnal{
   .vgt-wrap__footer{
-    color: $text-color;
-    border: 1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    color: variables.$text-color;
+    border: 1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
     .footer__row-count{
       position: relative;
       &__label{
-        color: $secondary-text-color;
+        color: variables.$secondary-text-color;
       }
       &__select{
-        color:  $text-color;
-        background: darken($thead-bg-color-2, 5%);
+        color:  variables.$text-color;
+        background: color.adjust(variables.$thead-bg-color-2, $lightness: -5%);
         border: none;
         -webkit-appearance: none; 
         -moz-appearance: none;
@@ -88,7 +92,7 @@
         border-radius: 3px;
         text-align: center;
         &:focus{
-          border-color: $link-color;
+          border-color: variables.$link-color;
         }
       }
       &::after{
@@ -100,7 +104,7 @@
         right: 6px;
         top: 50%;
         margin-top: -1px;
-        border-top:  6px solid $text-color;
+        border-top:  6px solid variables.$text-color;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
         border-bottom: none;
@@ -109,43 +113,43 @@
     }
     .footer__navigation{
       &__page-btn{
-        color: $text-color;
+        color: variables.$text-color;
         &.disabled,
         &.disabled:hover {
           .chevron.left:after{
-            border-right-color: $text-color;
+            border-right-color: variables.$text-color;
           }
           .chevron.right:after{
-            border-left-color: $text-color;
+            border-left-color: variables.$text-color;
           }
         }
       }
       &__info, &__page-info{
-        color: $secondary-text-color;
+        color: variables.$secondary-text-color;
       }
     }
   }
 
   // control bar
   .vgt-global-search{
-    border:  1px solid $border-color;
-    background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+    border:  1px solid variables.$border-color;
+    background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   }
   .vgt-global-search__input{
     .input__icon{
       .magnifying-glass{
-        border: 2px solid darken($border-color, 2%);
+        border: 2px solid color.adjust(variables.$border-color, $lightness: -2%);
         &:before{
-          background: darken($border-color, 2%);
+          background:  color.adjust(variables.$border-color, $lightness: -2%);
         }
       }
     }
     .vgt-input, .vgt-select{
-      color: $text-color;
-      background-color: darken($thead-bg-color-2, 5%);
-      border: 1px solid $input-border-color;
+      color: variables.$text-color;
+      background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%);
+      border: 1px solid variables.$input-border-color;
       &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: $text-color;
+        color: variables.$text-color;
         opacity: 0.3; /* Firefox */
       }
     }
diff --git a/src/styles/polar-bear/_overrides.scss b/src/styles/polar-bear/_overrides.scss
index 41b4e10c..09eab695 100644
--- a/src/styles/polar-bear/_overrides.scss
+++ b/src/styles/polar-bear/_overrides.scss
@@ -1,21 +1,26 @@
+@use "../black-rhino/overrides";
+@use "../variables";
+@use 'sass:color';
+
+
 $thead-bg-color-1: #E4EBF3;
-$thead-bg-color-2: #E4EBF3;
+variables.$thead-bg-color-2: #E4EBF3;
 $thead-bg-color-3: #f7fafc;
 
-$header-color: darken(#8395aa, 10%);
-$text-color: #394567;
-$link-color: #5e72e4;
+$header-color: color.adjust(#8395aa, $lightness: -10%);
+variables.$text-color: #394567;
+variables.$link-color: #5e72e4;
 $focus-color: #4D96FB;
-$text-color-td: #525f7f;
-$text-shadow-color: lighten(#2C394F, 10%);
+overrides.$text-color-td: #525f7f;
+overrides.$text-shadow-color: color.adjust(#2C394F, $lightness: 10%);
 
-$secondary-text-color: rgb(152, 165, 185) ;
-$border-color: #e3e8ee;
-$border-color-td: #E4EBF3;
+variables.$secondary-text-color: rgb(152, 165, 185) ;
+variables.$border-color: #e3e8ee;
+overrides.$border-color-td: #E4EBF3;
 
-$input-border-color: transparent;
-$input-bg: #34445f;
+variables.$input-border-color: transparent;
+overrides.$input-bg: #34445f;
 
-$table-bg: #FFFFFF;
-$highlight-color:#fff;
+variables.$table-bg: #FFFFFF;
+variables.$highlight-color:#fff;
 $white: #FFFFFF;
\ No newline at end of file
diff --git a/src/styles/polar-bear/polar-bear.scss b/src/styles/polar-bear/polar-bear.scss
index 7d408566..44ec5b0d 100644
--- a/src/styles/polar-bear/polar-bear.scss
+++ b/src/styles/polar-bear/polar-bear.scss
@@ -1,4 +1,8 @@
-@import './overrides';
+@use 'overrides';
+@use 'sass:color';
+@use "../black-rhino/overrides" as overrides2;
+@use "../variables";
+
 // suggested by wifey
 .vgt-inner-wrap{
   border-radius: 0.25rem;
@@ -9,109 +13,108 @@
   border-spacing: 0;
   border-collapse: separate;
   font-size: 1rem;
-  background-color: $white;
-  border: 1px solid $border-color;
+  background-color: overrides.$white;
+  border: 1px solid variables.$border-color;
   border-bottom: none;
   border-radius: 0.25rem;
   // td
   & td {
     padding: 1em .75em 1em .75em;
-    border-bottom:  1px solid $border-color-td;
-    color: $text-color-td;
-    &.vgt-right-align{
-      text-align: right;
-    }
+    border-bottom:  1px solid overrides2.$border-color-td;
+    color: overrides2.$text-color-td;
+    text-align: start;
+  
   }
 
   //th
   & th.line-numbers, & th.vgt-checkbox-col {
-    color: $text-color;
-    border-right: 1px solid $border-color;
-    background: $thead-bg-color-3;
+    color: variables.$text-color;
+    border-inline-end: 1px solid variables.$border-color;
+    background: overrides.$thead-bg-color-3;
   }
   thead th{
-    color: $header-color;
+    color: overrides.$header-color;
     font-weight: 600;
     // text-shadow: 1px 1px $text-shadow-color;
-    border-bottom:  1px solid $border-color;
-    background: $thead-bg-color-3;
+    border-bottom:  1px solid variables.$border-color;
+    background: overrides.$thead-bg-color-3;
     &.sorting-asc, &.sorting-desc {
-      color: $link-color;
+      color: variables.$link-color;
     }
     &.sorting-desc{
       &:before{
-        border-top: 5px solid lighten($link-color, 5%);
+        border-top: 5px color.adjust(variables.$link-color, $lightness: 5%) solid ;
       }
     }
     &.sorting-asc{
       &:after{
-        border-bottom: 5px solid lighten($link-color, 5%);
+        border-bottom: 5px solid  color.adjust(variables.$link-color, $lightness: 5%) ;
       }
     }
 
     .vgt-input, .vgt-select{
       height: 2.75em;
       box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
-      border: 1px solid $border-color-td;
+      border: 1px solid overrides2.$border-color-td;
     }
     
     .vgt-input:focus, .vgt-select:focus {
       outline: 0;
-      border-color: lighten($focus-color, 25%);
+      border-color: color.adjust(overrides.$focus-color, $lightness: 25%);
     }
   }
   thead tr:first-child{
     th:first-child{
-      border-top-left-radius: 0.25rem;
+      border-start-start-radius: 0.25rem;
     }
     th:last-child{
-      border-top-right-radius: 0.25rem;
+      border-start-end-radius: 0.25rem;
     }
   }
   
   //bordered
   &.bordered td {
-    border: 1px solid $border-color;
-    background: $white;
+    border: 1px solid variables.$border-color;
+    background: overrides.$white;
   }
 
   &.bordered th {
     // border: none;
-    border: 1px solid $border-color;
+    border: 1px solid variables.$border-color;
   }
 }
 
 .vgt-wrap.polar-bear{
   .vgt-wrap__footer{
-    color: $text-color;
-    border: 1px solid $border-color;
+    color: variables.$text-color;
+    border: 1px solid variables.$border-color;
     border-bottom: 0px;
     border-top: 0px;
-    background: linear-gradient($thead-bg-color-3, $thead-bg-color-3);
+    background: linear-gradient(overrides.$thead-bg-color-3, overrides.$thead-bg-color-3);
     .footer__row-count{
       position: relative;
-      padding-right: 3px;
+      padding-inline-end: 3px;
       &__label{
-        color: $secondary-text-color;
+        color: variables.$secondary-text-color;
       }
       &__select{
         text-align: center;
-        color:  $text-color-td;
-        background: $table-bg;
+        color:  overrides2.$text-color-td;
+        background: variables.$table-bg;
         border: none;
         -webkit-appearance: none; 
         -moz-appearance: none;
         appearance: none;
         padding: 5px;
-        padding-right: 30px;
+        padding-inline-end: 30px;
         border-radius: 3px;
         box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
-        border: 1px solid $border-color-td;
+        border: 1px solid overrides2.$border-color-td;
         &::-ms-expand{
           display: none;
         }
         &:focus{
-          border-color: $link-color;
+          border-color: variables.$link-color;
         }
       }
       &::after{
@@ -120,58 +123,57 @@
         position: absolute;
         height: 0px;
         width: 0px;
-        right: 15px;
+        inset-inline-end: 15px;
         top: 50%;
         margin-top: -3px;
-        border-top:  6px solid $text-color-td;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
+        border-top:  6px solid overrides2.$text-color-td;
+        border-inline: 6px solid transparent;
         border-bottom: none;
         pointer-events: none
       }
     }
     .footer__navigation{
       &__page-btn{
-        color: $text-color;
+        color: variables.$text-color;
         &.disabled,
         &.disabled:hover {
           .chevron.left:after{
-            border-right-color: $text-color;
+            border-inline-start-color: variables.$text-color;
           }
           .chevron.right:after{
-            border-left-color: $text-color;
+            border-inline-end-color: variables.$text-color;
           }
         }
       }
       &__info, &__page-info{
-        color: $text-color;
+        color: variables.$text-color;
       }
     }
   }
 
   // control bar
   .vgt-global-search{
-    border:  1px solid $border-color;
+    border:  1px solid variables.$border-color;
     border-bottom: 0px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    background: $thead-bg-color-3;
+    border-start-start-radius: 3px;
+    border-start-end-radius: 3px;
+    background: overrides.$thead-bg-color-3;
   }
   .vgt-global-search__input{
     .input__icon{
       .magnifying-glass{
-        border: 2px solid darken($border-color, 2%);
+        border: 2px solid  color.adjust(variables.$border-color, $lightness: -2%);
         &:before{
-          background: darken($border-color, 2%);
+          background:  color.adjust(variables.$border-color, $lightness: -2%);
         }
       }
     }
     .vgt-input, .vgt-select{
       height: 2.75em;
       box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
-      border: 1px solid $border-color-td;
+      border: 1px solid overrides2.$border-color-td;
       &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: $text-color;
+        color: variables.$text-color;
         opacity: 0.3; /* Firefox */
       }
     }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 400cbb44..d8db7e5e 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,28 +1,28 @@
-@import './striped';
+@use 'striped';
 
 // base table styles
-@import './variables';
-@import './utils';
-@import './wrap';
-@import './table';
-@import './table-th';
-@import './input';
-@import './loading';
-@import './expand-rows';
+@use 'variables';
+@use 'utils';
+@use 'wrap';
+@use 'table';
+@use 'table-th';
+@use 'input';
+@use 'loading';
+@use 'expand-rows';
 
 // table enhancements
-@import './bordered';
-@import './rtl';
-@import './condensed';
-@import './compact';
+@use 'bordered';
+@use 'rtl';
+@use 'condensed';
+@use 'compact';
 
 // controls on top
-@import './control-bar';
+@use 'control-bar';
 
 // table footer
-@import './table-footer';
+@use 'table-footer';
 
 //themes
-@import './nocturnal/nocturnal';
-@import './black-rhino/black-rhino';
-@import './polar-bear/polar-bear';
+@use 'nocturnal/nocturnal';
+@use 'black-rhino/black-rhino';
+@use 'polar-bear/polar-bear';