@ptsecurity/mosaic 14.7.1 → 15.0.0

package/timezone/timezone-select.component.d.ts

@@ -3,12 +3,12 @@ import { McSelect, McSelectSearch } from '@ptsecurity/mosaic/select';
 import * as i0 from "@angular/core";
 export declare class McTimezoneSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimezoneSelectTrigger, "mc-timezone-select-trigger", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimezoneSelectTrigger, "mc-timezone-select-trigger", never, {}, {}, never, never, false, never>;
 }
 export declare class McTimezoneSelect extends McSelect {
     customTrigger: McTimezoneSelectTrigger;
     cleaner: McCleaner;
     search: McSelectSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTimezoneSelect, "mc-timezone-select", ["mcTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["mc-timezone-select-trigger", "mc-cleaner", "[mcSelectSearch]", "[mc-select-search-empty-result]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTimezoneSelect, "mc-timezone-select", ["mcTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["mc-timezone-select-trigger", "mc-cleaner", "[mcSelectSearch]", "[mc-select-search-empty-result]", "*"], false, never>;
 }

package/toast/_toast-theme.scss

@@ -0,0 +1,64 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+@mixin mc-toast-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $toast: map.get(map.get($theme, components), toast);
+
+    .mc-toast {
+        &.mc-toast_info .mc-toast__icon {
+            color: map.get($toast, icon_info);
+        }
+
+        &.mc-toast_success .mc-toast__icon {
+            color: map.get($toast, icon_success);
+        }
+
+        &.mc-toast_warning .mc-toast__icon {
+            color: map.get($toast, icon_warning);
+        }
+
+        &.mc-toast_error .mc-toast__icon {
+            color: map.get($toast, icon_error);
+        }
+    }
+
+    .mc-toast__wrapper {
+        border-color: map.get($toast, border);
+
+        background: map.get($toast, background);
+
+        box-shadow: map.get($toast, shadow);
+    }
+
+    .mc-toast__title {
+        color: map.get($toast, text);
+    }
+
+    .mc-toast__caption {
+        color: map.get($toast, text-caption);
+    }
+}
+
+@mixin mc-toast-typography($config) {
+    .mc-toast {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    .mc-toast__title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+    }
+
+    .mc-toast__caption {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
+    }
+}

package/toast/toast-container.component.d.ts

@@ -11,5 +11,5 @@ export declare class McToastContainerComponent {
     remove(viewRef: ViewRef): void;
     getInjector(data: McToastData): Injector;
     static ɵfac: i0.ɵɵFactoryDeclaration<McToastContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McToastContainerComponent, "mc-toast-container", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McToastContainerComponent, "mc-toast-container", never, {}, {}, never, never, false, never>;
 }

package/toast/toast-container.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+@use '../core/styles/variables';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.mc-toast-container {
+    display: flex;
+    flex-direction: column;
+
+    gap: var(--mc-toast-size-gap, map.get($tokens, toast-size-gap));
+}
+
+.cdk-overlay-container {
+    .mc-toast-overlay,
+    .mc-toast-overlay ~ *:not(.mc-modal-overlay, .mc-sidepanel-overlay) {
+        z-index: variables.$z-index-notification;
+    }
+}

package/toast/toast.component.d.ts

@@ -31,5 +31,5 @@ export declare class McToastComponent implements OnDestroy {
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<McToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McToastComponent, "mc-toast", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McToastComponent, "mc-toast", never, {}, {}, never, never, false, never>;
 }

package/toast/toast.component.scss

@@ -0,0 +1,76 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/variables' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-toast {
+    box-sizing: border-box;
+
+    z-index: $z-index-toast;
+
+    max-height: 200px;
+    height: auto;
+}
+
+.mc-toast__wrapper {
+    box-sizing: border-box;
+
+    display: flex;
+    flex: 1 1 auto;
+
+    width: var(--mc-toast-size-width, map.get($tokens, toast-size-width));
+
+    padding-right: var(--mc-toast-size-padding-right, map.get($tokens, toast-size-padding-right));
+    padding-left: var(--mc-toast-size-padding-left, map.get($tokens, toast-size-padding-left));
+
+    border-width: var(--mc-toast-size-border-width, map.get($tokens, toast-size-border-width));
+    border-style: solid;
+    border-radius: var(--mc-toast-size-border-radius, map.get($tokens, toast-size-border-radius));
+}
+
+.mc-toast__icon-container {
+    padding-right: var(--mc-toast-size-icon-margin, map.get($tokens, toast-size-icon-margin));
+
+    padding-top: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-bottom: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+}
+
+.mc-toast__container {
+    width: 100%;
+
+    padding-top: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-bottom: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+}
+
+.mc-toast__title {
+    & > p {
+        margin: 0;
+    }
+}
+
+.mc-toast__content {
+    display: flex;
+    flex-direction: column;
+}
+
+.mc-toast__actions {
+    margin-top: var(--mc-toast-size-actionbar-margin, map.get($tokens, toast-size-actionbar-margin));
+
+    & > * {
+        margin-right: var(--mc-toast-size-actionbar-gap, map.get($tokens, toast-size-actionbar-gap));
+    }
+}
+
+.mc-toast__close {
+    float: right;
+
+    width: var(--mc-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+    height: var(--mc-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+
+    margin: -6px -8px -6px 8px;
+}

package/toggle/_toggle-theme.scss

@@ -0,0 +1,82 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-toggle-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, primary);
+    $error: map.get($theme, error);
+
+    $toggle: map.get(map.get($theme, components), toggle);
+
+    .mc-toggle {
+        color: map.get($foreground, text);
+
+        .mc-toggle-bar {
+            border-color: map.get($toggle, border);
+
+            background: map.get($toggle, background);
+        }
+
+        .mc-toggle__circle {
+            border-color: map.get($toggle, circle_border);
+
+            background: map.get($toggle, circle_background);
+        }
+
+        &:hover {
+            & .mc-toggle__overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            & .mc-toggle__overlay {
+                box-shadow: map.get($toggle, focused);
+            }
+        }
+
+        &.mc-active {
+            &.mc-primary {
+                .mc-toggle-bar {
+                    border-color: map.get(map.get($toggle, primary), checked_border);
+                    background: map.get(map.get($toggle, primary), checked_background);
+                }
+            }
+
+            &.mc-error {
+                .mc-toggle-bar {
+                    border-color: map.get(map.get($toggle, error), checked_border);
+                    background: map.get(map.get($toggle, error), checked_background);
+                }
+            }
+        }
+
+        &.mc-disabled {
+            color: map.get($foreground, text-disabled);
+
+            & .mc-toggle__overlay {
+                background: mc-color($background, overlay-disabled);
+            }
+        }
+    }
+}
+
+@mixin mc-toggle-typography($config) {
+    .mc-toggle:not(.mc-toggle_small) {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-default));
+    }
+
+    .mc-toggle.mc-toggle_small {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-small-font-default));
+    }
+}

