@alfalab/core-components-tabs 8.5.2 → 8.6.1

package/modern/components/primary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1vvjg */
+/* hash: 1eejh */
 :root {
 }/* deprecated */:root {
     --color-light-accent-primary: #ef3124;
@@ -29,6 +29,8 @@
 }:root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
+    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
 }:root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
@@ -90,11 +92,11 @@
     /* size l */
 
     /* size xl */
-}.tabs__component_18t44 {
+}.tabs__component_1edc6 {
     position: relative;
     display: inline-flex;
     min-width: 100%
-}.tabs__component_18t44:before {
+}.tabs__component_1edc6:before {
         content: '';
         display: block;
         position: absolute;
@@ -102,17 +104,273 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    }.tabs__fullWidthScroll_18t44 {
+    }.tabs__desktop_1edc6.paragraph-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 400;
+    }.tabs__desktop_1edc6.paragraph-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    }.tabs__desktop_1edc6.paragraph-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+    }.tabs__desktop_1edc6.action-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 500;
+    }.tabs__desktop_1edc6.action-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+    }.tabs__desktop_1edc6.action-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 500;
+    }.tabs__desktop_1edc6.accent-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.accent-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.accent-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.paragraph-primary-large .title, .tabs__desktop_1edc6.paragraph-primary-medium .title, .tabs__desktop_1edc6.accent-primary-large .title, .tabs__desktop_1edc6.accent-primary-medium .title, .tabs__desktop_1edc6.action-primary-large .title, .tabs__desktop_1edc6.action-primary-medium .title {
+        padding-bottom: calc(24px / 2);
+    }.tabs__desktop_1edc6.paragraph-primary-large .title + .title,
+    .tabs__desktop_1edc6.paragraph-primary-large .pickerWrapper,
+    .tabs__desktop_1edc6.paragraph-primary-medium .title + .title,
+    .tabs__desktop_1edc6.paragraph-primary-medium .pickerWrapper,
+    .tabs__desktop_1edc6.accent-primary-large .title + .title,
+    .tabs__desktop_1edc6.accent-primary-large .pickerWrapper,
+    .tabs__desktop_1edc6.accent-primary-medium .title + .title,
+    .tabs__desktop_1edc6.accent-primary-medium .pickerWrapper,
+    .tabs__desktop_1edc6.action-primary-large .title + .title,
+    .tabs__desktop_1edc6.action-primary-large .pickerWrapper,
+    .tabs__desktop_1edc6.action-primary-medium .title + .title,
+    .tabs__desktop_1edc6.action-primary-medium .pickerWrapper {
+        margin-left: 24px;
+    }.tabs__desktop_1edc6.paragraph-primary-large .option, .tabs__desktop_1edc6.paragraph-primary-medium .option, .tabs__desktop_1edc6.accent-primary-large .option, .tabs__desktop_1edc6.accent-primary-medium .option, .tabs__desktop_1edc6.action-primary-large .option, .tabs__desktop_1edc6.action-primary-medium .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.paragraph-primary-large .scrollControls > button, .tabs__desktop_1edc6.paragraph-primary-medium .scrollControls > button, .tabs__desktop_1edc6.accent-primary-large .scrollControls > button, .tabs__desktop_1edc6.accent-primary-medium .scrollControls > button, .tabs__desktop_1edc6.action-primary-large .scrollControls > button, .tabs__desktop_1edc6.action-primary-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        }.tabs__desktop_1edc6.paragraph-primary-large .scrollControls button:first-child, .tabs__desktop_1edc6.paragraph-primary-medium .scrollControls button:first-child, .tabs__desktop_1edc6.accent-primary-large .scrollControls button:first-child, .tabs__desktop_1edc6.accent-primary-medium .scrollControls button:first-child, .tabs__desktop_1edc6.action-primary-large .scrollControls button:first-child, .tabs__desktop_1edc6.action-primary-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        }.tabs__desktop_1edc6.paragraph-primary-small .title, .tabs__desktop_1edc6.accent-primary-small .title, .tabs__desktop_1edc6.action-primary-small .title {
+        padding-bottom: calc(20px / 2);
+    }.tabs__desktop_1edc6.paragraph-primary-small .title + .title,
+    .tabs__desktop_1edc6.paragraph-primary-small .pickerWrapper,
+    .tabs__desktop_1edc6.accent-primary-small .title + .title,
+    .tabs__desktop_1edc6.accent-primary-small .pickerWrapper,
+    .tabs__desktop_1edc6.action-primary-small .title + .title,
+    .tabs__desktop_1edc6.action-primary-small .pickerWrapper {
+        margin-left: 20px;
+    }.tabs__desktop_1edc6.paragraph-primary-small .option, .tabs__desktop_1edc6.accent-primary-small .option, .tabs__desktop_1edc6.action-primary-small .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.paragraph-primary-small .scrollControls > button, .tabs__desktop_1edc6.accent-primary-small .scrollControls > button, .tabs__desktop_1edc6.action-primary-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+        }.tabs__desktop_1edc6.paragraph-primary-small .scrollControls button:first-child, .tabs__desktop_1edc6.accent-primary-small .scrollControls button:first-child, .tabs__desktop_1edc6.action-primary-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(20px / 2);
+        }.tabs__desktop_1edc6.headline-system-xlarge .title {
+        font-size: 48px;
+        line-height: 52px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.headline-system-large .title {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.headline-system-medium .title {
+        font-size: 30px;
+        line-height: 36px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.headline-system-small .title {
+        font-size: 22px;
+        line-height: 26px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.headline-system-xsmall .title {
+        font-size: 18px;
+        line-height: 22px;
+        font-weight: 700;
+    }.tabs__desktop_1edc6.headline-xlarge .title {
+        font-size: 48px;
+        line-height: 64px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }.tabs__desktop_1edc6.headline-large .title {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }.tabs__desktop_1edc6.headline-medium .title {
+        font-size: 32px;
+        line-height: 40px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }.tabs__desktop_1edc6.headline-small .title {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }.tabs__desktop_1edc6.headline-xsmall .title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }.tabs__desktop_1edc6.headline-system-xlarge .title {
+        padding-bottom: calc(52px / 2);
+    }.tabs__desktop_1edc6.headline-system-xlarge .title + .title,
+    .tabs__desktop_1edc6.headline-system-xlarge .pickerWrapper {
+        margin-left: 52px;
+    }.tabs__desktop_1edc6.headline-system-xlarge .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-system-xlarge .scrollControls > button {
+            box-sizing: content-box;
+            width: 52px;
+            height: 52px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-system-xlarge .scrollControls button:first-child {
+            margin: 0 0 0 calc(52px / 2);
+        }.tabs__desktop_1edc6.headline-system-large .title, .tabs__desktop_1edc6.headline-large .title {
+        padding-bottom: calc(48px / 2);
+    }.tabs__desktop_1edc6.headline-system-large .title + .title,
+    .tabs__desktop_1edc6.headline-system-large .pickerWrapper,
+    .tabs__desktop_1edc6.headline-large .title + .title,
+    .tabs__desktop_1edc6.headline-large .pickerWrapper {
+        margin-left: 48px;
+    }.tabs__desktop_1edc6.headline-system-large .option, .tabs__desktop_1edc6.headline-large .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-system-large .scrollControls > button, .tabs__desktop_1edc6.headline-large .scrollControls > button {
+            box-sizing: content-box;
+            width: 48px;
+            height: 48px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-system-large .scrollControls button:first-child, .tabs__desktop_1edc6.headline-large .scrollControls button:first-child {
+            margin: 0 0 0 calc(48px / 2);
+        }.tabs__desktop_1edc6.headline-system-medium .title {
+        padding-bottom: calc(36px / 2);
+    }.tabs__desktop_1edc6.headline-system-medium .title + .title,
+    .tabs__desktop_1edc6.headline-system-medium .pickerWrapper {
+        margin-left: 36px;
+    }.tabs__desktop_1edc6.headline-system-medium .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-system-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-system-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(36px / 2);
+        }.tabs__desktop_1edc6.headline-system-small .title {
+        padding-bottom: calc(26px / 2);
+    }.tabs__desktop_1edc6.headline-system-small .title + .title,
+    .tabs__desktop_1edc6.headline-system-small .pickerWrapper {
+        margin-left: 26px;
+    }.tabs__desktop_1edc6.headline-system-small .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-system-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 26px;
+            height: 26px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-system-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(26px / 2);
+        }.tabs__desktop_1edc6.headline-system-xsmall .title {
+        padding-bottom: calc(22px / 2);
+    }.tabs__desktop_1edc6.headline-system-xsmall .title + .title,
+    .tabs__desktop_1edc6.headline-system-xsmall .pickerWrapper {
+        margin-left: 22px;
+    }.tabs__desktop_1edc6.headline-system-xsmall .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-system-xsmall .scrollControls > button {
+            box-sizing: content-box;
+            width: 22px;
+            height: 22px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-system-xsmall .scrollControls button:first-child {
+            margin: 0 0 0 calc(22px / 2);
+        }.tabs__desktop_1edc6.headline-xlarge .title {
+        padding-bottom: calc(64px / 2);
+    }.tabs__desktop_1edc6.headline-xlarge .title + .title,
+    .tabs__desktop_1edc6.headline-xlarge .pickerWrapper {
+        margin-left: 64px;
+    }.tabs__desktop_1edc6.headline-xlarge .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-xlarge .scrollControls > button {
+            box-sizing: content-box;
+            width: 64px;
+            height: 64px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-xlarge .scrollControls button:first-child {
+            margin: 0 0 0 calc(64px / 2);
+        }.tabs__desktop_1edc6.headline-medium .title {
+        padding-bottom: calc(40px / 2);
+    }.tabs__desktop_1edc6.headline-medium .title + .title,
+    .tabs__desktop_1edc6.headline-medium .pickerWrapper {
+        margin-left: 40px;
+    }.tabs__desktop_1edc6.headline-medium .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(40px / 2);
+        }.tabs__desktop_1edc6.headline-small .title {
+        padding-bottom: calc(32px / 2);
+    }.tabs__desktop_1edc6.headline-small .title + .title,
+    .tabs__desktop_1edc6.headline-small .pickerWrapper {
+        margin-left: 32px;
+    }.tabs__desktop_1edc6.headline-small .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(32px / 2);
+        }.tabs__desktop_1edc6.headline-xsmall .title {
+        padding-bottom: calc(24px / 2);
+    }.tabs__desktop_1edc6.headline-xsmall .title + .title,
+    .tabs__desktop_1edc6.headline-xsmall .pickerWrapper {
+        margin-left: 24px;
+    }.tabs__desktop_1edc6.headline-xsmall .option {
+        padding: 0;
+    }.tabs__desktop_1edc6.headline-xsmall .scrollControls > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        }.tabs__desktop_1edc6.headline-xsmall .scrollControls button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        }.tabs__fullWidthScroll_1edc6 {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-}.tabs__container_18t44 {
+}.tabs__container_1edc6 {
     position: relative;
     overflow: hidden;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-}.tabs__title_18t44 {
+}.tabs__title_1edc6 {
     display: flex;
     align-items: center;
     height: 100%;
@@ -128,78 +386,78 @@
     -webkit-user-select: none;
             user-select: none;
     outline: none
-}.tabs__title_18t44:not(.tabs__disabled_18t44):hover {
+}.tabs__title_1edc6:not(.tabs__disabled_1edc6):hover {
         color: var(--primary-tablist-hover-color);
-    }.tabs__focused_18t44 {
+    }.tabs__focused_1edc6 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-}.tabs__collapsed_18t44 {
+}.tabs__collapsed_1edc6 {
     order: 99;
     visibility: collapse;
-}.tabs__selected_18t44 {
+}.tabs__selected_1edc6 {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-}.tabs__disabled_18t44 {
+}.tabs__disabled_1edc6 {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-}.tabs__line_18t44 {
+}.tabs__line_1edc6 {
     position: absolute;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-}.tabs__option_18t44 {
+}.tabs__option_1edc6 {
     color: var(--color-light-text-primary);
-}/* sizes */.tabs__s_18t44 .tabs__title_18t44, .tabs__xs_18t44 .tabs__title_18t44, .tabs__xxs_18t44 .tabs__title_18t44 {
+}/* sizes */.tabs__s_1edc6 .tabs__title_1edc6, .tabs__xs_1edc6 .tabs__title_1edc6, .tabs__xxs_1edc6 .tabs__title_1edc6 {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
-    }.tabs__s_18t44 .tabs__title_18t44 + .tabs__title_18t44, .tabs__xs_18t44 .tabs__title_18t44 + .tabs__title_18t44, .tabs__xxs_18t44 .tabs__title_18t44 + .tabs__title_18t44 {
+    }.tabs__s_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6, .tabs__xs_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6, .tabs__xxs_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6 {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_18t44 .tabs__pickerWrapper_18t44, .tabs__xs_18t44 .tabs__pickerWrapper_18t44, .tabs__xxs_18t44 .tabs__pickerWrapper_18t44 {
+    }.tabs__s_1edc6 .tabs__pickerWrapper_1edc6, .tabs__xs_1edc6 .tabs__pickerWrapper_1edc6, .tabs__xxs_1edc6 .tabs__pickerWrapper_1edc6 {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_18t44 .tabs__option_18t44, .tabs__xs_18t44 .tabs__option_18t44, .tabs__xxs_18t44 .tabs__option_18t44 {
+    }.tabs__s_1edc6 .tabs__option_1edc6, .tabs__xs_1edc6 .tabs__option_1edc6, .tabs__xxs_1edc6 .tabs__option_1edc6 {
         padding: 0;
-    }.tabs__m_18t44 .tabs__title_18t44 {
+    }.tabs__m_1edc6 .tabs__title_1edc6 {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
-    }.tabs__m_18t44 .tabs__title_18t44 + .tabs__title_18t44 {
+    }.tabs__m_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6 {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_18t44 .tabs__pickerWrapper_18t44 {
+    }.tabs__m_1edc6 .tabs__pickerWrapper_1edc6 {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_18t44 .tabs__option_18t44 {
+    }.tabs__m_1edc6 .tabs__option_1edc6 {
         padding: 0;
-    }.tabs__l_18t44 .tabs__title_18t44 {
+    }.tabs__l_1edc6 .tabs__title_1edc6 {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
-    }.tabs__l_18t44 .tabs__title_18t44 + .tabs__title_18t44 {
+    }.tabs__l_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6 {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_18t44 .tabs__pickerWrapper_18t44 {
+    }.tabs__l_1edc6 .tabs__pickerWrapper_1edc6 {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_18t44 .tabs__option_18t44 {
+    }.tabs__l_1edc6 .tabs__option_1edc6 {
         padding: 0;
-    }.tabs__xl_18t44 .tabs__title_18t44 {
+    }.tabs__xl_1edc6 .tabs__title_1edc6 {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
-    }.tabs__xl_18t44 .tabs__title_18t44 + .tabs__title_18t44 {
+    }.tabs__xl_1edc6 .tabs__title_1edc6 + .tabs__title_1edc6 {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_18t44 .tabs__pickerWrapper_18t44 {
+    }.tabs__xl_1edc6 .tabs__pickerWrapper_1edc6 {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_18t44 .tabs__option_18t44 {
+    }.tabs__xl_1edc6 .tabs__option_1edc6 {
         padding: 0;
-    }.tabs__rightAddons_18t44 {
+    }.tabs__rightAddons_1edc6 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1765,13 +2023,221 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-} .tabs__title_qg5kt {
-} .tabs__mobile_qg5kt .tabs__title_qg5kt {
+} .tabs__title_1iwdw {
+} .tabs__mobile_1iwdw .tabs__title_1iwdw {
         padding: var(--primary-tablist-mobile-padding);
         font-size: var(--primary-tablist-mobile-font-size);
         font-weight: var(--primary-tablist-mobile-font-weight);
         font-family: var(--primary-tablist-mobile-font-family);
         line-height: var(--primary-tablist-mobile-line-height)
-    } .tabs__mobile_qg5kt .tabs__title_qg5kt + .tabs__title_qg5kt {
+    } .tabs__mobile_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw {
             margin-left: var(--primary-tablist-mobile-gaps);
+        } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__title_1iwdw {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 400;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__title_1iwdw {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__title_1iwdw {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+    } .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__title_1iwdw {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 500;
+    } .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__title_1iwdw {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+    } .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__title_1iwdw {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 500;
+    } .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__title_1iwdw {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 700;
+    } .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__title_1iwdw {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+    } .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__title_1iwdw {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(24px / 2);
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 24px;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__paragraph-primary-large_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__paragraph-primary-medium_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__accent-primary-large_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__accent-primary-medium_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__action-primary-large_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__action-primary-medium_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(20px / 2);
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 20px;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__paragraph-primary-small_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__accent-primary-small_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__action-primary-small_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(20px / 2);
+        } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__title_1iwdw {
+        font-size: 34px;
+        line-height: 40px;
+        font-weight: 600;
+    } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__title_1iwdw {
+        font-size: 30px;
+        line-height: 36px;
+        font-weight: 600;
+    } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__title_1iwdw {
+        font-size: 26px;
+        line-height: 32px;
+        font-weight: 600;
+    } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__title_1iwdw {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 600;
+    } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__title_1iwdw {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 600;
+    } .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__title_1iwdw {
+        font-size: 34px;
+        line-height: 40px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__title_1iwdw {
+        font-size: 30px;
+        line-height: 36px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__title_1iwdw {
+        font-size: 26px;
+        line-height: 32px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__title_1iwdw {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__title_1iwdw {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(40px / 2);
+    } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 40px;
+    } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__headline-system-xlarge_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__headline-xlarge_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(40px / 2);
+        } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(36px / 2);
+    } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 36px;
+    } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__headline-system-large_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__headline-large_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(36px / 2);
+        } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(32px / 2);
+    } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 32px;
+    } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__headline-system-medium_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__headline-medium_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(32px / 2);
+        } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(28px / 2);
+    } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 28px;
+    } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 28px;
+            height: 28px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__headline-system-small_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__headline-small_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(28px / 2);
+        } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__title_1iwdw, .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__title_1iwdw {
+        padding-bottom: calc(20px / 2);
+    } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__pickerWrapper_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__title_1iwdw + .tabs__title_1iwdw,
+    .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__pickerWrapper_1iwdw {
+        margin-left: 20px;
+    } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__option_1iwdw, .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__option_1iwdw {
+        padding: 0;
+    } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__scrollControls_1iwdw > button, .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__scrollControls_1iwdw > button {
+            box-sizing: content-box;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+        } .tabs__mobile_1iwdw.tabs__headline-system-xsmall_1iwdw .tabs__scrollControls_1iwdw button:first-child, .tabs__mobile_1iwdw.tabs__headline-xsmall_1iwdw .tabs__scrollControls_1iwdw button:first-child {
+            margin: 0 0 0 calc(20px / 2);
         }

package/modern/components/scroll-controls/Component.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { RefObject } from "react";
 import { TabsProps } from "../../typings";
 type ScrollControlsProps = {
+    className?: string;
     view: Exclude<TabsProps['view'], undefined>;
     size: TabsProps['size'];
     containerRef: RefObject<HTMLDivElement>;