fix(tabs): Restore the highlight style when tab is selected (#11181)

### Related Ticket(s)

Closes #11147

### Description

The current tab is not correctly highlighted, the border-bottom color doesn't have the correct color:
The Storybook is correctly showing the color but I cannot reproduce it in my project. I created a reproduction of the bug in stackblitz.

Storybook:
![image](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/24749324/114df562-bd03-416d-ad09-d060db4dbd41)

Stackblitz
![image](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/24749324/f6f11445-9b38-46fb-b394-8c95e5da90b5)

Looking at the code in [this line](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/91e50fa5cfcd5a5b4950ad09bc76cc89b1dc09e0/packages/carbon-web-components/src/components/tabs/tabs.scss#L104) of the scss, the [selected] is appended to the tabs so the built selector is:

:host(cds-tabs)[selected].

This is not a valid selector and it should be:

:host(cds-tabs[selected]).

I confirmed the compilation with the compiled source in the navigator.

### Changelog

**New**

- Set the style when the tab is selected with the correct selector.

**Changed**

**Removed**

- Deleted the scss code that used the wrong selector.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/src/components/tabs/tabs.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -70,14 +70,11 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
-// copying styles from
 :host(#{$prefix}-tab) {
   display: flex;
   background: transparent;
   inline-size: 100%;
 
-  outline: none;
-
   .#{$prefix}--tabs__nav-link {
     @include button-reset.reset($width: false);
     @include focus-outline('reset');
@@ -103,13 +100,30 @@ $inset-transition: inset 110ms motion(standard, productive);
     }
   }
 
-  &[selected] {
-    .#{$prefix}--tabs__nav-link {
-      @include type-style('heading-compact-01');
+  outline: none;
+}
 
-      border-block-end: $spacing-01 solid $border-interactive;
+:host(#{$prefix}-tab[selected]) {
+  .#{$prefix}--tabs__nav-link {
+    @include type-style('heading-compact-01');
+
+    border-block-end: $spacing-01 solid $border-interactive;
+
+    &,
+    // Need to override Carbon core's non-selected focus color
+    &:focus,
+    &:active {
+      color: $text-primary;
     }
   }
+
+  display: flex;
+  background-color: transparent;
+  transition: color $duration-fast-01 motion(standard, productive);
+
+  &:hover {
+    background-color: transparent;
+  }
 }
 
 :host(#{$prefix}-tab:hover) {
@@ -178,27 +192,6 @@ $inset-transition: inset 110ms motion(standard, productive);
   color: $text-on-color-disabled;
 }
 
-:host(#{$prefix}-tab[selected]) {
-  display: flex;
-  background-color: transparent;
-  transition: color $duration-fast-01 motion(standard, productive);
-
-  &:hover {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--tabs__nav-link {
-    @include type-style('heading-01');
-
-    &,
-    // Need to override Carbon core's non-selected focus color
-    &:focus,
-    &:active {
-      color: $text-primary;
-    }
-  }
-}
-
 :host(#{$prefix}-tab[type='contained'][selected]),
 :host(#{$prefix}-tab[type='contained'][selected]:hover) {
   background-color: $layer-01;