@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/src/components/tabs/_tabs.scss

@@ -11,7 +11,6 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 
@@ -22,27 +21,35 @@
   .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-short-01');
-    color: $text-01;
-    height: auto;
-    width: 100%;
+
     position: relative;
+    width: 100%;
+    height: auto;
+    color: $text-01;
     @include carbon--breakpoint(md) {
-      background: none;
       min-height: rem(40px);
+      background: none;
+    }
+  }
+
+  .#{$prefix}--tabs--container {
+    @include carbon--breakpoint(md) {
+      min-height: rem(48px);
     }
   }
 
   .#{$prefix}--tabs-trigger {
     display: flex;
+    height: rem(40px);
     align-items: center;
     justify-content: space-between;
-    padding: 0 $carbon--spacing-05;
-    height: rem(40px);
-    cursor: pointer;
-    color: $text-01;
-    outline: 2px solid transparent;
+    padding: 0 $spacing-09 0 $spacing-05;
     border-bottom: 1px solid $ui-04;
     background-color: $field-01;
+    color: $text-01;
+    cursor: pointer;
+    outline: 2px solid transparent;
+
     @include carbon--breakpoint(md) {
       display: none;
     }
@@ -54,8 +61,8 @@
   }
 
   .#{$prefix}--tabs-trigger svg {
-    width: rem(12px);
-    height: rem(7px);
+    position: absolute;
+    right: $spacing-05;
     fill: $ui-05;
     transition: transform $duration--fast-01 motion(standard, productive);
   }
@@ -63,6 +70,7 @@
   .#{$prefix}--tabs-trigger--open:focus,
   .#{$prefix}--tabs-trigger--open:active {
     @include focus-outline('reset');
+
     transition: outline $duration--fast-01 motion(standard, productive);
   }
 
@@ -80,10 +88,13 @@
   }
 
   .#{$prefix}--tabs-trigger-text {
-    text-decoration: none;
+    overflow: hidden;
     padding-top: 2px;
     color: $text-01;
     font-weight: 400;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$prefix}--tabs-trigger-text:hover {
@@ -95,39 +106,41 @@
   }
 
   .#{$prefix}--tabs__nav {
-    @include layer('overlay');
-    margin: 0;
-    padding: 0;
+    @include box-shadow;
+
     position: absolute;
-    list-style: none;
+    z-index: z('dropdown');
     display: flex;
+    width: 100%;
+    max-height: 600px;
     flex-direction: column;
-    z-index: z('dropdown');
+    padding: 0;
+    margin: 0;
     background: $ui-01;
+    list-style: none;
     transition: max-height $duration--fast-01 motion(standard, productive);
-    max-height: 600px;
-    width: 100%;
 
     @include carbon--breakpoint(md) {
+      z-index: auto;
+      width: auto;
       flex-direction: row;
       background: none;
       box-shadow: none;
-      z-index: auto;
       transition: inherit;
-      width: auto;
     }
   }
 
   .#{$prefix}--tabs__nav--hidden {
-    transition: max-height $duration--fast-01 motion(standard, productive);
     overflow: hidden;
     max-height: 0;
+    transition: max-height $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
       display: flex;
-      transition: inherit;
-      overflow: visible;
+      max-width: 100%;
       max-height: none;
+      overflow-x: auto;
+      transition: inherit;
     }
   }
 
@@ -136,19 +149,38 @@
   //-----------------------------
   .#{$prefix}--tabs__nav-item {
     @include reset;
-    background-color: $ui-01;
+
     display: flex;
-    padding: 0;
-    cursor: pointer;
     width: 100%;
     height: rem(40px);
+    padding: 0;
+    background-color: $ui-01;
+    cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
-      background: transparent;
       height: auto;
-      & + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(2px);
+      background: transparent;
+
+      + .#{$prefix}--tabs__nav-item {
+        margin-left: rem(1px);
+      }
+    }
+  }
+
+  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
+    @include carbon--breakpoint(md) {
+      background-color: $ui-03;
+
+      + .#{$prefix}--tabs__nav-item {
+        margin-left: 0;
+        // Draws the border without affecting the inner-content
+        box-shadow: -1px 0 0 0 $ui-04;
+      }
+
+      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
+      &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item {
+        box-shadow: none;
       }
     }
   }
@@ -174,7 +206,17 @@
 
     @include carbon--breakpoint(md) {
       background-color: transparent;
-      box-shadow: none;
+
+      + .#{$prefix}--tabs__nav-item {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
+    @include carbon--breakpoint(md) {
+      background-color: $hover-selected-ui;
     }
   }
 
