@muraldevkit/ui-toolkit 4.4.0 → 4.4.2
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.
package/dist/styles.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.MrlAvatar-content--E7qX_{border:var(--mrl-stroke-02) solid rgba(0,0,0,0);border-radius:var(--mrl-radii-03);display:block;font-size:var(--mrl-font-size-04);font-weight:var(--mrl-font-weight-04);height:100%;line-height:2.875rem;max-width:100%;overflow:hidden;text-align:center;width:100%}.MrlAvatar-content--E7qX_ .MrlSvgContainer{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar--e8VFH{border-radius:var(--mrl-radii-03);box-shadow:0 0 1px 1px rgba(0,0,0,.04) inset;box-sizing:border-box;display:block;height:var(--mrl-spacing-10);position:relative;width:var(--mrl-spacing-10)}.MrlAvatar--xsmall--jn6uR{height:var(--mrl-spacing-07);width:var(--mrl-spacing-07)}.MrlAvatar--xsmall--jn6uR .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.375rem}.MrlAvatar--small--DdBZ7{height:var(--mrl-spacing-08);width:var(--mrl-spacing-08)}.MrlAvatar--small--DdBZ7 .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.875rem}.MrlAvatar--large--eT7KW{border-radius:var(--mrl-radii-06);height:var(--mrl-spacing-13);width:var(--mrl-spacing-13)}.MrlAvatar--large--eT7KW .MrlAvatar-content--E7qX_{border-radius:var(--mrl-radii-06);font-size:var(--mrl-font-size-07);line-height:5.875rem}.MrlAvatar-image--lWg5A{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar-icon-container--xUwiS{border-radius:1rem;bottom:-0.1875rem;color:var(--mrl-color-background);position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v{display:block;left:50%;position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v .mrl-svg{margin:0}.MrlAvatar-icon-container--small--_IFIA{height:1rem;right:-0.1875rem;width:1rem}.MrlAvatar-icon-container--small--_IFIA .MrlAvatar-icon--tfC5v{height:1rem;margin-left:-0.3125rem;top:0;width:.625rem}.MrlAvatar-icon-container--xsmall--oIGsd{border-radius:.75rem;height:.75rem;right:-0.125rem;width:.75rem}.MrlAvatar-icon-container--xsmall--oIGsd .MrlAvatar-icon--tfC5v{height:.5rem;margin-left:-0.225rem;top:-0.1rem;width:.5rem}
|
|
2
2
|
.mrl-u-focus-wrapper--l91TH{position:relative}.MrlAvatarButton--b_ja8{background-color:rgba(0,0,0,0);border:none;border-radius:var(--mrl-radii-03);margin:0;outline:none;padding:0;position:relative}.MrlAvatarButton--b_ja8::after{background-color:rgba(0,0,0,0);border-radius:var(--mrl-radii-03);content:"";display:block;inset:0;position:absolute}.MrlAvatarButton--b_ja8:focus-visible{position:relative}.MrlAvatarButton--b_ja8:focus-visible:focus-visible{outline:none}.MrlAvatarButton--b_ja8:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vEDGJ;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--vEDGJ{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--inA8c{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlAvatarButton--b_ja8:hover{cursor:pointer}.MrlAvatarButton--b_ja8:hover::after{background-color:rgba(var(--mrl-gray-90), 0.32)}.MrlAvatarButton--b_ja8:active::after{background-color:rgba(var(--mrl-gray-90), 0.64)}.MrlAvatarButton--large--m1iPW{border-radius:var(--mrl-radii-06)}.MrlAvatarButton--large--m1iPW:focus-visible{position:relative}.MrlAvatarButton--large--m1iPW:focus-visible:focus-visible{outline:none}.MrlAvatarButton--large--m1iPW:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vEDGJ;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-radii-06) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--vEDGJ{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--inA8c{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlAvatarButton--large--m1iPW::after{border-radius:var(--mrl-radii-06)}
|
|
3
3
|
.MrlBadge--qJnMn{align-items:center;background-color:var(--mrl-black-opacity-01);border-radius:var(--mrl-radii-04);color:var(--mrl-color-text-emph);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-06);padding:var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));width:auto}.MrlBadge--qJnMn .MrlSvgContainer{flex-shrink:0;height:var(--mrl-spacing-04);margin-left:var(--mrl-spacing-02);width:var(--mrl-spacing-04)}.MrlBadge--error--bn1gA{background-color:var(--mrl-color-background-error-light);color:var(--mrl-color-text-error)}.MrlBadge--info--sHw3k{background-color:var(--mrl-color-background-info-light);color:rgb(var(--mrl-status-info))}.MrlBadge--success--xHWDK{background-color:var(--mrl-color-background-success-light);color:rgb(var(--mrl-status-success))}.MrlBadge--warning--L7ZsA{background-color:var(--mrl-color-background-warning-light);color:var(--mrl-color-text-warning-light)}.MrlBadge--warning--L7ZsA .MrlSvgContainer{color:rgb(var(--mrl-status-warning))}
|
|
4
|
-
.MrlBadgeNotification--eAK4M{align-items:center;background-color:rgb(var(--mrl-gray-90));border:var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));border-radius:var(--mrl-radii-04);box-sizing:border-box;color:var(--mrl-color-text-inverse);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-03);padding:0;width:var(--mrl-spacing-03)}.MrlBadgeNotification--info--YY6Sg{background-color:var(--mrl-color-background-info)}.MrlBadgeNotification--numeric--jVYpk{font-size:.5625rem;height:var(--mrl-spacing-05);padding:0 var(--mrl-spacing-01);width:var(--mrl-spacing-05)}.mrlButton .MrlBadgeNotification--eAK4M,.mrlIconButton .MrlBadgeNotification--eAK4M{position:absolute;right:0;top:0}.mrlButton .MrlBadgeNotification--numeric--jVYpk,.mrlIconButton .MrlBadgeNotification--numeric--jVYpk{right:calc(var(--mrl-spacing-01)*-1);top:calc(var(--mrl-spacing-01)*-1)}
|
|
4
|
+
.MrlBadgeNotification--eAK4M{align-items:center;background-color:rgb(var(--mrl-gray-90));border:var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));border-radius:var(--mrl-radii-04);box-sizing:border-box;color:var(--mrl-color-text-inverse);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-03);justify-content:center;padding:0;width:var(--mrl-spacing-03)}.MrlBadgeNotification--info--YY6Sg{background-color:var(--mrl-color-background-info)}.MrlBadgeNotification--numeric--jVYpk{font-size:.5625rem;height:var(--mrl-spacing-05);padding:0 var(--mrl-spacing-01);width:var(--mrl-spacing-05)}.mrlButton .MrlBadgeNotification--eAK4M,.mrlIconButton .MrlBadgeNotification--eAK4M{position:absolute;right:0;top:0}.mrlButton .MrlBadgeNotification--numeric--jVYpk,.mrlIconButton .MrlBadgeNotification--numeric--jVYpk{right:calc(var(--mrl-spacing-01)*-1);top:calc(var(--mrl-spacing-01)*-1)}
|
|
5
5
|
.mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--inverse{--mrl-tooltip-background-color: var(--mrl-gray-80);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary)}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-content[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-content[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-content[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
|
|
6
6
|
.mrl-visually-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
|
|
7
7
|
:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}.mrl-u-focus-wrapper{position:relative}.mrlIconButton,.mrlButton{background:var(--mrl-button-background-color);border:none;border-radius:var(--mrl-button-border-radius);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);color:var(--mrl-button-text-color);justify-content:center;outline:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m1);display:inline-flex;position:relative;visibility:inherit}.mrlIconButton:focus-visible:focus-visible,.mrlButton:focus-visible:focus-visible{outline:none}.mrlIconButton:focus-visible:focus-visible::after,.mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.mrlIconButton--inverse:focus-visible,.mrlIconButton--ghost-inverse:focus-visible,.mrlButton--inverse:focus-visible,.mrlButton--ghost-inverse:focus-visible{position:relative}.mrlIconButton--inverse:focus-visible:focus-visible,.mrlIconButton--ghost-inverse:focus-visible:focus-visible,.mrlButton--inverse:focus-visible:focus-visible,.mrlButton--ghost-inverse:focus-visible:focus-visible{outline:none}.mrlIconButton--inverse:focus-visible:focus-visible::after,.mrlIconButton--ghost-inverse:focus-visible:focus-visible::after,.mrlButton--inverse:focus-visible:focus-visible::after,.mrlButton--ghost-inverse:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation-inverse;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.mrlIconButton:hover,.mrlButton:hover{cursor:pointer}.mrlIconButton[aria-disabled=true],.mrlButton[aria-disabled=true]{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton[aria-disabled=true]:hover,.mrlButton[aria-disabled=true]:hover{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-hover);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);color:var(--mrl-button-text-color-hover)}.mrlIconButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-active);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);color:var(--mrl-button-text-color-active)}.mrlIconButton--skeleton,.mrlIconButton--skeleton[aria-disabled=true],.mrlButton--skeleton,.mrlButton--skeleton[aria-disabled=true]{min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrlIconButton,.mrlButton{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);--mrl-button-background-color-disabled: var(--mrl-color-background);--mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);--mrl-button-border-color: rgba(var(--mrl-gray-30), 1);--mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);--mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);--mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);--mrl-button-border-width: var(--mrl-line-width-border);--mrl-button-icon-size: var(--mrl-spacing-07);--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);--mrl-button-text-color-active: rgba(var(--mrl-black), 1);--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);--mrl-button-inset-vertical: 0;--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);--mrl-button-icon-margin-right: var(--mrl-space-inline-related)}.mrlIconButton--small,.mrlButton--small{min-height:var(--mrl-spacing-08);--mrl-button-icon-size: var(--mrl-spacing-06);--mrl-button-inset-horizontal: var(--mrl-spacing-04)}.mrlIconButton--xsmall,.mrlButton--xsmall{--mrl-button-icon-size: var(--mrl-spacing-06)}.mrlIconButton.mrlIconButton--small,.mrlButton.mrlIconButton--small{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}.mrlIconButton.mrlIconButton--small+.mrl-tooltip-content,.mrlButton.mrlIconButton--small+.mrl-tooltip-content{--mrl-tooltip-arrow-spacing: calc( (var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2 )}.mrlIconButton--large,.mrlButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));--mrl-button-inset-horizontal: var(--mrl-spacing-05)}.mrlIconButton.mrlIconButton--large,.mrlButton.mrlIconButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlIconButton.mrlButton--primary,.mrlIconButton.mrlButton--ghost,.mrlIconButton.mrlButton--ghost-inverse,.mrlIconButton.mrlIconButton--primary,.mrlIconButton.mrlIconButton--ghost,.mrlIconButton.mrlIconButton--ghost-inverse,.mrlButton.mrlButton--primary,.mrlButton.mrlButton--ghost,.mrlButton.mrlButton--ghost-inverse,.mrlButton.mrlIconButton--primary,.mrlButton.mrlIconButton--ghost,.mrlButton.mrlIconButton--ghost-inverse{--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent}.mrlIconButton--secondary-native,.mrlButton--secondary-native{--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent}.mrlIconButton--primary,.mrlButton--primary{--mrl-button-background-color: var(--mrl-color-brand);--mrl-button-background-color-active: var(--mrl-color-brand-active);--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);--mrl-button-background-color-hover: var(--mrl-color-brand-hover);--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse)}.mrlIconButton--primary-native,.mrlButton--primary-native{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-black-opacity-01);--mrl-button-background-color-disabled: var(transparent);--mrl-button-background-color-hover: var(--mrl-black-opacity-00);--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-blue-70), 1);--mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1)}.mrlIconButton--ghost,.mrlButton--ghost{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-black-opacity-01);--mrl-button-background-color-hover: var(--mrl-black-opacity-00);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost[aria-pressed=true],.mrlIconButton--ghost[aria-checked=true],.mrlIconButton--ghost[aria-expanded=true],.mrlIconButton--ghost[aria-selected=true],.mrlButton--ghost[aria-pressed=true],.mrlButton--ghost[aria-checked=true],.mrlButton--ghost[aria-expanded=true],.mrlButton--ghost[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background-inverse);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse,.mrlButton--ghost-inverse{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-white-opacity-04);--mrl-button-background-color-hover: var(--mrl-white-opacity-02);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost-inverse.mrlButton--skeleton,.mrlButton--ghost-inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-text-color: var(--mrl-color-text)}.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-accent);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04)}.mrlIconButton--inverse,.mrlButton--inverse{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: var(--mrl-white-opacity-06);--mrl-button-background-color-hover: var(--mrl-white-opacity-08);--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03)}.mrlIconButton--inverse.mrlButton--skeleton,.mrlButton--inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton[aria-disabled=true][aria-pressed=true],.mrlIconButton[aria-disabled=true][aria-checked=true],.mrlIconButton[aria-disabled=true][aria-expanded=true],.mrlIconButton[aria-disabled=true][aria-selected=true],.mrlButton[aria-disabled=true][aria-pressed=true],.mrlButton[aria-disabled=true][aria-checked=true],.mrlButton[aria-disabled=true][aria-expanded=true],.mrlButton[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse)}.mrlIconButton-wrapper{display:inline-flex}.mrlIconButton{min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09)}.mrlIconButton.mrlIconButton--small{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}.mrlIconButton.mrlIconButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlIconButton.mrlIconButton--xsmall{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07);padding:var(--mrl-spacing-01)}.mrlIconButton span{align-self:center;max-height:var(--mrl-button-icon-size);max-width:var(--mrl-button-icon-size);pointer-events:none}@media screen and (hover: hover){.mrlIconButton:hover~.mrl-tooltip-content{opacity:1;pointer-events:inherit;transition-delay:var(--mrl-duration-03);transition-duration:var(--mrl-duration-03);transition-timing-function:var(--mrl-timing-m2)}}.mrlAnimatedIconButton{align-items:center}.mrlAnimatedIconButton-iconContainer{height:1.5rem;pointer-events:none;width:1.5rem}.mrlAnimatedIconButton-iconContainer svg{pointer-events:none}
|