myrta-ui 13.0.8 → 13.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2020/lib/components/button/button.component.mjs +3 -3
  2. package/esm2020/lib/components/gallery/components/gallery-item/gallery-item.component.mjs +24 -19
  3. package/esm2020/lib/components/gallery/models/gallery-item.model.mjs +3 -3
  4. package/esm2020/lib/components/gallery/services/gallery.service.mjs +2 -2
  5. package/fesm2015/myrta-ui.mjs +28 -26
  6. package/fesm2015/myrta-ui.mjs.map +1 -1
  7. package/fesm2020/myrta-ui.mjs +28 -23
  8. package/fesm2020/myrta-ui.mjs.map +1 -1
  9. package/lib/components/gallery/models/gallery-item.model.d.ts +8 -13
  10. package/package.json +1 -1
package/fesm2015/myrta-ui.mjs CHANGED
@@ -210,10 +210,10 @@ class ButtonComponent {
210
210
  }
211
211
  }
212
212
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
213
- 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.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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}: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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.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: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
213
+ 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\">\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\">\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.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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}: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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.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: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
214
214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
215
215
  type: Component,
216
- 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.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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}: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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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"] }]
216
+ 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\">\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\">\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.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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}: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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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"] }]
217
217
  }], propDecorators: { size: [{
218
218
  type: Input
219
219
  }], type: [{
@@ -4685,10 +4685,7 @@ class GalleryService {
4685
4685
  return this.http.delete(`${url}/${uuid}`);
4686
4686
  }
4687
4687
  update(url, uuid, payload) {
4688
- return this.http.put(`${url}`, {
4689
- uuid: uuid,
4690
- [payload.field]: payload.value
4691
- });
4688
+ return this.http.put(`${url}`, Object.assign({ uuid: uuid }, payload));
4692
4689
  }
4693
4690
  }
4694
4691
  GalleryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4703,8 +4700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
4703
4700
  var ChangeableField;
4704
4701
  (function (ChangeableField) {
4705
4702
  ChangeableField["Description"] = "description";
4706
- ChangeableField["Date"] = "date";
4707
- ChangeableField["Counterparties"] = "counterparties";
4703
+ ChangeableField["EventDate"] = "eventDate";
4704
+ ChangeableField["Counterparties"] = "counterpartySelectedIds";
4708
4705
  })(ChangeableField || (ChangeableField = {}));
4709
4706
 
4710
4707
  class GalleryConfirmModalComponent extends SimpleModalComponent {
@@ -6147,28 +6144,28 @@ class GalleryItemComponent {
6147
6144
  return this.preview.counterparties.map(item => item.text).join(', ');
6148
6145
  }
6149
6146
  get isErrorMinDate() {
6150
- if (!this.preview.date) {
6147
+ if (!this.preview.eventDate) {
6151
6148
  return false;
6152
6149
  }
6153
- const factDate = new Date(this.preview.date);
6150
+ const factDate = new Date(this.preview.eventDate);
6154
6151
  return !!this.minDate ? new Date(this.minDate).getTime() > factDate.getTime() : false;
6155
6152
  }
6156
6153
  get isErrorMaxDate() {
6157
- if (!this.preview.date) {
6154
+ if (!this.preview.eventDate) {
6158
6155
  return false;
6159
6156
  }
6160
- const factDate = new Date(this.preview.date);
6157
+ const factDate = new Date(this.preview.eventDate);
6161
6158
  return !!this.maxDate ? new Date(this.maxDate).getTime() < factDate.getTime() : false;
6162
6159
  }
6163
6160
  get isDateInvalid() {
6164
6161
  return (this.isErrorMinDate || this.isErrorMaxDate) ||
6165
- (!this.preview.date && this.requiredDate);
6162
+ (!this.preview.eventDate && this.requiredDate);
6166
6163
  }
6167
6164
  get dateInvalidMessage() {
6168
- if (!this.preview.date) {
6165
+ if (!this.preview.eventDate) {
6169
6166
  return '';
6170
6167
  }
6171
- const factDate = new Date(this.preview.date);
6168
+ const factDate = new Date(this.preview.eventDate);
6172
6169
  const minDate = this.minDate ? new Date(this.minDate) : null;
6173
6170
  const maxDate = this.maxDate ? new Date(this.maxDate) : null;
6174
6171
  if (minDate && minDate.getTime() > factDate.getTime()) {
@@ -6205,28 +6202,33 @@ class GalleryItemComponent {
6205
6202
  }
6206
6203
  changeField(field, obj) {
6207
6204
  clearTimeout(this._timer);
6208
- this._store.dispatch(autosaveAddId({ id: obj.id }));
6209
- this._store.dispatch(autosaveStartFor({ id: obj.id }));
6205
+ this.preview[field] = obj.value;
6206
+ this._store.dispatch(autosaveAddId({ id: obj.id, groupId: this.preview.uuid }));
6207
+ this._store.dispatch(autosaveStartFor({ id: obj.id, groupId: this.preview.uuid }));
6210
6208
  this._timer = setTimeout(() => {
6211
- const updateData = { [field]: obj.value };
6212
- const payload = {
6213
- field: field,
6214
- value: obj.value
6209
+ const updateData = {
6210
+ description: this.preview.description
6215
6211
  };
6216
- this.galleryService.update(this.updateEndPoint, this.preview.uuid, payload).subscribe(res => {
6212
+ if (this.preview.eventDate) {
6213
+ updateData.eventDate = this.preview.eventDate;
6214
+ }
6215
+ if (this.preview.counterpartySelectedIds) {
6216
+ updateData.counterpartySelectedIds = this.preview.counterpartySelectedIds;
6217
+ }
6218
+ this.galleryService.update(this.updateEndPoint, this.preview.uuid, updateData).subscribe(res => {
6217
6219
  this.updatePhoto.emit(res);
6218
- this._store.dispatch(autosaveSuccessFor({ id: obj.id }));
6220
+ this._store.dispatch(autosaveSuccessFor({ id: obj.id, groupId: this.preview.uuid }));
6219
6221
  }, () => {
6220
- this._store.dispatch(autosaveErrorFor({ id: obj.id }));
6222
+ this._store.dispatch(autosaveErrorFor({ id: obj.id, groupId: this.preview.uuid }));
6221
6223
  });
6222
6224
  }, 1500);
6223
6225
  }
6224
6226
  }
6225
6227
  GalleryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryItemComponent, deps: [{ token: GalleryService }, { token: i2$2.SimpleModalService }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component });
6226
- GalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: { preview: "preview", index: "index", isEditing: "isEditing", descriptionMaxLength: "descriptionMaxLength", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", rotateSlides: "rotateSlides", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", setIsLoading: ["isLoading", "setIsLoading"] }, outputs: { openGalleryModal: "openGalleryModal", deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, providers: [MrxAutosaveService], ngImport: i0, template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.date\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.Date, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.date | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "disabled", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: ["fields", "size", "format", "locale", "customClasses", "dateLabel", "timeLabel", "datePlaceholder", "placeholder", "disabled", "readonly", "required", "timepicker", "minDate", "maxDate", "inline", "closable", "leadZeroDateTime", "mask", "container", "validationType", "disableValidation", "invalid", "invalidMessage", "checkInvalid", "isShowMessages"], outputs: ["changed", "modelChange"] }, { type: InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "hideSelected", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched", "cleared"] }, { type: InputTextareaComponent, selector: "mrx-input-textarea", inputs: ["fields", "disabled", "readonly", "autosize", "maxlength", "minlength", "rows", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "allowPattern"], outputs: ["changed", "blurred", "modelChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "async": i1$1.AsyncPipe, "dateFormat": DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6228
+ GalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: { preview: "preview", index: "index", isEditing: "isEditing", descriptionMaxLength: "descriptionMaxLength", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", rotateSlides: "rotateSlides", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", setIsLoading: ["isLoading", "setIsLoading"] }, outputs: { openGalleryModal: "openGalleryModal", deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, providers: [MrxAutosaveService], ngImport: i0, template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.eventDate\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.EventDate, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.eventDate | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "disabled", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: ["fields", "size", "format", "locale", "customClasses", "dateLabel", "timeLabel", "datePlaceholder", "placeholder", "disabled", "readonly", "required", "timepicker", "minDate", "maxDate", "inline", "closable", "leadZeroDateTime", "mask", "container", "validationType", "disableValidation", "invalid", "invalidMessage", "checkInvalid", "isShowMessages"], outputs: ["changed", "modelChange"] }, { type: InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "hideSelected", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched", "cleared"] }, { type: InputTextareaComponent, selector: "mrx-input-textarea", inputs: ["fields", "disabled", "readonly", "autosize", "maxlength", "minlength", "rows", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "allowPattern"], outputs: ["changed", "blurred", "modelChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "async": i1$1.AsyncPipe, "dateFormat": DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6227
6229
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryItemComponent, decorators: [{
6228
6230
  type: Component,
6229
- args: [{ selector: 'mrx-gallery-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MrxAutosaveService], template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.date\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.Date, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.date | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"] }]
6231
+ args: [{ selector: 'mrx-gallery-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MrxAutosaveService], template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.eventDate\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.EventDate, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.eventDate | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"] }]
6230
6232
  }], ctorParameters: function () { return [{ type: GalleryService }, { type: i2$2.SimpleModalService }, { type: i2$1.Store }]; }, propDecorators: { preview: [{
6231
6233
  type: Input
6232
6234
  }], index: [{