@@ -187,30 +229,64 @@
     outline: none;
   }
 
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
-    pointer-events: none;
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+    @include carbon--breakpoint(md) {
+      background-color: $disabled-02;
+    }
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      border-bottom: none;
+      color: $disabled-03;
+    }
   }
 
   //-----------------------------
   // Item Selected
   //-----------------------------
   .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
-    border: none;
     display: none;
+    border: none;
     transition: color $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
       display: flex;
-      .#{$prefix}--tabs__nav-link {
+      .#{$prefix}--tabs__nav-link,
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
+        @include type-style('productive-heading-01');
+
+        border-bottom: 2px solid $interactive-04;
         color: $text-01;
-        @include type-style('heading-01');
-        border-bottom: 3px solid $interactive-01;
+      }
+    }
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled),
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
+    @include carbon--breakpoint(md) {
+      background-color: $ui-01;
+
+      .#{$prefix}--tabs__nav-link {
+        padding: $spacing-03 $spacing-05;
+        border-bottom: none;
+        box-shadow: inset 0 2px 0 0 $interactive-04;
+        // height - vertical padding
+        // Draws the border without affecting the inner-content
+        line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
       }
 
       .#{$prefix}--tabs__nav-link:focus,
       .#{$prefix}--tabs__nav-link:active {
-        color: $text-01;
-        border-bottom: 2px solid $interactive-01;
+        box-shadow: none;
       }
     }
   }
@@ -220,46 +296,57 @@
   //-----------------------------
   a.#{$prefix}--tabs__nav-link {
     @include focus-outline('reset');
+
     display: inline-block;
-    color: $text-02;
-    text-decoration: none;
-    font-weight: 400;
-    padding: $carbon--spacing-04 0;
+    overflow: hidden;
     width: calc(100% - 32px);
     height: rem(40px);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin: 0 $carbon--spacing-05;
-    line-height: rem(16px);
+    padding: $spacing-04 0;
     border-bottom: 1px solid $ui-03;
-    overflow: hidden;
+    margin: 0 $spacing-05;
+    color: $text-02;
+    font-weight: 400;
+    line-height: 1rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
     transition: border $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
+    white-space: nowrap;
 
     &:focus,
     &:active {
+      @include focus-outline('outline');
+
       width: 100%;
-      margin: 0;
       padding-left: 16px;
-      @include focus-outline('outline');
+      margin: 0;
     }
 
     @include carbon--breakpoint(md) {
-      border-bottom: $tab-underline-color;
-      padding: $carbon--spacing-03 $carbon--spacing-05;
       width: rem(160px);
+      padding: $spacing-04 $spacing-05 $spacing-03;
+      border-bottom: $tab-underline-color;
       margin: 0;
       line-height: inherit;
 
       &:focus,
       &:active {
         width: rem(160px);
-        padding: $carbon--spacing-03 $carbon--spacing-05;
         border-bottom: 2px;
       }
     }
   }
 
+  .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      height: rem(48px);
+      padding: $spacing-03 $spacing-05;
+      border-bottom: none;
+      // Height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+    }
+  }
+
   //-----------------------------
   //  Link Hover
   //-----------------------------
@@ -267,8 +354,16 @@
     .#{$prefix}--tabs__nav-link {
     color: $text-01;
     @include carbon--breakpoint(md) {
-      color: $text-01;
       border-bottom: $tab-underline-color-hover;
+      color: $text-01;
+    }
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
+    .#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      border-bottom: none;
     }
   }
 
@@ -276,19 +371,20 @@
   //  Link Disabled
   //-----------------------------
   .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
-    color: $tab-text-disabled;
     border-bottom: $tab-underline-disabled;
+    color: $tab-text-disabled;
+    pointer-events: none;
   }
 
   .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
-    cursor: no-drop;
     border-bottom: $tab-underline-disabled;
+    cursor: no-drop;
   }
 
   .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
   .#{$prefix}--tabs__nav-item--disabled a.#{$prefix}--tabs__nav-link:active {
-    outline: none;
     border-bottom: $tab-underline-disabled;
+    outline: none;
   }
 
   //-----------------------------
@@ -301,28 +397,461 @@
     color: $text-02;
   }
 
+  //-----------------------------
+  //  Tab Content Container
+  //-----------------------------
+  .#{$prefix}--tab-content {
+    padding: $carbon--spacing-05;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------
   .#{$prefix}--tabs.#{$prefix}--skeleton {
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--skeleton.#{$prefix}--tabs--scrollable:not(.#{$prefix}--tabs--scrollable--container)
+    .#{$prefix}--tabs--scrollable__nav-item {
+    border-bottom: 2px solid $skeleton-02;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
+    display: flex;
+    width: 10rem;
+    height: 100%;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {
     @include skeleton;
-    width: rem(75px);
-    height: rem(12px);
+
+    display: block;
+    width: 100%;
+    height: rem(14px);
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
     @include skeleton;
+
     width: rem(100px);
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
     @include hidden;
   }
