@ptsecurity/mosaic 14.7.2 → 15.0.0

package/_visual.scss

@@ -1,3 +1,8 @@
+// @deprecated Use `...`.
+// Will be deleted in 16.0.x.
+
+// This file is needed to create a bundle in a package
+
 @mixin size($width, $height) {
     width: $width;
     height: $height;
@@ -79,7 +84,7 @@
 // Do not edit directly
 
 $light-color-scheme-primary-default: #0374eb;
-$light-color-scheme-second-default: #6d7a86;
+$light-color-scheme-secondary-default: #6d7a86;
 $light-color-scheme-error-default: #db3c55;
 $light-color-scheme-info-default: #0374eb;
 $light-color-scheme-success-default: #028b49;
@@ -105,7 +110,7 @@ $light-color-scheme-states-selected-color: #e7f1ff;
 $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $light-color-scheme-states-disabled-opacity: 0.3;
 $dark-color-scheme-primary-default: #0059b8;
-$dark-color-scheme-second-default: #515e69;
+$dark-color-scheme-secondary-default: #515e69;
 $dark-color-scheme-error-default: #b9023a;
 $dark-color-scheme-info-default: #0c6579;
 $dark-color-scheme-success-default: #016b37;
@@ -417,9 +422,9 @@ $badge-light-color-scheme-solid-transparent-color: #19252f;
 $badge-light-color-scheme-solid-light-background: #d7dee4;
 $badge-light-color-scheme-solid-light-border: #d7dee4;
 $badge-light-color-scheme-solid-light-color: #19252f;
-$badge-light-color-scheme-solid-second-background: #7f8c98;
-$badge-light-color-scheme-solid-second-border: #7f8c98;
-$badge-light-color-scheme-solid-second-color: white;
+$badge-light-color-scheme-solid-secondary-background: #7f8c98;
+$badge-light-color-scheme-solid-secondary-border: #7f8c98;
+$badge-light-color-scheme-solid-secondary-color: white;
 $badge-light-color-scheme-pastel-primary-background: #eff6ff;
 $badge-light-color-scheme-pastel-primary-border: #a2c7fe;
 $badge-light-color-scheme-pastel-primary-color: #4187ff;
@@ -471,9 +476,9 @@ $badge-dark-color-scheme-solid-transparent-color: white;
 $badge-dark-color-scheme-solid-light-background: #7f8c98;
 $badge-dark-color-scheme-solid-light-border: #7f8c98;
 $badge-dark-color-scheme-solid-light-color: white;
-$badge-dark-color-scheme-solid-second-background: #515e69;
-$badge-dark-color-scheme-solid-second-border: #515e69;
-$badge-dark-color-scheme-solid-second-color: white;
+$badge-dark-color-scheme-solid-secondary-background: #515e69;
+$badge-dark-color-scheme-solid-secondary-border: #515e69;
+$badge-dark-color-scheme-solid-secondary-color: white;
 $badge-size-default-height: 24px;
 $badge-size-default-min-width: 10px;
 $badge-size-default-padding: 0 8px;
@@ -506,12 +511,12 @@ $button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
 $button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
 $button-light-color-scheme-primary-transparent-states-active-icon: #014b9d;
-$button-light-color-scheme-second-border: #d7dee4;
-$button-light-color-scheme-second-background: #d7dee4;
-$button-light-color-scheme-second-color: #19252f;
-$button-light-color-scheme-second-icon: #8c99a5;
-$button-light-color-scheme-second-states-active-border: #bdc7d1;
-$button-light-color-scheme-second-states-active-background: #bdc7d1;
+$button-light-color-scheme-secondary-border: #d7dee4;
+$button-light-color-scheme-secondary-background: #d7dee4;
+$button-light-color-scheme-secondary-color: #19252f;
+$button-light-color-scheme-secondary-icon: #8c99a5;
+$button-light-color-scheme-secondary-states-active-border: #bdc7d1;
+$button-light-color-scheme-secondary-states-active-background: #bdc7d1;
 $button-light-color-scheme-error-border: #d7dee4;
 $button-light-color-scheme-error-background: #d7dee4;
 $button-light-color-scheme-error-color: #ea5868;
@@ -531,12 +536,12 @@ $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
 $button-dark-color-scheme-primary-transparent-states-active-icon: #a2c7fe;
-$button-dark-color-scheme-second-border: #515e69;
-$button-dark-color-scheme-second-background: #515e69;
-$button-dark-color-scheme-second-color: #f2f5f9;
-$button-dark-color-scheme-second-icon: #8c99a5;
-$button-dark-color-scheme-second-states-active-border: #333f4a;
-$button-dark-color-scheme-second-states-active-background: #333f4a;
+$button-dark-color-scheme-secondary-border: #515e69;
+$button-dark-color-scheme-secondary-background: #515e69;
+$button-dark-color-scheme-secondary-color: #f2f5f9;
+$button-dark-color-scheme-secondary-icon: #8c99a5;
+$button-dark-color-scheme-secondary-states-active-border: #333f4a;
+$button-dark-color-scheme-secondary-states-active-background: #333f4a;
 $button-dark-color-scheme-error-border: #515e69;
 $button-dark-color-scheme-error-background: #515e69;
 $button-dark-color-scheme-error-color: #ea5868;
@@ -1535,15 +1540,15 @@ $tags-light-color-scheme-primary-states-focused: #0374eb;
 $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
 $tags-light-color-scheme-primary-states-disabled-background: mix(#0374eb, transparent, 10%);
 $tags-light-color-scheme-primary-states-disabled-border: transparent;
-$tags-light-color-scheme-second-background: #d7dee4;
-$tags-light-color-scheme-second-border: transparent;
-$tags-light-color-scheme-second-text: #19252f;
-$tags-light-color-scheme-second-icon: #8c99a5;
-$tags-light-color-scheme-second-states-hover-icon: #6d7a86;
-$tags-light-color-scheme-second-states-focused: #0374eb;
-$tags-light-color-scheme-second-states-disabled-text: mix(#8c99a5, transparent, 50%);
-$tags-light-color-scheme-second-states-disabled-background: mix(#8c99a5, transparent, 10%);
-$tags-light-color-scheme-second-states-disabled-border: transparent;
+$tags-light-color-scheme-secondary-background: #d7dee4;
+$tags-light-color-scheme-secondary-border: transparent;
+$tags-light-color-scheme-secondary-text: #19252f;
+$tags-light-color-scheme-secondary-icon: #8c99a5;
+$tags-light-color-scheme-secondary-states-hover-icon: #6d7a86;
+$tags-light-color-scheme-secondary-states-focused: #0374eb;
+$tags-light-color-scheme-secondary-states-disabled-text: mix(#8c99a5, transparent, 50%);
+$tags-light-color-scheme-secondary-states-disabled-background: mix(#8c99a5, transparent, 10%);
+$tags-light-color-scheme-secondary-states-disabled-border: transparent;
 $tags-light-color-scheme-error-background: #ffeaea;
 $tags-light-color-scheme-error-border: transparent;
 $tags-light-color-scheme-error-text: #db3c55;
@@ -1562,15 +1567,15 @@ $tags-dark-color-scheme-primary-states-focused: #4187ff;
 $tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
 $tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
 $tags-dark-color-scheme-primary-states-disabled-border: transparent;
-$tags-dark-color-scheme-second-background: #333f4a;
-$tags-dark-color-scheme-second-border: transparent;
-$tags-dark-color-scheme-second-text: #bdc7d1;
-$tags-dark-color-scheme-second-icon: #8c99a5;
-$tags-dark-color-scheme-second-states-hover-icon: #6d7a86;
-$tags-dark-color-scheme-second-states-focused: #4187ff;
-$tags-dark-color-scheme-second-states-disabled-text: mix(#7f8c98, transparent, 50%);
-$tags-dark-color-scheme-second-states-disabled-background: mix(#7f8c98, transparent, 10%);
-$tags-dark-color-scheme-second-states-disabled-border: transparent;
+$tags-dark-color-scheme-secondary-background: #333f4a;
+$tags-dark-color-scheme-secondary-border: transparent;
+$tags-dark-color-scheme-secondary-text: #bdc7d1;
+$tags-dark-color-scheme-secondary-icon: #8c99a5;
+$tags-dark-color-scheme-secondary-states-hover-icon: #6d7a86;
+$tags-dark-color-scheme-secondary-states-focused: #4187ff;
+$tags-dark-color-scheme-secondary-states-disabled-text: mix(#7f8c98, transparent, 50%);
+$tags-dark-color-scheme-secondary-states-disabled-background: mix(#7f8c98, transparent, 10%);
+$tags-dark-color-scheme-secondary-states-disabled-border: transparent;
 $tags-dark-color-scheme-error-background: #800025;
 $tags-dark-color-scheme-error-border: transparent;
 $tags-dark-color-scheme-error-text: #fcb2b4;
@@ -1755,7 +1760,7 @@ A200: white,
 )
 );
 
-$light-color-scheme-second-palette: (
+$light-color-scheme-secondary-palette: (
 40: #f2f5f9,
 60: #ebeef2,
 100: #d7dee4,
@@ -1953,7 +1958,7 @@ A200: white,
 )
 );
 
-$dark-color-scheme-second-palette: (
+$dark-color-scheme-secondary-palette: (
 40: #f2f5f9,
 60: #ebeef2,
 100: #d7dee4,
@@ -2424,6 +2429,13 @@ $typography-body-mono-font-weight: normal;
 $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-body-mono-text-transform: null;
 $typography-body-mono-font-feature-settings: initial;
+$typography-body-mono-strong-font-size: 15px;
+$typography-body-mono-strong-line-height: 20px;
+$typography-body-mono-strong-letter-spacing: normal;
+$typography-body-mono-strong-font-weight: 500;
+$typography-body-mono-strong-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-body-mono-strong-text-transform: null;
+$typography-body-mono-strong-font-feature-settings: initial;
 $typography-caption-font-size: 13px;
 $typography-caption-line-height: 16px;
 $typography-caption-letter-spacing: -0.0025em;
@@ -2459,6 +2471,13 @@ $typography-caption-mono-font-weight: normal;
 $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-caption-mono-text-transform: null;
 $typography-caption-mono-font-feature-settings: initial;
+$typography-caption-mono-strong-font-size: 13px;
+$typography-caption-mono-strong-line-height: 16px;
+$typography-caption-mono-strong-letter-spacing: normal;
+$typography-caption-mono-strong-font-weight: 500;
+$typography-caption-mono-strong-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-caption-mono-strong-text-transform: null;
+$typography-caption-mono-strong-font-feature-settings: initial;
 $typography-small-text-font-size: 13px;
 $typography-small-text-line-height: 16px;
 $typography-small-text-letter-spacing: -0.0025em;
@@ -2589,6 +2608,15 @@ $mosaic: (
       'text-transform': $typography-body-mono-text-transform,
       'font-feature-settings': $typography-body-mono-font-feature-settings
     ),
+    'body-mono-strong': (
+      'font-size': $typography-body-mono-strong-font-size,
+      'line-height': $typography-body-mono-strong-line-height,
+      'letter-spacing': $typography-body-mono-strong-letter-spacing,
+      'font-weight': $typography-body-mono-strong-font-weight,
+      'font-family': $typography-body-mono-strong-font-family,
+      'text-transform': $typography-body-mono-strong-text-transform,
+      'font-feature-settings': $typography-body-mono-strong-font-feature-settings
+    ),
     'caption': (
       'font-size': $typography-caption-font-size,
       'line-height': $typography-caption-line-height,
@@ -2634,6 +2662,15 @@ $mosaic: (
       'text-transform': $typography-caption-mono-text-transform,
       'font-feature-settings': $typography-caption-mono-font-feature-settings
     ),
+    'caption-mono-strong': (
+      'font-size': $typography-caption-mono-strong-font-size,
+      'line-height': $typography-caption-mono-strong-line-height,
+      'letter-spacing': $typography-caption-mono-strong-letter-spacing,
+      'font-weight': $typography-caption-mono-strong-font-weight,
+      'font-family': $typography-caption-mono-strong-font-family,
+      'text-transform': $typography-caption-mono-strong-text-transform,
+      'font-feature-settings': $typography-caption-mono-strong-font-feature-settings
+    ),
     'small-text': (
       'font-size': $typography-small-text-font-size,
       'line-height': $typography-small-text-line-height,
@@ -2997,7 +3034,6 @@ $md-typography: (
     .layout#{$name},
     .layout#{$name}-column,
     .layout#{$name}-row {
-        box-sizing: border-box;
         display: -webkit-box;
         display: -webkit-flex;
         display: -moz-box;
@@ -3028,13 +3064,13 @@ $md-typography: (
     }
 
     // === flex: 1 1 0%;
-    .#{$flexName}             { flex: 1;         box-sizing: border-box; }
-    .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
-    .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
-    .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
-    .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
-    .#{$flexName}-no-shrink    { flex: 1 0 auto;  box-sizing: border-box; }
-    .#{$flexName}-no-grow      { flex: 0 1 auto;  box-sizing: border-box; }
+    .#{$flexName}             { flex: 1; }
+    .#{$flexName}-grow        { flex: 1 1 100%; }
+    .#{$flexName}-initial     { flex: 0 1 auto; }
+    .#{$flexName}-auto        { flex: 1 1 auto; }
+    .#{$flexName}-none        { flex: 0 0 auto; }
+    .#{$flexName}-no-shrink    { flex: 1 0 auto; }
+    .#{$flexName}-no-grow      { flex: 0 1 auto; }
 
     // (1-20) * 5 = 0-100%
     @for $i from 0 through 20 {
@@ -3044,14 +3080,12 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: #{$value};
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         .layout-row > .#{$flexName}-#{$i * 5} {
             flex: 1 1 100%;
             max-width: #{$value};
             max-height: 100%;
-            box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
             @if $i == 0 {
@@ -3063,14 +3097,12 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: 100%;
             max-height: #{$value};
-            box-sizing: border-box;
         }
 
         .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
             flex: 1 1 100%;
             max-width: #{$value};
             max-height: 100%;
-            box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
             @if $i == 0 {
@@ -3082,7 +3114,6 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: 100%;
             max-height: #{$value};
-            box-sizing: border-box;
 
             // Required by Chrome M48+ due to http://crbug.com/546034
             @if $i == 0 {
@@ -3096,14 +3127,12 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: 33.33%;
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         .flex-66 {
             flex: 1 1 100%;
             max-width: 66.66%;
             max-height: 100%;
-            box-sizing: border-box;
         }
     }
 
@@ -3112,14 +3141,12 @@ $md-typography: (
             flex: 1 1 33.33%;
             max-width: 33.33%;
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         > .#{$flexName}-66 {
             flex: 1 1 66.66%;
             max-width: 66.66%;
             max-height: 100%;
-            box-sizing: border-box;
         }
     }
 
@@ -3128,14 +3155,12 @@ $md-typography: (
             flex: 1 1 33.33%;
             max-width: 100%;
             max-height: 33.33%;
-            box-sizing: border-box;
         }
 
         > .#{$flexName}-66 {
             flex: 1 1 66.66%;
             max-width: 100%;
             max-height: 66.66%;
-            box-sizing: border-box;
         }
     }
 
@@ -3144,14 +3169,12 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: 33.33%;
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         > .#{$flexName}-66 {
             flex: 1 1 100%;
             max-width: 66.66%;
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         // Required by Chrome M48+ due to http://crbug.com/546034
@@ -3165,14 +3188,12 @@ $md-typography: (
             flex: 1 1 100%;
             max-width: 100%;
             max-height: 33.33%;
-            box-sizing: border-box;
         }
 
         > .#{$flexName}-66 {
             flex: 1 1 100%;
             max-width: 100%;
             max-height: 66.66%;
-            box-sizing: border-box;
         }
 
         // Required by Chrome M48+ due to http://crbug.com/546034
@@ -3297,7 +3318,6 @@ $md-typography: (
     .#{$name}-space-between-center > *,
     .#{$name}-space-around-center > * {
         max-width: 100%;
-        box-sizing: border-box;
     }
 
     // Cross Axis End

package/autocomplete/_autocomplete-theme.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+@use '../core/styles/common/popup';
+@use '../core/styles/theming/theming';
+
+
+@mixin mc-autocomplete-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-autocomplete-panel {
+        @include popup.popup-params($theme);
+
+        color: theming.mc-color($foreground, text);
+
+        .mc-selected {
+            $popup: map.get(map.get($theme, components), popup);
+
+            background-color: map.get($popup, background);
+        }
+    }
+}

package/autocomplete/autocomplete-origin.directive.d.ts

@@ -8,5 +8,5 @@ export declare class McAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>;
     constructor(elementRef: ElementRef<HTMLElement>);
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocompleteOrigin, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteOrigin, "[mcAutocompleteOrigin]", ["mcAutocompleteOrigin"], {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteOrigin, "[mcAutocompleteOrigin]", ["mcAutocompleteOrigin"], {}, {}, never, never, false, never>;
 }

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -163,5 +163,5 @@ export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDe
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": "mcAutocomplete"; "connectedTo": "mcAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "mcAutocompleteDisabled"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": "mcAutocomplete"; "connectedTo": "mcAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "mcAutocompleteDisabled"; }, {}, never, never, false, never>;
 }

package/autocomplete/autocomplete.component.d.ts

@@ -69,5 +69,5 @@ export declare class McAutocomplete implements AfterContentInit {
     emitSelectEvent(option: McOption): void;
     onKeydown(event: KeyboardEvent): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McAutocomplete, "mc-autocomplete", ["mcAutocomplete"], { "displayWith": "displayWith"; "panelWidth": "panelWidth"; "classList": "class"; "autoActiveFirstOption": "autoActiveFirstOption"; "openOnFocus": "openOnFocus"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McAutocomplete, "mc-autocomplete", ["mcAutocomplete"], { "displayWith": "displayWith"; "panelWidth": "panelWidth"; "classList": "class"; "autoActiveFirstOption": "autoActiveFirstOption"; "openOnFocus": "openOnFocus"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false, never>;
 }

package/autocomplete/autocomplete.scss

@@ -0,0 +1,63 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-autocomplete-trigger {
+    text-overflow: ellipsis;
+}
+
+.mc-autocomplete-panel {
+    visibility: hidden;
+
+    position: relative;
+
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+
+    margin-top: -1px;
+
+    min-width: 100%;
+    width: 100%;
+    max-width: none;
+
+    max-height: var(--mc-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
+
+    border: {
+        width: 1px;
+        style: solid;
+    }
+
+    border-bottom-left-radius: var(
+        --mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
+    );
+    border-bottom-right-radius: var(
+        --mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
+    );
+
+    padding: var(--mc-autocomplete-size-panel-padding, map.get($tokens, autocomplete-size-panel-padding));
+
+    &.mc-autocomplete_visible {
+        visibility: visible;
+    }
+
+    &.mc-autocomplete_hidden {
+        visibility: hidden;
+    }
+
+    .mc-autocomplete-panel-above & {
+        border-radius:
+            var(--mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
+            var(--mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
+            0 0;
+    }
+
+    // We need to offset horizontal dividers by their height, because
+    // they throw off the keyboard navigation inside the panel.
+    .mc-divider-horizontal {
+        margin-top: -1px;
+    }
+}

package/button/_button-base.scss

@@ -0,0 +1,63 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/button';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+%mc-button-base {
+    @include button.mc-button-reset();
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0; /* Safari */
+
+    height: var(--mc-button-size-height, map.get($tokens, button-size-height));
+    min-height: var(--mc-button-size-height, map.get($tokens, button-size-height));
+
+    white-space: nowrap;
+
+    text-decoration: none;
+    text-align: center;
+
+    vertical-align: baseline;
+
+    border: var(--mc-button-size-border-width, map.get($tokens, button-size-border-width)) solid transparent;
+    border-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    &[disabled] {
+        cursor: default;
+    }
+
+    &.cdk-focused {
+        z-index: 1;
+    }
+
+    & .mc-button-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    & .mc-icon_left {
+        margin-right: var(
+            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
+        );
+    }
+}