diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss
index 7d124d1..9b981a1 100644
--- a/src/assets/scss/components/_button.scss
+++ b/src/assets/scss/components/_button.scss
@@ -1,10 +1,12 @@
 @use "sass:list";
 
 /* @docs */
-$button-background-color: var(--#{$prefix}primary) !default;
-$button-color: var(--#{$prefix}primary-invert) !default;
+$button-background-color: transparent !default;
+$button-color: var(--#{$prefix}black) !default;
 $button-border-radius: var(--#{$prefix}base-border-radius) !default;
-$button-border: 1px solid $button-background-color !default;
+
+$button-border-color: var(--#{$prefix}grey-lighter) !default;
+$button-border: 1px solid $button-border-color !default;
 $button-box-shadow: none !default;
 $button-font-weight: 400 !default;
 $button-line-height: var(--#{$prefix}base-line-height) !default;
@@ -17,6 +19,7 @@ $button-rounded-border-radius: var(
 ) !default;
 $button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
 $button-outlined-background-color: transparent !default;
+$button-outlined-border-color: var(--#{$prefix}grey-light) !default;
 /* @docs */
 
 @keyframes spinAround {
@@ -118,22 +121,11 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--outlined {
-    background-color: var(
-      --#{$prefix}button-outlined-background-color,
-      $button-outlined-background-color
-    );
-    border-color: var(
-      --#{$prefix}button-background-color,
-      $button-background-color
-    );
-    color: var(--#{$prefix}button-background-color, $button-background-color);
-
+    &:focus,
     &:hover {
-      border-color: transparent;
-
       background-color: var(
-        --#{$prefix}button-background-color,
-        $button-background-color
+        --#{$prefix}button-border-color,
+        $button-border-color
       );
       color: var(--#{$prefix}button-color, $button-color);
     }
@@ -162,30 +154,10 @@ $button-outlined-background-color: transparent !default;
     }
   }
 
-  &--loading {
-    color: transparent !important;
-    pointer-events: none;
-  }
-
-  &--loading::after {
-    -webkit-animation: spinAround 500ms infinite linear;
-    left: calc(50% - 0.5em);
-    top: calc(50% - 0.5em);
-    position: absolute !important;
-    border: 2px solid #dbdbdb;
-    border-radius: 9999px;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    display: block;
-    height: 1em;
-    width: 1em;
-  }
-
   &--inverted {
     background-color: var(--#{$prefix}button-color, $button-color);
     border-color: var(--#{$prefix}button-color, $button-color);
-    color: var(--#{$prefix}button-background-color, $button-background-color);
+    color: var(--#{$prefix}button-border-color, $button-border-color);
 
     &:hover {
       /* background-color: darken($color-invert, 5%)*/
@@ -223,4 +195,24 @@ $button-outlined-background-color: transparent !default;
     box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
     outline: 0;
   }
+
+  &--loading {
+    color: transparent !important;
+    pointer-events: none;
+  }
+
+  &--loading::after {
+    -webkit-animation: spinAround 500ms infinite linear;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.5em);
+    position: absolute !important;
+    border: 2px solid #dbdbdb;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+  }
 }
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
index a60db50..04881ae 100644
--- a/src/assets/scss/components/_datepicker.scss
+++ b/src/assets/scss/components/_datepicker.scss
@@ -2,13 +2,12 @@
 
 /* @docs */
 $datepicker-font-size: var(--#{$prefix}base-font-size) !default;
-$datepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
-$datepicker-box-padding: 0.375rem 1rem !default;
-$datepicker-header-padding: 0 0 0.875rem 0 !default;
-$datepicker-header-margin: 0 0 0.875rem 0 !default;
+$datepicker-box-padding: 0.5rem 1rem !default;
+$datepicker-header-padding: 0.5rem 0 !default;
+$datepicker-header-margin: 0 0 0.5rem 0 !default;
 $datepicker-header-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
-$datepicker-footer-padding: 0.875rem 0.5rem 0 0.5rem !default;
-$datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
+$datepicker-footer-padding: 0.5rem 0.5rem 0 0.5rem !default;
+$datepicker-footer-margin: 0.5rem 0 !default;
 $datepicker-footer-border-top: 1px solid var(--#{$prefix}grey-lighter) !default;
 $datepicker-table-head-padding: 0 0 0.875rem 0 !default;
 $datepicker-table-head-margin: 0 0 0.875rem 0 !default;
@@ -38,6 +37,7 @@ $datepicker-event-background-color: var(--#{$prefix}grey-light) !default;
 $datepicker-event-dots-size: 0.35em !default;
 $datepicker-event-dots-margin: 0 0.1em !default;
 $datepicker-event-bars-height: 0.25em !default;
+$datepicker-btn-background-color: transparent !default;
 $datepicker-btn-border-color: var(--#{$prefix}grey-lighter) !default;
 $datepicker-btn-border-radius: var(--#{$prefix}base-border-radius) !default;
 $datepicker-btn-border: 1px solid transparent !default;
@@ -66,8 +66,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   }
 
   &__box {
-    --#{$prefix}dropdown-item-line-height: #{$datepicker-box-line-height};
-    --#{$prefix}dropdown-item-padding: #{$datepicker-box-padding};
+    padding: var(--#{$prefix}datepicker-box-padding, $datepicker-box-padding);
   }
 
   &__header {
@@ -124,6 +123,10 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
         --#{$prefix}datepicker-btn-line-height,
         $datepicker-btn-line-height
       );
+      background-color: var(
+        --#{$prefix}datepicker-btn-background-color,
+        $datepicker-btn-background-color
+      );
       border: var(--#{$prefix}datepicker-btn-border, $datepicker-btn-border);
       border-radius: var(
         --#{$prefix}datepicker-btn-border-radius,
@@ -490,5 +493,9 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       flex-grow: 1;
       flex-shrink: 1;
     }
+
+    .o-drop__menu {
+      padding: 0;
+    }
   }
 }
diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
index 88fe06c..ec614de 100644
--- a/src/assets/scss/components/_dropdown.scss
+++ b/src/assets/scss/components/_dropdown.scss
@@ -236,7 +236,7 @@ $dropdown-mobile-zindex: 60 !default;
     pointer-events: none;
   }
 
-  &--mobile {
+  &--modal:not(.o-drop--inline):not(.o-drop--hoverable) {
     > .o-drop__menu {
       position: fixed;
       top: 25%;
diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss
index f74d9e7..bce1335 100644
--- a/src/assets/scss/components/_menu.scss
+++ b/src/assets/scss/components/_menu.scss
@@ -6,6 +6,7 @@ $menu-item-active-color: var(--#{$prefix}primary-invert) !default;
 $menu-item-active-background-color: var(--#{$prefix}primary) !default;
 $menu-item-disabled-color: var(--#{$prefix}grey-light) !default;
 $menu-list-border-left: 1px solid var(--#{$prefix}primary) !default;
+$menu-list-border-radius: var(--#{$prefix}base-border-radius) !default;
 $menu-list-line-height: 1.25em !default;
 $menu-item-padding: 0.5em 0.75em !default;
 $menu-nested-list-margin: 0.75em !default;
@@ -24,7 +25,7 @@ $menu-icon-spacer: 0.5rem !default;
   }
 
   &__list,
-  &__item__wrapper {
+  &__item {
     list-style: none;
   }
 
@@ -55,12 +56,16 @@ $menu-icon-spacer: 0.5rem !default;
     }
   }
 
-  &__item {
+  &__item__button {
     display: block;
     list-style: none;
     color: var(--#{$prefix}menu-item-color, $menu-item-color);
     padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
     font-size: var(--#{$prefix}menu-item-size, $base-font-size);
+    border-radius: var(
+      --#{$prefix}menu-list-border-radius,
+      $menu-list-border-radius
+    );
 
     &:hover:not(&--active):not(&--disabled) {
       color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
@@ -70,7 +75,7 @@ $menu-icon-spacer: 0.5rem !default;
       );
     }
 
-    &--icon-text .o-icon {
+    &--icon .o-icon {
       margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
     }
 
diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss
index 6e83558..9fc011f 100644
--- a/src/assets/scss/components/_pagination.scss
+++ b/src/assets/scss/components/_pagination.scss
@@ -34,7 +34,7 @@ $pagination-rounded-border-radius: var(
     }
   }
 
-  &__link {
+  &__btn {
     @include unselectable;
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -120,11 +120,11 @@ $pagination-rounded-border-radius: var(
     );
   }
 
-  &__next {
+  &__btn-next {
     order: 3;
   }
 
-  &__previous {
+  &__btn-previous {
     order: 2;
   }
 
@@ -149,11 +149,11 @@ $pagination-rounded-border-radius: var(
   &--centered {
     justify-content: center;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 3;
     }
 
@@ -166,11 +166,11 @@ $pagination-rounded-border-radius: var(
   &--right {
     justify-content: flex-end;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 2;
     }
 
@@ -184,18 +184,18 @@ $pagination-rounded-border-radius: var(
     justify-content: flex-start;
     flex-wrap: wrap;
 
-    .o-pag__link {
+    .o-pag__btn {
       flex-grow: 1;
       flex-shrink: 1;
     }
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;
diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
index 8f70b72..c808dd8 100644
--- a/src/assets/scss/components/_steps.scss
+++ b/src/assets/scss/components/_steps.scss
@@ -38,7 +38,7 @@ $steps-details-title-font-weight: 600 !default;
     width: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
   }
 
-  .o-steps__title {
+  .o-steps__step-label {
     text-align: center;
     z-index: 1;
     background-color: var(
@@ -54,7 +54,7 @@ $steps-details-title-font-weight: 600 !default;
     line-height: var(--#{$prefix}#{$sizeVarName}, $size);
   }
 
-  .o-steps__wrapper-vertical {
+  &.o-steps--vertical {
     .o-steps--label-right {
       .o-steps__divider {
         left: calc(
@@ -82,7 +82,7 @@ $steps-details-title-font-weight: 600 !default;
       }
     }
 
-    &.o-steps__wrapper-position-right {
+    &.o-steps-position-right {
       .o-steps--label-right {
         .o-steps__divider {
           left: calc(
@@ -114,11 +114,6 @@ $steps-details-title-font-weight: 600 !default;
 }
 
 .o-steps {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-
   @include steps-size($steps-font-size);
 
   @each $name, $value in $sizes {
@@ -127,6 +122,13 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
+  &__nav {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+  }
+
   &__nav-item {
     position: relative;
     display: flex;
@@ -157,7 +159,7 @@ $steps-details-title-font-weight: 600 !default;
       );
 
       &--#{$name} {
-        &.o-steps__nav-item-active {
+        &.o-steps__nav-item--active {
           .o-steps__marker {
             background-color: var(
               --#{$prefix}variant-invert-#{$name},
@@ -177,7 +179,7 @@ $steps-details-title-font-weight: 600 !default;
           }
         }
 
-        &.o-steps__nav-item-previous {
+        &.o-steps__nav-item--previous {
           .o-steps__marker {
             color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
             background-color: var(--#{$prefix}variant-#{$name}, $color);
@@ -232,7 +234,7 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__link {
+  &__step {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -295,7 +297,7 @@ $steps-details-title-font-weight: 600 !default;
     );
   }
 
-  &__nav-item-active {
+  &__nav-item--active {
     .o-steps__link {
       cursor: default;
     }
@@ -314,7 +316,7 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__nav-item-previous {
+  &__nav-item--previous {
     .o-steps__marker {
       color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
       background-color: var(
@@ -333,30 +335,16 @@ $steps-details-title-font-weight: 600 !default;
     flex-basis: auto;
   }
 
-  &__wrapper-vertical {
+  &--vertical {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 
-    .o-steps {
+    .o-steps__nav {
       height: 100%;
       flex-direction: column;
     }
 
-    .o-steps__divider {
-      height: 100%;
-      width: var(--#{$prefix}steps-divider-height, $steps-divider-height);
-      top: -50%;
-      left: calc(50% - #{$steps-divider-height * 0.5});
-    }
-
-    .o-steps__item-active,
-    .o-steps__item-previous {
-      .o-steps__divider {
-        background-position: right top;
-      }
-    }
-
     .o-steps__nav-item {
       width: 100%;
       display: flex;
@@ -393,6 +381,20 @@ $steps-details-title-font-weight: 600 !default;
       }
     }
 
+    .o-steps__divider {
+      height: 100%;
+      width: var(--#{$prefix}steps-divider-height, $steps-divider-height);
+      top: -50%;
+      left: calc(50% - #{$steps-divider-height * 0.5});
+    }
+
+    .o-steps__item--active,
+    .o-steps__item--previous {
+      .o-steps__divider {
+        background-position: right top;
+      }
+    }
+
     .o-steps__content {
       flex-grow: 1;
       flex-basis: 70%;
@@ -402,26 +404,17 @@ $steps-details-title-font-weight: 600 !default;
       flex-basis: 100%;
     }
 
-    &.o-steps__wrapper-position-right {
+    &.o-steps-position-right {
       flex-direction: row-reverse;
     }
   }
 
   &--mobile {
-    .o-steps__title {
+    @extend .o-steps--vertical;
+
+    .o-steps__step-label {
       display: none;
       padding: 0;
     }
-
-    .o-steps__divider {
-      height: var(--#{$prefix}steps-divider-height, $steps-divider-height);
-      top: var(--#{$prefix}steps-divider-top, $steps-font-size);
-
-      @each $name, $value in $sizes {
-        .o-steps--#{$name} {
-          top: var(--#{$prefix}size-#{$name}, $value);
-        }
-      }
-    }
   }
 }
diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss
index 3c19eb3..dbbceab 100644
--- a/src/assets/scss/components/_tabs.scss
+++ b/src/assets/scss/components/_tabs.scss
@@ -29,18 +29,223 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
 /* @docs */
 
 .o-tabs {
-  &--fullwidth {
+  &--expanded {
     width: 100%;
 
-    .o-tabs__nav-item-wrapper {
+    .o-tabs__tab--default,
+    .o-tabs__tab--boxed,
+    .o-tabs__tab--toggle {
+      height: 100%;
+    }
+
+    .o-tabs__nav-item {
       flex-grow: 1;
       flex-shrink: 0;
     }
+  }
 
-    .o-tabs__nav-item-default,
-    .o-tabs__nav-item-boxed,
-    .o-tabs__nav-item-toggle {
-      height: 100%;
+  &__nav {
+    @include unselectable;
+
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    // padding bottom to keep showing the border-bottom
+    padding-bottom: var(
+      --#{$prefix}tabs-border-bottom-width,
+      $tabs-border-bottom-width
+    );
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
+      }
+    }
+
+    &--centered {
+      justify-content: center;
+    }
+
+    &--right {
+      justify-content: flex-end;
+    }
+  }
+
+  &__tab {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    border: 1px solid transparent;
+    background-color: transparent;
+    align-items: center;
+    line-height: $tabs-link-line-height;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -1px;
+    vertical-align: top;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+    border-bottom-color: var(
+      --#{$prefix}tabs-border-bottom-color,
+      $tabs-border-bottom-color
+    );
+    border-bottom-style: var(
+      --#{$prefix}tabs-border-bottom-style,
+      $tabs-border-bottom-style
+    );
+    border-bottom-width: var(
+      --#{$prefix}tabs-border-bottom-width,
+      $tabs-border-bottom-width
+    );
+    color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
+    padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
+
+    &-icon {
+      margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
+    }
+
+    // focus effect
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+      outline: 0;
+      border-radius: #{$tabs-boxed-link-radius};
+    }
+
+    &--default {
+      &.o-tabs__tab--active {
+        border-bottom-color: var(
+          --#{$prefix}tabs-link-active-border-bottom-color,
+          $tabs-link-active-border-bottom-color
+        );
+        color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs__tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-link-hover-background-color,
+          $tabs-boxed-link-hover-background-color
+        );
+        border-bottom-color: var(
+          --#{$prefix}tabs-link-hover-border-bottom-color,
+          $tabs-boxed-link-hover-border-bottom-color
+        );
+      }
+    }
+
+    &--boxed {
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
+        #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
+      );
+
+      &.o-tabs__tab--active {
+        color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
+        background-color: var(
+          --#{$prefix}tabs-boxed-link-active-background-color,
+          $tabs-boxed-link-active-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-boxed-link-active-border-color,
+          $tabs-boxed-link-active-border-color
+        );
+        border-bottom-color: var(
+          --#{$prefix}tabs-boxed-link-active-border-bottom-color,
+          $tabs-boxed-link-active-border-bottom-color
+        );
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs__tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-boxed-link-hover-background-color,
+          $tabs-boxed-link-hover-background-color
+        );
+      }
+    }
+
+    &--toggle {
+      border-color: var(
+        --#{$prefix}tabs-toggle-link-border-color,
+        $tabs-toggle-link-border-color
+      );
+      border-style: var(
+        --#{$prefix}tabs-toggle-link-border-style,
+        $tabs-toggle-link-border-style
+      );
+      border-width: var(
+        --#{$prefix}tabs-toggle-link-border-width,
+        $tabs-toggle-link-border-width
+      );
+
+      &.o-tabs__tab--active {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-active-background-color,
+          $tabs-toggle-link-active-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-active-border-color,
+          $tabs-toggle-link-active-border-color
+        );
+        color: var(
+          --#{$prefix}tabs-toggle-link-active-color,
+          $tabs-toggle-link-active-color
+        );
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs_tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-hover-background-color,
+          $tabs-toggle-link-hover-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-hover-border-color,
+          $tabs-toggle-link-hover-border-color
+        );
+      }
+    }
+
+    &--pills {
+      border-radius: var(
+        --#{$prefix}tabs-boxed-link-radius,
+        $tabs-boxed-link-radius
+      );
+      border-color: transparent;
+
+      &.o-tabs__tab--active {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-active-background-color,
+          $tabs-toggle-link-active-background-color
+        );
+        color: var(
+          --#{$prefix}tabs-toggle-link-active-color,
+          $tabs-toggle-link-active-color
+        );
+      }
     }
   }
 
@@ -55,11 +260,11 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
       border-bottom: none;
     }
 
-    .o-tabs__nav-item-default {
+    .o-tabs__tab---default {
       border-radius: 0;
     }
 
-    .o-tabs__nav-item-boxed {
+    .o-tabs__tab--boxed {
       border-bottom-color: transparent;
       border-right-color: var(
         --#{$prefix}tabs-border-bottom-color,
@@ -70,7 +275,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
         #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
       );
 
-      &--active {
+      &.o-tabs__tab--active {
         border-right-color: transparent;
         border-bottom-color: var(
           --#{$prefix}tabs-border-bottom-color,
@@ -83,7 +288,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
   &--right {
     flex-direction: row-reverse;
 
-    .o-tabs__nav-item-boxed {
+    .o-tabs__tab--boxed {
       border-bottom-color: transparent;
       border-right-color: transparent;
       border-left-color: var(
@@ -95,7 +300,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
         0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
       );
 
-      &--active {
+      &.o-tabs__tab--active {
         border-left-color: transparent;
         border-right-color: var(
           --#{$prefix}tabs-border-bottom-color,
@@ -109,237 +314,20 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
     }
   }
 
-  &__nav {
-    @include unselectable;
-
-    margin: 0;
-    padding: 0;
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-start;
-    // padding bottom to keep showing the border-bottom
-    padding-bottom: var(
-      --#{$prefix}tabs-border-bottom-width,
-      $tabs-border-bottom-width
-    );
-    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
-      }
-    }
-
-    &--centered {
-      justify-content: center;
-    }
-
-    &--right {
-      justify-content: flex-end;
-    }
-
-    &-item {
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      width: 100%;
-      margin: 0;
-      border: 1px solid transparent;
-      background-color: transparent;
-      align-items: center;
-      line-height: $tabs-link-line-height;
-      display: flex;
-      justify-content: center;
-      margin-bottom: -1px;
-      vertical-align: top;
-      cursor: pointer;
-      text-decoration: none;
-      font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-      border-bottom-color: var(
-        --#{$prefix}tabs-border-bottom-color,
-        $tabs-border-bottom-color
-      );
-      border-bottom-style: var(
-        --#{$prefix}tabs-border-bottom-style,
-        $tabs-border-bottom-style
-      );
-      border-bottom-width: var(
-        --#{$prefix}tabs-border-bottom-width,
-        $tabs-border-bottom-width
-      );
-      color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
-      padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
-
-      &-icon {
-        margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
-      }
-
-      // focus effect
-      &:focus,
-      &:focus-within {
-        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-        outline: 0;
-        border-radius: #{$tabs-boxed-link-radius};
-      }
-
-      &-default {
-        &--active {
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-active-border-bottom-color,
-            $tabs-link-active-border-bottom-color
-          );
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-default--active) {
-          background-color: var(
-            --#{$prefix}tabs-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-hover-border-bottom-color,
-            $tabs-boxed-link-hover-border-bottom-color
-          );
-        }
-      }
-
-      &-boxed {
-        border-radius: var(
-          --#{$prefix}tabs-border-bottom-color,
-          #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
-        );
-
-        &--active {
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-active-background-color,
-            $tabs-boxed-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-color,
-            $tabs-boxed-link-active-border-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-bottom-color,
-            $tabs-boxed-link-active-border-bottom-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-boxed--active) {
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-        }
-      }
-
-      &-toggle {
-        border-color: var(
-          --#{$prefix}tabs-toggle-link-border-color,
-          $tabs-toggle-link-border-color
-        );
-        border-style: var(
-          --#{$prefix}tabs-toggle-link-border-style,
-          $tabs-toggle-link-border-style
-        );
-        border-width: var(
-          --#{$prefix}tabs-toggle-link-border-width,
-          $tabs-toggle-link-border-width
-        );
-
-        &--active {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-active-background-color,
-            $tabs-toggle-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-active-border-color,
-            $tabs-toggle-link-active-border-color
-          );
-          color: var(
-            --#{$prefix}tabs-toggle-link-active-color,
-            $tabs-toggle-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-toggle--active) {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-hover-background-color,
-            $tabs-toggle-link-hover-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-hover-border-color,
-            $tabs-toggle-link-hover-border-color
-          );
-        }
-      }
-
-      &-pills {
-        border-radius: var(
-          --#{$prefix}tabs-boxed-link-radius,
-          $tabs-boxed-link-radius
-        );
-        border-color: transparent;
-
-        &--active {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-active-background-color,
-            $tabs-toggle-link-active-background-color
-          );
-          color: var(
-            --#{$prefix}tabs-toggle-link-active-color,
-            $tabs-toggle-link-active-color
-          );
-        }
-      }
-    }
-  }
-
   &__content {
     position: relative;
     overflow: visible;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
 
     &--transitioning {
       overflow: hidden;
     }
+
+    &:not(:has(.o-tabs__panel:empty)) {
+      padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
+    }
   }
 
   &:not(:last-child) {
diff --git a/src/assets/scss/utils/_variables.scss b/src/assets/scss/utils/_variables.scss
index 428231e..abba77c 100644
--- a/src/assets/scss/utils/_variables.scss
+++ b/src/assets/scss/utils/_variables.scss
@@ -42,8 +42,8 @@ $base-disabled-opacity: 0.5 !default;
 
 $control-border-width: 1px !default;
 $control-height: 2.25em !default;
-$control-padding-vertical: calc(0.375em - #{$control-border-width});
-$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$control-padding-vertical: calc(0.25em - #{$control-border-width});
+$control-padding-horizontal: calc(1em - #{$control-border-width});
 $control-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
 
 // Sizes