myrta-ui 13.0.3 → 13.0.5

package/README.md

@@ -14,5 +14,3 @@ ng build myrta-ui
 
 # Команда публикации проекта
 npm publish --tag angular-13
-
-style-dictionary build

package/esm2020/lib/components/button/button.component.mjs

@@ -71,10 +71,10 @@ export class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "mrx-button", inputs: { size: "size", type: "type", color: "color", iconPosition: "iconPosition", active: "active", disabled: "disabled", isLoading: "isLoading", iconOnly: "iconOnly", customClasses: "customClasses", label: "label", icon: "icon", iconClass: "iconClass", buttonType: "buttonType", href: "href", target: "target", routerLink: "routerLink", queryParams: "queryParams" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<ng-template #contentTemplate>\r\n  <ng-template #spinner>\r\n    <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n    <div\r\n      [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n      [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-btn-label\">{{ getLabel }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n    <div\r\n      [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n      [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n      (click)=\"$event.preventDefault()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n  <a\r\n    *ngSwitchCase=\"!!href\"\r\n    [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [href]=\"href\"\r\n    [target]=\"target\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <a\r\n    *ngSwitchCase=\"!!routerLink\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [queryParams]=\"queryParams\"\r\n    [routerLink]=\"routerLink\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <button\r\n    *ngSwitchDefault\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"buttonType\"\r\n    class=\"mrx-btn\"\r\n    (click)=\"buttonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex}.mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent;border-left:none;border-right:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"], components: [{ type: i1.LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": i4.SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "mrx-button", inputs: { size: "size", type: "type", color: "color", iconPosition: "iconPosition", active: "active", disabled: "disabled", isLoading: "isLoading", iconOnly: "iconOnly", customClasses: "customClasses", label: "label", icon: "icon", iconClass: "iconClass", buttonType: "buttonType", href: "href", target: "target", routerLink: "routerLink", queryParams: "queryParams" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<ng-template #contentTemplate>\r\n  <ng-template #spinner>\r\n    <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n    <div\r\n      [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n      [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-btn-label\">{{ getLabel }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n    <div\r\n      [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n      [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n      (click)=\"$event.preventDefault()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n  <a\r\n    *ngSwitchCase=\"!!href\"\r\n    [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [href]=\"href\"\r\n    [target]=\"target\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <a\r\n    *ngSwitchCase=\"!!routerLink\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [queryParams]=\"queryParams\"\r\n    [routerLink]=\"routerLink\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <button\r\n    *ngSwitchDefault\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"buttonType\"\r\n    class=\"mrx-btn\"\r\n    (click)=\"buttonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex}.mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent;border-left:none;border-right:none}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"], components: [{ type: i1.LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": i4.SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTemplate>\r\n  <ng-template #spinner>\r\n    <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n    <div\r\n      [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n      [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-btn-label\">{{ getLabel }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n    <div\r\n      [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n      [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n      (click)=\"$event.preventDefault()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n  <a\r\n    *ngSwitchCase=\"!!href\"\r\n    [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [href]=\"href\"\r\n    [target]=\"target\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <a\r\n    *ngSwitchCase=\"!!routerLink\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [queryParams]=\"queryParams\"\r\n    [routerLink]=\"routerLink\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <button\r\n    *ngSwitchDefault\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"buttonType\"\r\n    class=\"mrx-btn\"\r\n    (click)=\"buttonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex}.mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent;border-left:none;border-right:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"] }]
+            args: [{ selector: 'mrx-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTemplate>\r\n  <ng-template #spinner>\r\n    <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n    <div\r\n      [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n      [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n    [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n    [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-btn-label\">{{ getLabel }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    class=\"icon-wrapper\"\r\n  >\r\n    <span\r\n      [class.icon-font-16]=\"size === 'small'\"\r\n      [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n      [class]=\"iconClass\"\r\n      class=\"mrx-icon\"\r\n    ></span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"icon && isIconRight && !isLoading\"\r\n    [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n    [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n    [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n  ></div>\r\n\r\n  <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n    <div\r\n      [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n      [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n      class=\"icon-wrapper\"\r\n      (click)=\"$event.preventDefault()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n  <a\r\n    *ngSwitchCase=\"!!href\"\r\n    [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [href]=\"href\"\r\n    [target]=\"target\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <a\r\n    *ngSwitchCase=\"!!routerLink\"\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [queryParams]=\"queryParams\"\r\n    [routerLink]=\"routerLink\"\r\n    class=\"mrx-btn\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </a>\r\n\r\n  <button\r\n    *ngSwitchDefault\r\n    [class.active]=\"active\"\r\n    [class.icon-loading]=\"isLoading && !disabled\"\r\n    [class.icon-only]=\"iconOnly\"\r\n    [class]=\"getClasses\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"buttonType\"\r\n    class=\"mrx-btn\"\r\n    (click)=\"buttonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex}.mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent;border-left:none;border-right:none}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm.mrx-btn-tertiary{padding-left:0;padding-right:0;min-width:auto}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], type: [{