@ptsecurity/mosaic 14.7.2 → 15.0.0

package/tabs/_tabs-common.scss

@@ -0,0 +1,197 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+%base-focus-frame {
+    display: block;
+    content: "";
+
+    position: absolute;
+
+    top: 0;
+    right: calc(-1 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+    bottom: calc(-1 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+    left: calc(-1 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+}
+
+%horizontal-focus {
+    &:after {
+        border: {
+            width: calc(var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
+            style: solid;
+            top: {
+                left-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+                right-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+            }
+        };
+
+        border-bottom-color: transparent;
+    }
+}
+
+
+@mixin tab-label {
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    height: var(--mc-tabs-size-height, map.get($tokens, tabs-size-height));
+
+    text-align: center;
+    white-space: nowrap;
+
+    cursor: pointer;
+
+    padding: {
+        right: var(--mc-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+        left: var(--mc-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+    }
+
+    outline: none;
+
+    &.mc-active {
+        cursor: default;
+
+        &:before {
+            display: block;
+            content: "";
+
+            position: absolute;
+        }
+    }
+
+    &.cdk-keyboard-focused {
+        z-index: 1;
+
+        &:after {
+            @extend %base-focus-frame;
+        }
+    }
+
+    &:first-child.cdk-keyboard-focused:after {
+        left: 0;
+    }
+
+    &:last-child.cdk-keyboard-focused:after {
+        right: 0;
+    }
+
+    &[disabled] {
+        pointer-events: none;
+    }
+
+    & .mc-tab-label__content > .mc-icon {
+        &.mc-icon_left {
+            margin-right: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+
+        &.mc-icon_right {
+            margin-left: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+    }
+
+    &.mc-tab-label_horizontal {
+        border-bottom: {
+            width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+            style: solid;
+        }
+
+        &.mc-active:before {
+            bottom: calc(-1 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+            left: 0;
+            right: 0;
+
+            height: var(--mc-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height)});
+        }
+
+        &.cdk-keyboard-focused:after {
+            @extend %horizontal-focus;
+        }
+    }
+
+    &.mc-tab-label_vertical {
+        justify-content: flex-start;
+
+        &.mc-active:before {
+            top: 0;
+            bottom: 0;
+            left: calc(-1 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+
+            width: var(--mc-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height) + 1px});
+        }
+
+        &.cdk-keyboard-focused:after {
+            right: 0;
+            left: 0;
+
+            border: {
+                width: calc(var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
+                style: solid;
+            }
+        }
+
+        & .mc-tab-label__content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+@mixin tab-label-old {
+    border-bottom: {
+        width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        style: solid;
+    }
+
+    border: {
+        width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        style: solid;
+
+        top: {
+            left-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+            right-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+        }
+
+        left: none;
+        left-color: transparent;
+        right: none;
+        right-color: transparent;
+    }
+
+    &.mc-active {
+        border: {
+            width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+            style: solid;
+        }
+
+        padding-right: calc(
+            var(--mc-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
+            var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
+        );
+
+        padding-left: calc(
+            var(--mc-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
+            var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
+        );
+
+        &.cdk-keyboard-focused:after {
+            right: calc(-2 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+            left: calc(-2 * var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+        }
+    }
+
+    &.cdk-keyboard-focused:after {
+        @extend %horizontal-focus;
+
+        top: -1px
+    }
+}

package/tabs/_tabs-theme.scss

@@ -0,0 +1,241 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+//noinspection ALL
+@mixin mc-tabs-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+    $states: map.get($theme, states);
+
+    $tabs: map.get(map.get($theme, components), tabs);
+    $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
+
+    .mc-tab-group_vertical .mc-tab-header__content {
+        border-right-color: map.get($foreground, divider);
+    }
+
+    .mc-tab-header__pagination {
+        border-bottom-color: map.get($tabs, border);
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            & .mc-icon {
+                color: map.get($foreground, text);
+            }
+        }
+
+        &:active {
+            background: map.get($foreground, divider);
+        }
+
+        &.mc-tab-header__pagination_before {
+            border-right-color: map.get($foreground, divider);
+        }
+
+        &.mc-tab-header__pagination_after {
+            border-left-color: map.get($foreground, divider);
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            pointer-events: none;
+
+            & .mc-icon {
+                color: map.get($foreground, text-disabled);
+            }
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    .mc-tab-label_old {
+        color: map.get($foreground, text);
+
+        border-top-color: transparent;
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.mc-active {
+            border: {
+                color: map.get($tabs, border);
+                bottom-color: transparent;
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .mc-tab-link,
+    .mc-tab-label_horizontal {
+        color: map.get($tabs, state-normal-text);
+
+        & .mc-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &.mc-active {
+            border-bottom-color: transparent;
+
+            color: map.get($tabs, state-normal-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            &:before {
+                opacity: map.get($tabs, state-disabled-marker-opacity);
+            }
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .mc-tab-label_vertical {
+        background: map.get($vertical-tabs, state-normal-background);
+        color: map.get($tabs, state-normal-text);
+
+        & .mc-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($vertical-tabs, state-hover-background);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.mc-active {
+            color: map.get($tabs, state-normal-text);
+            background: map.get($states, selected-color);
+
+            & .mc-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+
+            &:hover {
+                background: map.get($vertical-tabs, state-hover-selected-background);
+
+                & .mc-icon {
+                    color: map.get($tabs, state-hover-icon);
+                }
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+            background: map.get($vertical-tabs, state-normal-background);
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+
+@mixin mc-tabs-typography($config) {
+    .mc-tab-label,
+    .mc-tab-label_old,
+    .mc-tab-link {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
+    }
+}

package/tabs/paginated-tab-header.d.ts

@@ -175,5 +175,5 @@ export declare abstract class McPaginatedTabHeader implements AfterContentChecke
      */
     private scrollTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPaginatedTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McPaginatedTabHeader, never, never, { "disablePagination": "disablePagination"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPaginatedTabHeader, never, never, { "disablePagination": "disablePagination"; }, {}, never, never, false, never>;
 }

package/tabs/tab-body.component.d.ts

@@ -73,7 +73,7 @@ export declare class McTabBody implements OnInit, OnDestroy {
      */
     private computePositionFromOrigin;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabBody, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTabBody, "mc-tab-body", never, { "position": "position"; "content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; }, { "onCentering": "onCentering"; "beforeCentering": "beforeCentering"; "afterLeavingCenter": "afterLeavingCenter"; "onCentered": "onCentered"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTabBody, "mc-tab-body", never, { "position": "position"; "content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; }, { "onCentering": "onCentering"; "beforeCentering": "beforeCentering"; "afterLeavingCenter": "afterLeavingCenter"; "onCentered": "onCentered"; }, never, never, false, never>;
 }
 /**
  * The portal host directive for the contents of the tab.
@@ -91,5 +91,5 @@ export declare class McTabBodyPortal extends CdkPortalOutlet implements OnInit,
     /** Clean up centering subscription. */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabBodyPortal, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabBodyPortal, "[mcTabBodyHost]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabBodyPortal, "[mcTabBodyHost]", never, {}, {}, never, never, false, never>;
 }

package/tabs/tab-body.scss

@@ -0,0 +1,8 @@
+.mc-tab-body__content {
+    height: 100%;
+    overflow: auto;
+
+    .mc-tab-group_dynamic-height {
+        overflow: hidden;
+    }
+}

package/tabs/tab-content.directive.d.ts

@@ -5,5 +5,5 @@ export declare class McTabContent {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabContent, "[mcTabContent]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabContent, "[mcTabContent]", never, {}, {}, never, never, false, never>;
 }

package/tabs/tab-group.component.d.ts

@@ -6,23 +6,23 @@ import { McTab } from './tab.component';
 import * as i0 from "@angular/core";
 export declare class McOldTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<McOldTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McOldTabsCssStyler, "mc-tab-group[mc-old-tabs]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McOldTabsCssStyler, "mc-tab-group[mc-old-tabs]", never, {}, {}, never, never, false, never>;
 }
 export declare class McAlignTabsCenterCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<McAlignTabsCenterCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlignTabsCenterCssStyler, "mc-tab-group[mc-align-tabs-center], [mc-tab-nav-bar][mc-align-tabs-center]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlignTabsCenterCssStyler, "mc-tab-group[mc-align-tabs-center], [mc-tab-nav-bar][mc-align-tabs-center]", never, {}, {}, never, never, false, never>;
 }
 export declare class McAlignTabsEndCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<McAlignTabsEndCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlignTabsEndCssStyler, "mc-tab-group[mc-align-tabs-end], [mc-tab-nav-bar][mc-align-tabs-end]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlignTabsEndCssStyler, "mc-tab-group[mc-align-tabs-end], [mc-tab-nav-bar][mc-align-tabs-end]", never, {}, {}, never, never, false, never>;
 }
 export declare class McStretchTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<McStretchTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McStretchTabsCssStyler, "mc-tab-group[mc-stretch-tabs], [mc-tab-nav-bar][mc-stretch-tabs]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McStretchTabsCssStyler, "mc-tab-group[mc-stretch-tabs], [mc-tab-nav-bar][mc-stretch-tabs]", never, {}, {}, never, never, false, never>;
 }
 export declare class McVerticalTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<McVerticalTabsCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McVerticalTabsCssStyler, "mc-tab-group[vertical], [mc-tab-nav-bar][vertical]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McVerticalTabsCssStyler, "mc-tab-group[vertical], [mc-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
 }
 /** A simple change event emitted on focus or selection changes. */
 export declare class McTabChangeEvent {
@@ -130,5 +130,5 @@ export declare class McTabGroup extends McTabGroupMixinBase implements AfterCont
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabGroup, [null, null, { attribute: "mc-old-tabs"; }, { attribute: "vertical"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTabGroup, "mc-tab-group", ["mcTabGroup"], { "disabled": "disabled"; "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTabGroup, "mc-tab-group", ["mcTabGroup"], { "disabled": "disabled"; "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
 }

package/tabs/tab-group.scss

@@ -0,0 +1,63 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/layout';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tab-group {
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    text-align: left;
+
+    &.mc-tab-group_inverted-header {
+        flex-direction: column-reverse;
+    }
+}
+
+.mc-tab-group_vertical {
+    flex-direction: row;
+
+    & .mc-tab-header__content {
+        overflow-y: auto;
+
+        padding-top: 8px;
+        padding-bottom: 1px;
+
+        border-right-width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        border-right-style: solid;
+    }
+}
+
+.mc-tab-body__wrapper {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+}
+
+.mc-tab-body {
+    @include layout.mc-fill;
+
+    display: block;
+    overflow: hidden;
+
+    // Fix for auto content wrapping in IE11
+    flex-basis: 100%;
+
+    &.mc-tab-body__active {
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        z-index: 1;
+        flex-grow: 1;
+    }
+
+    .mc-tab-group.mc-tab-group_dynamic-height &.mc-tab-body__active {
+        overflow-y: hidden;
+    }
+}

package/tabs/tab-header.component.d.ts

@@ -31,5 +31,5 @@ export declare class McTabHeader extends McPaginatedTabHeader {
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
     itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTabHeader, "mc-tab-header", never, { "selectedIndex": "selectedIndex"; "vertical": "vertical"; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTabHeader, "mc-tab-header", never, { "selectedIndex": "selectedIndex"; "vertical": "vertical"; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
 }

package/tabs/tab-header.scss

@@ -0,0 +1,106 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/vendor-prefixes';
+@use 'tabs-common' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tab-header {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.mc-tab-list__content {
+    display: flex;
+
+    .mc-tab-group_align-labels-center & {
+        justify-content: center;
+    }
+
+    .mc-tab-group_align-labels-end & {
+        justify-content: flex-end;
+    }
+}
+
+.mc-tab-header_vertical .mc-tab-list__content {
+    flex-direction: column;
+}
+
+.mc-tab-header__pagination {
+    @include vendor-prefixes.user-select(none);
+
+    position: relative;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: none;
+
+    padding-left: 12px;
+    padding-right: 12px;
+
+    border: {
+        bottom-style: solid;
+        bottom-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+    };
+
+    &.mc-tab-header__pagination_before {
+        border: {
+            right-style: solid;
+            right-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        };
+    }
+
+    &.mc-tab-header__pagination_after {
+        border: {
+            left-style: solid;
+            left-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        };
+    }
+
+    .mc-tab-header__pagination-controls_enabled & {
+        display: flex;
+    }
+}
+
+
+.mc-tab-header__content {
+    display: flex;
+    flex-grow: 1;
+
+    z-index: 1;
+    overflow: hidden;
+}
+
+.mc-tab-list {
+    position: relative;
+
+    width: 100%;
+
+    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.mc-tab-label {
+    @include tab-label;
+    @include vendor-prefixes.user-select(none);
+}
+
+.mc-tab-label_old {
+    @include tab-label-old;
+}
+
+.mc-tab-label,
+.mc-tab-label_old {
+    .mc-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+}