package/toggle/toggle.component.d.ts

@@ -51,6 +51,6 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     private updateModelValue;
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<McToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": "color"; "tabIndex": "tabIndex"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "disabled": "disabled"; "checked": "checked"; }, { "change": "change"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": "color"; "tabIndex": "tabIndex"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "disabled": "disabled"; "checked": "checked"; }, { "change": "change"; }, never, ["*"], false, never>;
 }
 export {};

package/toggle/toggle.scss

@@ -0,0 +1,124 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-toggle {
+    display: inline-block;
+
+    .mc-toggle-layout {
+        cursor: inherit;
+        align-items: baseline;
+        vertical-align: middle;
+        display: inline-flex;
+        white-space: nowrap;
+    }
+
+    .mc-toggle-bar {
+        box-sizing: border-box;
+
+        position: relative;
+
+        border: {
+            width: 1px;
+            style: solid;
+        }
+
+        &.mc-toggle-label-position-left {
+            order: 1;
+        }
+    }
+
+    .mc-toggle-bar-container {
+        position: relative;
+    }
+}
+
+.mc-toggle__container {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &.left {
+        flex-direction: row-reverse;
+    }
+}
+
+.mc-toggle__content {
+    &.left {
+        margin-right: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+    }
+
+    &.right {
+        margin-left: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+    }
+}
+
+.mc-toggle__circle {
+    box-sizing: border-box;
+
+    position: absolute;
+
+    border: {
+        width: 1px;
+        style: solid;
+        radius: 100%;
+    }
+
+    margin-top: -1px;
+    margin-left: -1px;
+    transform: translateX(-1px); // due to EDGE animation features
+}
+
+.mc-toggle__overlay {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.mc-toggle:not(.mc-toggle_small) {
+    .mc-toggle-bar {
+        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
+        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
+        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
+    }
+
+    .mc-toggle__overlay {
+        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
+        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
+        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
+    }
+
+    .mc-toggle__circle {
+        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
+        width: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
+    }
+}
+
+.mc-toggle.mc-toggle_small {
+    .mc-toggle-bar {
+        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
+        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
+    }
+
+    .mc-toggle__overlay {
+        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
+        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
+    }
+
+    .mc-toggle__circle {
+        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+        width: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+    }
+}
+
+.mc-toggle:not(.mc-disabled) {
+    cursor: pointer;
+}

package/tooltip/_tooltip-theme.scss

@@ -0,0 +1,104 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/pop-up/pop-up' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-tooltip-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $tooltip: map.get(map.get($theme, components), tooltip);
+
+    .mc-tooltip {
+        box-shadow: map.get($tooltip, shadow);
+    }
+
+    .mc-tooltip.mc-tooltip_default {
+        & .mc-tooltip__inner {
+            color: map.get($tooltip, color);
+
+            background-color: map.get($tooltip, background);
+        }
+
+        & .mc-tooltip__arrow {
+            background-color: map.get($tooltip, background);
+        }
+    }
+
+    .mc-tooltip.mc-tooltip_extended {
+        $tooltip_extended: map.get($tooltip, extended);
+
+        $background: map.get($tooltip_extended, background);
+        $border-color: map.get($tooltip_extended, border-color);
+
+        & .mc-tooltip__inner {
+            border: 1px solid $border-color;
+
+            color: map.get($tooltip_extended, color);
+
+            background-color: map.get($tooltip_extended, background);
+        }
+
+        & .mc-tooltip__header {
+            color: map.get($tooltip_extended, header-color);
+
+            background-color: map.get($tooltip_extended, header-background);
+
+            border-bottom: 1px solid map.get($tooltip_extended, header-border-color);
+        }
+
+        & .mc-tooltip__arrow {
+            border: 1px solid transparent;
+
+            background-color: $background;
+        }
+
+        @include popup-arrow-borders-color(mc-tooltip, $border-color);
+    }
+
+    .mc-tooltip.mc-tooltip_warning {
+        $tooltip_warning: map.get($tooltip, warning);
+
+        $color: map.get($tooltip_warning, color);
+        $background: map.get($tooltip_warning, background);
+        $border-color: map.get($tooltip_warning, border-color);
+
+        & .mc-tooltip__inner {
+            border: 1px solid $border-color;
+
+            color: $color;
+
+            background-color: $background;
+        }
+
+        & .mc-tooltip__arrow {
+            border: 1px solid transparent;
+
+            background-color: $background;
+        }
+
+        @include popup-arrow-borders-color(mc-tooltip, $border-color);
+    }
+}
+
+@mixin mc-tooltip-typography($config) {
+    .mc-tooltip {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+    }
+
+    .mc-tooltip_extended {
+        & .mc-tooltip__content {
+            @include mc-typography-level-to-styles($config, map.get($tokens, extended-tooltip-font-default));
+        }
+
+        & .mc-tooltip__header {
+            @include mc-typography-level-to-styles($config, map.get($tokens, extended-tooltip-header-font-default));
+        }
+    }
+}