+
+  // TODO: remove namespace and suffix in next major release
+  .#{$prefix}--tabs--scrollable {
+    @include reset;
+    @include type-style('body-short-01');
+
+    display: flex;
+    width: 100%;
+    height: auto;
+    min-height: rem(40px);
+    color: $text-01;
+
+    &.#{$prefix}--tabs--scrollable--container {
+      min-height: rem(48px);
+    }
+
+    .#{$prefix}--tabs--scrollable__nav {
+      display: flex;
+      overflow: auto hidden;
+      width: auto;
+      max-width: 100%;
+      flex-direction: row;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      outline: 0;
+      // hide scrollbars
+      scrollbar-width: none;
+      transition: max-height $duration--fast-01 motion(standard, productive);
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    //-----------------------------
+    // Overflow Nav Buttons
+    //-----------------------------
+    .#{$prefix}--tabs__overflow-indicator--left,
+    .#{$prefix}--tabs__overflow-indicator--right {
+      z-index: 1;
+      width: $carbon--spacing-03;
+      flex: 1 0 auto;
+    }
+
+    .#{$prefix}--tabs__overflow-indicator--left {
+      margin-right: -$carbon--spacing-03;
+      background-image: linear-gradient(to left, transparent, $ui-background);
+    }
+
+    .#{$prefix}--tabs__overflow-indicator--right {
+      margin-left: -$carbon--spacing-03;
+      background-image: linear-gradient(to right, transparent, $ui-background);
+    }
+
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs__overflow-indicator--left {
+      background-image: linear-gradient(to left, transparent, $ui-01);
+    }
+
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs__overflow-indicator--right {
+      background-image: linear-gradient(to right, transparent, $ui-01);
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs__overflow-indicator--left {
+      background-image: linear-gradient(to left, transparent, $ui-03);
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs__overflow-indicator--right {
+      background-image: linear-gradient(to right, transparent, $ui-03);
+    }
+
+    // Safari-only media query
+    // won't appear correctly with CSS custom properties
+    // see: code snippet and modal overflow indicators
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+        .#{$prefix}--tabs__overflow-indicator--left {
+          background-image: linear-gradient(
+            to left,
+            rgba($ui-background, 0),
+            $ui-background
+          );
+        }
+
+        .#{$prefix}--tabs__overflow-indicator--right {
+          background-image: linear-gradient(
+            to right,
+            rgba($ui-background, 0),
+            $ui-background
+          );
+        }
+
+        &.#{$prefix}--tabs--scrollable--container
+          .#{$prefix}--tabs__overflow-indicator--left {
+          background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03);
+        }
+
+        &.#{$prefix}--tabs--scrollable--container
+          .#{$prefix}--tabs__overflow-indicator--right {
+          background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03);
+        }
+      }
+    }
+
+    .#{$prefix}--tab--overflow-nav-button {
+      @include button-reset;
+
+      display: flex;
+      width: $carbon--spacing-08;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+
+      &:focus {
+        @include focus-outline('outline');
+      }
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--hidden {
+      display: none;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tab--overflow-nav-button {
+      width: $carbon--spacing-09;
+      margin: 0;
+      background-color: $ui-03;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button svg {
+      fill: $icon-01;
+    }
+
+    //-----------------------------
+    // Item
+    //-----------------------------
+    .#{$prefix}--tabs--scrollable__nav-item {
+      @include reset;
+
+      display: flex;
+      padding: 0;
+      cursor: pointer;
+      transition: background-color $duration--fast-01
+        motion(standard, productive);
+    }
+
+    .#{$prefix}--tabs--scrollable__nav-item
+      + .#{$prefix}--tabs--scrollable__nav-item {
+      margin-left: rem(1px);
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item {
+      background-color: $ui-03;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item
+      + .#{$prefix}--tabs--scrollable__nav-item {
+      margin-left: 0;
+      // Draws the border without affecting the inner-content
+      box-shadow: rem(-1px) 0 0 0 $ui-04;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item
+      + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected,
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected
+      + .#{$prefix}--tabs--scrollable__nav-item {
+      box-shadow: none;
+    }
+
+    .#{$prefix}--tabs--scrollable__nav-item
+      .#{$prefix}--tabs--scrollable__nav-link {
+      transition: color $duration--fast-01 motion(standard, productive),
+        border-bottom-color $duration--fast-01 motion(standard, productive),
+        outline $duration--fast-01 motion(standard, productive);
+    }
+
+    //-----------------------------
+    // Item Hover
+    //-----------------------------
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item:hover {
+      background-color: $hover-selected-ui;
+    }
+
+    //---------------------------------------------
+    // Item Disabled
+    //---------------------------------------------
+    .#{$prefix}--tabs--scrollable__nav-item--disabled,
+    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
+      background-color: transparent;
+      cursor: not-allowed;
+      outline: none;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled,
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
+      background-color: $disabled-02;
+    }
+
+    //-----------------------------
+    // Item Selected
+    //-----------------------------
+    .#{$prefix}--tabs--scrollable__nav-item--selected {
+      transition: color $duration--fast-01 motion(standard, productive);
+    }
+
+    .#{$prefix}--tabs--scrollable__nav-item--selected
+      .#{$prefix}--tabs--scrollable__nav-link,
+    .#{$prefix}--tabs--scrollable__nav-item--selected
+      .#{$prefix}--tabs--scrollable__nav-link:focus,
+    .#{$prefix}--tabs--scrollable__nav-item--selected
+      .#{$prefix}--tabs--scrollable__nav-link:active {
+      @include type-style('productive-heading-01');
+
+      border-bottom: 2px solid $interactive-04;
+      color: $text-01;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--selected,
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
+      background-color: $ui-01;
+
+      .#{$prefix}--tabs--scrollable__nav-link:focus,
+      .#{$prefix}--tabs--scrollable__nav-link:active {
+        box-shadow: none;
+      }
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--selected
+      .#{$prefix}--tabs--scrollable__nav-link {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 2px 0 0 $interactive-04;
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+    }
+
+    &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--selected,
+    &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
+      background-color: $ui-background;
+    }
+
+    //-----------------------------
+    // Link
+    //-----------------------------
+    .#{$prefix}--tabs--scrollable__nav-link {
+      @include button-reset($width: false);
+      @include focus-outline('reset');
+      @include type-style('body-short-01');
+
+      overflow: hidden;
+      width: rem(160px);
+      padding: $spacing-04 $spacing-05 $spacing-03;
+      border-bottom: $tab-underline-color;
+      color: $text-02;
+      text-align: left;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      transition: border $duration--fast-01 motion(standard, productive),
+        outline $duration--fast-01 motion(standard, productive);
+      white-space: nowrap;
+
+      &:focus,
+      &:active {
+        @include focus-outline('outline');
+      }
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-link {
+      height: rem(48px);
+      padding: $spacing-03 $spacing-05;
+      border-bottom: 0;
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+    }
+
+    //-----------------------------
+    //  Link Hover
+    //-----------------------------
+    .#{$prefix}--tabs--scrollable__nav-item:hover
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom: $tab-underline-color-hover;
+      color: $text-01;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom: none;
+    }
+
+    //-----------------------------
+    //  Link Disabled
+    //-----------------------------
+    .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom: $tab-underline-disabled;
+      color: $tab-text-disabled;
+    }
+
+    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom: $tab-underline-disabled;
+      color: $tab-text-disabled;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link:focus,
+    .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link:active {
+      border-bottom: $tab-underline-disabled;
+      outline: none;
+    }
+
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom-color: $ui-03;
+    }
+
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom-color: $ui-03;
+    }
+
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link:focus,
+    .#{$prefix}--tabs--scrollable--light
+      .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link:active {
+      border-bottom-color: $ui-03;
+    }
+
+    &.#{$prefix}--tabs--scrollable--container
+      .#{$prefix}--tabs--scrollable__nav-item--disabled
+      .#{$prefix}--tabs--scrollable__nav-link {
+      border-bottom: none;
+      color: $disabled-03;
+    }
+
+    //-----------------------------
+    //  Tab Content Container
+    //-----------------------------
+    .#{$prefix}--tab-content {
+      padding: $carbon--spacing-05;
+    }
+
+    //-----------------------------
+    // Skeleton state
+    //-----------------------------
+    .#{$prefix}--tabs.#{$prefix}--skeleton {
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .#{$prefix}--tabs.#{$prefix}--skeleton
+      .#{$prefix}--tabs--scrollable__nav-link {
+      @include skeleton;
+
+      width: rem(75px);
+    }
+
+    .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
+      @include skeleton;
+
+      width: rem(75px);
+      margin-right: rem(1px);
+    }
+
+    .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
+      @include hidden;
+    }
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--tabs--scrollable__nav-item
+    .#{$prefix}--tabs__nav-item--selected
+    .#{$prefix}--tabs--scrollable__nav-item--selected {
+    @include high-contrast-mode('focus');
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--tabs--scrollable
+    .#{$prefix}--tabs--scrollable__nav-item--disabled
+    .#{$prefix}--tabs--scrollable__nav-link {
+    @include high-contrast-mode('disabled');
+  }
 }
 
 @include exports('tabs') {