fix selected tab style issues (#3283)

* move --selected-tab-pseudo-content var to TabList

* disable pointer events inside tabs

* add changeset

Author: sirineJ

.changeset/floppy-tires-type.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Fixed minor styling issues with the selected tab indicator in the TabList component.

packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css

@@ -1,6 +1,4 @@
 .base {
-  --selected-tab-pseudo-content: "";
-
   float: left;
   display: flex;
   flex-direction: column;
@@ -22,6 +20,10 @@
   transition: color var(--cui-transitions-default);
 }
 
+.base > * {
+  pointer-events: none;
+}
+
 .base:hover {
   color: var(--cui-fg-normal-hovered);
 }

packages/circuit-ui/components/Tabs/components/TabList/TabList.module.css

@@ -51,6 +51,8 @@
 }
 
 .base {
+  --selected-tab-pseudo-content: "";
+
   position: relative;
   display: flex;
   flex-wrap: nowrap;

packages/circuit-ui/components/Tabs/components/TabList/TabList.tsx

@@ -58,7 +58,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
     const stretchOnMobile = numberOfTabs <= MOBILE_AUTOSTRETCH_ITEMS_MAX;
 
     const updateGliderStyles = useCallback((tab: HTMLElement) => {
-      tab.style.setProperty('--selected-tab-pseudo-content', 'unset');
+      tabListRef.current?.style.setProperty(
+        '--selected-tab-pseudo-content',
+        'unset',
+      );
       const { offsetLeft, offsetWidth } = tab;
       gliderRef.current?.style?.setProperty(
         'transform',