package/tooltip/tooltip.component.d.ts

@@ -26,7 +26,7 @@ export declare class McTooltipComponent extends McPopUp {
         modifier: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTooltipComponent, "mc-tooltip-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTooltipComponent, "mc-tooltip-component", never, {}, {}, never, never, false, never>;
 }
 export declare const MC_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
@@ -66,7 +66,7 @@ export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent>
     getOverlayHandleComponentType(): Type<McTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": "mcVisible"; "tooltipPlacement": "mcPlacement"; "tooltipPlacementPriority": "mcPlacementPriority"; "content": "mcTooltip"; "disabled": "mcTooltipDisabled"; "enterDelay": "mcEnterDelay"; "leaveDelay": "mcLeaveDelay"; "trigger": "mcTrigger"; "customClass": "mcTooltipClass"; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": "mcVisible"; "tooltipPlacement": "mcPlacement"; "tooltipPlacementPriority": "mcPlacementPriority"; "content": "mcTooltip"; "disabled": "mcTooltipDisabled"; "enterDelay": "mcEnterDelay"; "leaveDelay": "mcLeaveDelay"; "trigger": "mcTrigger"; "customClass": "mcTooltipClass"; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
 }
 export declare class McWarningTooltipTrigger extends McTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -74,7 +74,7 @@ export declare class McWarningTooltipTrigger extends McTooltipTrigger {
     protected modifier: TooltipModifier;
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     static ɵfac: i0.ɵɵFactoryDeclaration<McWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McWarningTooltipTrigger, "[mcWarningTooltip]", ["mcWarningTooltip"], { "content": "mcWarningTooltip"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McWarningTooltipTrigger, "[mcWarningTooltip]", ["mcWarningTooltip"], { "content": "mcWarningTooltip"; }, {}, never, never, false, never>;
 }
 export declare class McExtendedTooltipTrigger extends McTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -86,5 +86,5 @@ export declare class McExtendedTooltipTrigger extends McTooltipTrigger {
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     updateData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": "mcExtendedTooltip"; "header": "mcTooltipHeader"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": "mcExtendedTooltip"; "header": "mcTooltipHeader"; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip.scss

@@ -0,0 +1,75 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/variables' as *;
+@use '../core/pop-up/pop-up';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tooltip__inner {
+    border-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    word-break: break-all;
+}
+
+.mc-tooltip {
+    box-sizing: border-box;
+
+    border-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+
+    z-index: $z-index-tooltip;
+
+    white-space: pre-line;
+
+    $trigger-margin: calc(var(--mc-tooltip-size-trigger-margin, #{map.get($tokens, tooltip-size-trigger-margin)}));
+
+    @include pop-up.popup-margins(mc-tooltip, $trigger-margin);
+
+    &.mc-tooltip_default,
+    &.mc-tooltip_warning {
+        max-width: var(--mc-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+
+        .mc-tooltip__inner {
+            padding: var(--mc-tooltip-size-padding, map.get($tokens, tooltip-size-padding));
+        }
+    }
+
+    &.mc-tooltip_extended {
+        max-height: var(--mc-extended-tooltip-size-max-height, map.get($tokens, extended-tooltip-size-max-height));
+
+        .mc-tooltip__header {
+            height: var(
+                --mc-extended-tooltip-header-size-height, map.get($tokens, extended-tooltip-header-size-height)
+            );
+            padding: var(
+                --mc-extended-tooltip-header-size-padding, map.get($tokens, extended-tooltip-header-size-padding)
+            );
+            box-sizing: border-box;
+
+            border-top-left-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+            border-top-right-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+        }
+
+        .mc-tooltip__content {
+            padding: var(--mc-extended-tooltip-size-padding, map.get($tokens, extended-tooltip-size-padding));
+        }
+    }
+}
+
+.mc-tooltip__arrow {
+    position: absolute;
+
+    width: var(--mc-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    height: var(--mc-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+
+    transform: rotate(45deg);
+}
+
+$arrow-offset: calc((var(--mc-tooltip-size-arrow-size, #{map.get($tokens, tooltip-size-arrow-size)}) - 1px) / -2);
+$arrow-padding: calc(
+    18px - (var(--mc-tooltip-size-trigger-margin, #{map.get($tokens, tooltip-size-trigger-margin)}) / 2)
+);
+
+@include pop-up.popup-arrow-positions(mc-tooltip, $arrow-offset, $arrow-padding);