@alfalab/core-components-tabs 9.0.0 → 9.1.0-snapshot-92b8690

package/components/primary-tablist/index.css

@@ -57,11 +57,11 @@
     --primary-tablist-xl-font-weight: 400;
     --primary-tablist-xl-font-family: var(--font-family-system);
     --primary-tablist-xl-padding: var(--gap-0) var(--gap-0) var(--gap-20);
-} .tabs__component_bnoxs {
+} .tabs__component_ci38p {
     position: relative;
     display: inline-flex;
     min-width: 100%
-} .tabs__component_bnoxs:before {
+} .tabs__component_ci38p:before {
         content: '';
         display: block;
         position: absolute;
@@ -69,271 +69,360 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__title_bnoxs {
+    } .tabs__desktop_ci38p {
+    &.tabs__paragraph-primary-large_ci38p .tabs__title_ci38p {
         font-size: 18px;
         line-height: 24px;
         font-weight: 400;
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__paragraph-primary-medium_ci38p .tabs__title_ci38p {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__paragraph-primary-small_ci38p .tabs__title_ci38p {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
-    } .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__action-primary-large_ci38p .tabs__title_ci38p {
         font-size: 18px;
         line-height: 24px;
         font-weight: 500;
-    } .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__action-primary-medium_ci38p .tabs__title_ci38p {
         font-size: 16px;
         line-height: 24px;
         font-weight: 500;
-    } .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__action-primary-small_ci38p .tabs__title_ci38p {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-    } .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__accent-primary-large_ci38p .tabs__title_ci38p {
         font-size: 18px;
         line-height: 24px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__accent-primary-medium_ci38p .tabs__title_ci38p {
         font-size: 16px;
         line-height: 24px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__accent-primary-small_ci38p .tabs__title_ci38p {
         font-size: 14px;
         line-height: 20px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__paragraph-primary-large_ci38p,
+    &.tabs__paragraph-primary-medium_ci38p,
+    &.tabs__accent-primary-large_ci38p,
+    &.tabs__accent-primary-medium_ci38p,
+    &.tabs__action-primary-large_ci38p,
+    &.tabs__action-primary-medium_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(24px / 2);
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 24px;
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 24px;
             height: 24px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__paragraph-primary-large_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__paragraph-primary-medium_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__accent-primary-large_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__accent-primary-medium_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__action-primary-large_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__action-primary-medium_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
-        } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__paragraph-primary-small_ci38p,
+    &.tabs__accent-primary-small_ci38p,
+    &.tabs__action-primary-small_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(20px / 2);
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 20px;
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 20px;
             height: 20px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__paragraph-primary-small_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__accent-primary-small_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__action-primary-small_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-system-xlarge_ci38p .tabs__title_ci38p {
         font-size: 48px;
         line-height: 52px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-system-large_ci38p .tabs__title_ci38p {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-system-medium_ci38p .tabs__title_ci38p {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-system-small_ci38p .tabs__title_ci38p {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-system-xsmall_ci38p .tabs__title_ci38p {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
-    } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-xlarge_ci38p .tabs__title_ci38p {
         font-size: 48px;
         line-height: 64px;
         font-weight: 500;
         font-feature-settings: 'ss01';
         font-family: var(--font-family-styrene);
-    } .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-large_ci38p .tabs__title_ci38p {
         font-size: 40px;
         line-height: 48px;
         font-weight: 500;
         font-feature-settings: 'ss01';
         font-family: var(--font-family-styrene);
-    } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-medium_ci38p .tabs__title_ci38p {
         font-size: 32px;
         line-height: 40px;
         font-weight: 500;
         font-feature-settings: 'ss01';
         font-family: var(--font-family-styrene);
-    } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-small_ci38p .tabs__title_ci38p {
         font-size: 24px;
         line-height: 32px;
         font-weight: 500;
         font-feature-settings: 'ss01';
         font-family: var(--font-family-styrene);
-    } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-xsmall_ci38p .tabs__title_ci38p {
         font-size: 20px;
         line-height: 24px;
         font-weight: 500;
         font-feature-settings: 'ss01';
         font-family: var(--font-family-styrene);
-    } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__title_bnoxs {
+    }
+    &.tabs__headline-system-xlarge_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(52px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 52px;
-    } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 52px;
             height: 52px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-system-xlarge_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(52px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__title_bnoxs, .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-system-large_ci38p,
+    &.tabs__headline-large_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(48px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__pickerWrapper_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 48px;
-    } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__option_bnoxs, .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__scrollControls_bnoxs > button, .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 48px;
             height: 48px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-system-large_bnoxs .tabs__scrollControls_bnoxs button:first-child, .tabs__desktop_bnoxs.tabs__headline-large_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(48px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-system-medium_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(36px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 36px;
-    } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 36px;
             height: 36px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-system-medium_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(36px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-system-small_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(26px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 26px;
-    } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 26px;
             height: 26px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-system-small_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(26px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-system-xsmall_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(22px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 22px;
-    } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 22px;
             height: 22px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-system-xsmall_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(22px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-xlarge_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(64px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 64px;
-    } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 64px;
             height: 64px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-xlarge_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(64px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-medium_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(40px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 40px;
-    } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 40px;
             height: 40px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-medium_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(40px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-small_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(32px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 32px;
-    } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 32px;
             height: 32px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-small_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(32px / 2);
-        } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__title_bnoxs {
+        }
+    }
+    &.tabs__headline-xsmall_ci38p {
+        & .tabs__title_ci38p {
         padding-bottom: calc(24px / 2);
-    } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs,
-    .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__pickerWrapper_bnoxs {
+    }
+        & .tabs__title_ci38p + .tabs__title_ci38p,
+    & .tabs__pickerWrapper_ci38p {
         margin-left: 24px;
-    } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__option_bnoxs {
+    }
+        & .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__scrollControls_bnoxs > button {
+    }
+        & .tabs__scrollControls_ci38p > button {
             box-sizing: content-box;
             width: 24px;
             height: 24px;
             padding: var(--gap-0);
-        } .tabs__desktop_bnoxs.tabs__headline-xsmall_bnoxs .tabs__scrollControls_bnoxs button:first-child {
+        }
+        & .tabs__scrollControls_ci38p button:first-child {
             margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
-        } .tabs__fullWidthScroll_bnoxs {
+        }
+    }
+} .tabs__fullWidthScroll_ci38p {
     min-width: calc(100% - 2 * var(--gap-16));
     margin: var(--gap-0) var(--gap-16);
-} .tabs__container_bnoxs {
+} .tabs__container_ci38p {
     position: relative;
     overflow: hidden;
     margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
     padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
-} .tabs__title_bnoxs {
+} .tabs__title_ci38p {
     display: flex;
     align-items: center;
     height: 100%;
@@ -350,82 +439,82 @@
        -moz-user-select: none;
             user-select: none;
     outline: none
-} .tabs__title_bnoxs:not(:disabled):hover {
+} .tabs__title_ci38p:not(:disabled):hover {
         color: var(--primary-tablist-hover-color);
-    } .tabs__focused_bnoxs {
+    } .tabs__focused_ci38p {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tabs__collapsed_bnoxs {
+} .tabs__collapsed_ci38p {
     order: 99;
     visibility: collapse;
-} .tabs__selected_bnoxs {
+} .tabs__selected_ci38p {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-} .tabs__disabled_bnoxs {
+} .tabs__disabled_ci38p {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-} .tabs__line_bnoxs {
+} .tabs__line_ci38p {
     position: absolute;
     height: 3px;
     bottom: var(--gap-0);
     left: var(--gap-0);
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-} .tabs__option_bnoxs {
+} .tabs__option_ci38p {
     color: var(--color-light-text-primary);
-} .tabs__s_bnoxs .tabs__title_bnoxs, .tabs__xs_bnoxs .tabs__title_bnoxs, .tabs__xxs_bnoxs .tabs__title_bnoxs {
+} .tabs__s_ci38p .tabs__title_ci38p, .tabs__xs_ci38p .tabs__title_ci38p, .tabs__xxs_ci38p .tabs__title_ci38p {
         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_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs, .tabs__xs_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs, .tabs__xxs_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs {
+    } .tabs__s_ci38p .tabs__title_ci38p + .tabs__title_ci38p, .tabs__xs_ci38p .tabs__title_ci38p + .tabs__title_ci38p, .tabs__xxs_ci38p .tabs__title_ci38p + .tabs__title_ci38p {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_bnoxs .tabs__pickerWrapper_bnoxs, .tabs__xs_bnoxs .tabs__pickerWrapper_bnoxs, .tabs__xxs_bnoxs .tabs__pickerWrapper_bnoxs {
+    } .tabs__s_ci38p .tabs__pickerWrapper_ci38p, .tabs__xs_ci38p .tabs__pickerWrapper_ci38p, .tabs__xxs_ci38p .tabs__pickerWrapper_ci38p {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_bnoxs .tabs__option_bnoxs, .tabs__xs_bnoxs .tabs__option_bnoxs, .tabs__xxs_bnoxs .tabs__option_bnoxs {
+    } .tabs__s_ci38p .tabs__option_ci38p, .tabs__xs_ci38p .tabs__option_ci38p, .tabs__xxs_ci38p .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__m_bnoxs .tabs__title_bnoxs {
+    } .tabs__m_ci38p .tabs__title_ci38p {
         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_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs {
+    } .tabs__m_ci38p .tabs__title_ci38p + .tabs__title_ci38p {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_bnoxs .tabs__pickerWrapper_bnoxs {
+    } .tabs__m_ci38p .tabs__pickerWrapper_ci38p {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_bnoxs .tabs__option_bnoxs {
+    } .tabs__m_ci38p .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__l_bnoxs .tabs__title_bnoxs {
+    } .tabs__l_ci38p .tabs__title_ci38p {
         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_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs {
+    } .tabs__l_ci38p .tabs__title_ci38p + .tabs__title_ci38p {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_bnoxs .tabs__pickerWrapper_bnoxs {
+    } .tabs__l_ci38p .tabs__pickerWrapper_ci38p {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_bnoxs .tabs__option_bnoxs {
+    } .tabs__l_ci38p .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__xl_bnoxs .tabs__title_bnoxs {
+    } .tabs__xl_ci38p .tabs__title_ci38p {
         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_bnoxs .tabs__title_bnoxs + .tabs__title_bnoxs {
+    } .tabs__xl_ci38p .tabs__title_ci38p + .tabs__title_ci38p {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_bnoxs .tabs__pickerWrapper_bnoxs {
+    } .tabs__xl_ci38p .tabs__pickerWrapper_ci38p {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_bnoxs .tabs__option_bnoxs {
+    } .tabs__xl_ci38p .tabs__option_ci38p {
         padding: var(--gap-0);
-    } .tabs__rightAddons_bnoxs {
+    } .tabs__rightAddons_ci38p {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: var(--gap-8);
-} .tabs__rightAddonsMarginZero_bnoxs {
+} .tabs__rightAddonsMarginZero_ci38p {
     margin-left: var(--gap-0);
 }

package/components/primary-tablist/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"tabs__component_bnoxs","desktop":"tabs__desktop_bnoxs","paragraph-primary-large":"tabs__paragraph-primary-large_bnoxs","title":"tabs__title_bnoxs","paragraph-primary-medium":"tabs__paragraph-primary-medium_bnoxs","paragraph-primary-small":"tabs__paragraph-primary-small_bnoxs","action-primary-large":"tabs__action-primary-large_bnoxs","action-primary-medium":"tabs__action-primary-medium_bnoxs","action-primary-small":"tabs__action-primary-small_bnoxs","accent-primary-large":"tabs__accent-primary-large_bnoxs","accent-primary-medium":"tabs__accent-primary-medium_bnoxs","accent-primary-small":"tabs__accent-primary-small_bnoxs","pickerWrapper":"tabs__pickerWrapper_bnoxs","option":"tabs__option_bnoxs","scrollControls":"tabs__scrollControls_bnoxs","headline-system-xlarge":"tabs__headline-system-xlarge_bnoxs","headline-system-large":"tabs__headline-system-large_bnoxs","headline-system-medium":"tabs__headline-system-medium_bnoxs","headline-system-small":"tabs__headline-system-small_bnoxs","headline-system-xsmall":"tabs__headline-system-xsmall_bnoxs","headline-xlarge":"tabs__headline-xlarge_bnoxs","headline-large":"tabs__headline-large_bnoxs","headline-medium":"tabs__headline-medium_bnoxs","headline-small":"tabs__headline-small_bnoxs","headline-xsmall":"tabs__headline-xsmall_bnoxs","fullWidthScroll":"tabs__fullWidthScroll_bnoxs","container":"tabs__container_bnoxs","focused":"tabs__focused_bnoxs","collapsed":"tabs__collapsed_bnoxs","selected":"tabs__selected_bnoxs","disabled":"tabs__disabled_bnoxs","line":"tabs__line_bnoxs","s":"tabs__s_bnoxs","xs":"tabs__xs_bnoxs","xxs":"tabs__xxs_bnoxs","m":"tabs__m_bnoxs","l":"tabs__l_bnoxs","xl":"tabs__xl_bnoxs","rightAddons":"tabs__rightAddons_bnoxs","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_bnoxs"};
+var commonStyles = {"component":"tabs__component_ci38p","desktop":"tabs__desktop_ci38p","paragraph-primary-large":"tabs__paragraph-primary-large_ci38p","title":"tabs__title_ci38p","paragraph-primary-medium":"tabs__paragraph-primary-medium_ci38p","paragraph-primary-small":"tabs__paragraph-primary-small_ci38p","action-primary-large":"tabs__action-primary-large_ci38p","action-primary-medium":"tabs__action-primary-medium_ci38p","action-primary-small":"tabs__action-primary-small_ci38p","accent-primary-large":"tabs__accent-primary-large_ci38p","accent-primary-medium":"tabs__accent-primary-medium_ci38p","accent-primary-small":"tabs__accent-primary-small_ci38p","pickerWrapper":"tabs__pickerWrapper_ci38p","option":"tabs__option_ci38p","scrollControls":"tabs__scrollControls_ci38p","headline-system-xlarge":"tabs__headline-system-xlarge_ci38p","headline-system-large":"tabs__headline-system-large_ci38p","headline-system-medium":"tabs__headline-system-medium_ci38p","headline-system-small":"tabs__headline-system-small_ci38p","headline-system-xsmall":"tabs__headline-system-xsmall_ci38p","headline-xlarge":"tabs__headline-xlarge_ci38p","headline-large":"tabs__headline-large_ci38p","headline-medium":"tabs__headline-medium_ci38p","headline-small":"tabs__headline-small_ci38p","headline-xsmall":"tabs__headline-xsmall_ci38p","fullWidthScroll":"tabs__fullWidthScroll_ci38p","container":"tabs__container_ci38p","focused":"tabs__focused_ci38p","collapsed":"tabs__collapsed_ci38p","selected":"tabs__selected_ci38p","disabled":"tabs__disabled_ci38p","line":"tabs__line_ci38p","s":"tabs__s_ci38p","xs":"tabs__xs_ci38p","xxs":"tabs__xxs_ci38p","m":"tabs__m_ci38p","l":"tabs__l_ci38p","xl":"tabs__xl_ci38p","rightAddons":"tabs__rightAddons_ci38p","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_ci38p"};
 
-module.exports = styles;
+module.exports = commonStyles;
 //# sourceMappingURL=index.module.css.js.map

package/components/primary-tablist/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/primary-tablist/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n@import './text-styles.module.css';\n\n.component {\n    position: relative;\n    display: inline-flex;\n    min-width: 100%;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 1px;\n        height: 1px;\n        width: 100%;\n        background-color: var(--primary-tablist-bottom-border-color);\n    }\n}\n\n.desktop {\n    @mixin text-style;\n    @mixin text-style-desktop;\n}\n\n.fullWidthScroll {\n    min-width: calc(100% - 2 * var(--gap-16));\n    margin: var(--gap-0) var(--gap-16);\n}\n\n.container {\n    position: relative;\n    overflow: hidden;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding: var(--gap-0);\n    cursor: pointer;\n    color: var(--primary-tablist-color);\n    font-feature-settings: var(--primary-tablist-font-feature-settings);\n    transition: color 0.2s ease;\n    border: 0;\n    background: none;\n    white-space: nowrap;\n    box-shadow: none;\n    user-select: none;\n    outline: none;\n\n    &:not(:disabled):hover {\n        color: var(--primary-tablist-hover-color);\n    }\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.collapsed {\n    order: 99;\n    visibility: collapse;\n}\n\n.selected {\n    cursor: default;\n    color: var(--primary-tablist-selected-color);\n}\n\n.disabled {\n    cursor: var(--disabled-cursor);\n    color: var(--primary-tablist-disabled-color);\n}\n\n.line {\n    position: absolute;\n    height: 3px;\n    bottom: var(--gap-0);\n    left: var(--gap-0);\n    background-color: var(--primary-tablist-line-color);\n    transition: transform 0.2s ease, width 0.2s ease;\n}\n\n.option {\n    color: var(--color-light-text-primary);\n}\n\n/* sizes */\n\n.s,\n.xs,\n.xxs {\n    & .title {\n        padding: var(--primary-tablist-s-padding);\n        font-size: var(--primary-tablist-s-font-size);\n        font-weight: var(--primary-tablist-s-font-weight);\n        font-family: var(--primary-tablist-s-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-s-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-s-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.m {\n    & .title {\n        padding: var(--primary-tablist-m-padding);\n        font-size: var(--primary-tablist-m-font-size);\n        font-weight: var(--primary-tablist-m-font-weight);\n        font-family: var(--primary-tablist-m-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-m-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-m-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.l {\n    & .title {\n        padding: var(--primary-tablist-l-padding);\n        font-size: var(--primary-tablist-l-font-size);\n        font-weight: var(--primary-tablist-l-font-weight);\n        font-family: var(--primary-tablist-l-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-l-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-l-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.xl {\n    & .title {\n        padding: var(--primary-tablist-xl-padding);\n        font-size: var(--primary-tablist-xl-font-size);\n        font-weight: var(--primary-tablist-xl-font-weight);\n        font-family: var(--primary-tablist-xl-font-family);\n        line-height: 32px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-xl-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-xl-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.rightAddons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: var(--gap-8);\n}\n.rightAddonsMarginZero {\n    margin-left: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,OAAO,CAAC,mBAAmB,CAAC,0BAA0B,CAAC,sCAAsC,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,eAAe,CAAC,2BAA2B,CAAC,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,WAAW,CAAC,uBAAuB,CAAC,UAAU,CAAC,sBAAsB,CAAC,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,yBAAyB,CAAC,uBAAuB,CAAC,mCAAmC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/primary-tablist/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../vars.css';\n@import './text-styles.module.css';\n\n.component {\n    position: relative;\n    display: inline-flex;\n    min-width: 100%;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 1px;\n        height: 1px;\n        width: 100%;\n        background-color: var(--primary-tablist-bottom-border-color);\n    }\n}\n\n.desktop {\n    @mixin text-style;\n    @mixin text-style-desktop;\n}\n\n.fullWidthScroll {\n    min-width: calc(100% - 2 * var(--gap-16));\n    margin: var(--gap-0) var(--gap-16);\n}\n\n.container {\n    position: relative;\n    overflow: hidden;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding: var(--gap-0);\n    cursor: pointer;\n    color: var(--primary-tablist-color);\n    font-feature-settings: var(--primary-tablist-font-feature-settings);\n    transition: color 0.2s ease;\n    border: 0;\n    background: none;\n    white-space: nowrap;\n    box-shadow: none;\n    user-select: none;\n    outline: none;\n\n    &:not(:disabled):hover {\n        color: var(--primary-tablist-hover-color);\n    }\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.collapsed {\n    order: 99;\n    visibility: collapse;\n}\n\n.selected {\n    cursor: default;\n    color: var(--primary-tablist-selected-color);\n}\n\n.disabled {\n    cursor: var(--disabled-cursor);\n    color: var(--primary-tablist-disabled-color);\n}\n\n.line {\n    position: absolute;\n    height: 3px;\n    bottom: var(--gap-0);\n    left: var(--gap-0);\n    background-color: var(--primary-tablist-line-color);\n    transition: transform 0.2s ease, width 0.2s ease;\n}\n\n.option {\n    color: var(--color-light-text-primary);\n}\n\n/* sizes */\n\n.s,\n.xs,\n.xxs {\n    & .title {\n        padding: var(--primary-tablist-s-padding);\n        font-size: var(--primary-tablist-s-font-size);\n        font-weight: var(--primary-tablist-s-font-weight);\n        font-family: var(--primary-tablist-s-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-s-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-s-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.m {\n    & .title {\n        padding: var(--primary-tablist-m-padding);\n        font-size: var(--primary-tablist-m-font-size);\n        font-weight: var(--primary-tablist-m-font-weight);\n        font-family: var(--primary-tablist-m-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-m-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-m-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.l {\n    & .title {\n        padding: var(--primary-tablist-l-padding);\n        font-size: var(--primary-tablist-l-font-size);\n        font-weight: var(--primary-tablist-l-font-weight);\n        font-family: var(--primary-tablist-l-font-family);\n        line-height: 24px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-l-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-l-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.xl {\n    & .title {\n        padding: var(--primary-tablist-xl-padding);\n        font-size: var(--primary-tablist-xl-font-size);\n        font-weight: var(--primary-tablist-xl-font-weight);\n        font-family: var(--primary-tablist-xl-font-family);\n        line-height: 32px;\n    }\n\n    & .title + .title {\n        margin-left: var(--primary-tablist-xl-gaps);\n    }\n\n    & .pickerWrapper {\n        margin-left: var(--primary-tablist-xl-gaps);\n    }\n\n    & .option {\n        padding: var(--gap-0);\n    }\n}\n\n.rightAddons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: var(--gap-8);\n}\n.rightAddonsMarginZero {\n    margin-left: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,mBAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,OAAO,CAAC,mBAAmB,CAAC,0BAA0B,CAAC,sCAAsC,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,eAAe,CAAC,2BAA2B,CAAC,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,WAAW,CAAC,uBAAuB,CAAC,UAAU,CAAC,sBAAsB,CAAC,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,yBAAyB,CAAC,uBAAuB,CAAC,mCAAmC,CAAC;;;;"}