@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/link/MrlLinkButton/MrlLinkButton.global.css

@@ -0,0 +1,640 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper {
+  position: relative;
+}
+
+: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: transparent;
+  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);
+}
+
+.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-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  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;
+  animation-name: border-animation;
+}
+@keyframes border-animation {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    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);
+  }
+}
+@keyframes border-animation-inverse {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    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);
+  }
+}
+@keyframes outline-animation {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.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-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  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;
+  animation-name: border-animation-inverse;
+}
+@keyframes border-animation {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    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);
+  }
+}
+@keyframes border-animation-inverse {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    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);
+  }
+}
+@keyframes outline-animation {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus-inverse);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus-inverse);
+    outline-offset: 1px;
+  }
+}
+.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: transparent;
+  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.mrlIconButton--xsmall,
+.mrlButton.mrlIconButton--xsmall {
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+}
+.mrlIconButton.mrlButton--xsmall,
+.mrlButton.mrlButton--xsmall {
+  --mrl-button-icon-size: var(--mrl-spacing-05);
+}
+.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: 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);
+}
+
+.mrlButton {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-interactive-small);
+  min-height: var(--mrl-spacing-09);
+  align-items: center;
+  display: inline-flex;
+  min-width: auto;
+  padding: var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.mrlButton .mrl-tooltip-trigger-content {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: inherit;
+}
+.mrlButton.mrlButton--small {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xsmall);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
+  line-height: var(--mrl-type-line-height-interactive-xsmall);
+  min-height: var(--mrl-spacing-08);
+}
+.mrlButton.mrlButton--large {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-interactive);
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+.mrlButton .MrlSvgContainer,
+.mrlButton .MrlSpinner-container {
+  margin-right: var(--mrl-button-icon-margin-right);
+  max-width: var(--mrl-button-icon-size);
+  min-width: var(--mrl-button-icon-size);
+}
+.mrlButton .mrlButton--loading .MrlSpinner-container {
+  margin: 0 auto;
+  position: absolute;
+}
+.mrlButton .mrlButton--loading .mrlButton-text {
+  opacity: 0;
+}
+.mrlButton.mrlButton--icon-after .MrlSvgContainer,
+.mrlButton.mrlButton--icon-after .MrlSpinner-container {
+  margin-left: var(--mrl-button-icon-margin-right);
+  margin-right: 0;
+}
+.mrlButton.mrlButton--xsmall {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xsmall);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
+  line-height: var(--mrl-type-line-height-interactive-xsmall);
+  min-height: var(--mrl-spacing-07);
+  min-width: var(--mrl-spacing-07);
+  padding: var(--mrl-space-stack-related-small) var(--mrl-space-inset);
+}
+.mrlButton.mrlButton--xsmall.mrlButton--ghost, .mrlButton.mrlButton--xsmall.mrlButton--ghost-inverse {
+  padding: var(--mrl-space-stack-related-small);
+}
+.mrlButton.mrlButton--xsmall .MrlSvgContainer,
+.mrlButton.mrlButton--xsmall .MrlSpinner-container {
+  height: var(--mrl-button-icon-size);
+  margin-left: var(--mrl-spacing-01);
+}
+
+.mrlButton--icon-before {
+  padding-left: var(--mrl-spacing-04);
+}
+.mrlButton--icon-before.mrlButton--small {
+  padding-left: var(--mrl-spacing-03);
+}
+.mrlButton--icon-before.mrlButton--xsmall {
+  padding-left: var(--mrl-spacing-02);
+}
+.mrlButton--icon-before.mrlButton--xsmall .MrlSvgContainer,
+.mrlButton--icon-before.mrlButton--xsmall .MrlSpinner-container {
+  margin-left: 0;
+  margin-right: var(--mrl-spacing-01);
+}
+.mrlButton--icon-before.mrlButton--ghost, .mrlButton--icon-before.mrlButton--ghost-inverse {
+  padding-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  padding-right: var(--mrl-spacing-03);
+}
+
+.mrlButton--icon-after {
+  flex-direction: row-reverse;
+  padding-right: var(--mrl-spacing-04);
+}
+.mrlButton--icon-after.mrlButton--small {
+  padding-right: var(--mrl-spacing-03);
+}
+.mrlButton--icon-after.mrlButton--xsmall {
+  padding-right: var(--mrl-spacing-02);
+}
+.mrlButton--icon-after.mrlButton--xsmall .MrlSvgContainer {
+  margin-left: var(--mrl-spacing-01);
+  margin-right: 0;
+}
+.mrlButton--icon-after.mrlButton--ghost, .mrlButton--icon-after.mrlButton--ghost-inverse {
+  padding-left: var(--mrl-spacing-03);
+  padding-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+}
+
+.mrlLinkButton {
+  text-decoration: none;
+}