@muraldevkit/ui-toolkit 4.45.2-dev-jOrv.1 → 4.45.2

package/dist/styles/MrlLabelWithDescription/module.scss

@@ -0,0 +1,54 @@
+
+@use './MrlLabelWithDescription.variables.scss';
+.MrlLabelWithDescription {
+	--mrl-label-text-padding-top: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+	--mrl-description-margin-left: var(--mrl-spacing-09);
+	--mrl-description-margin-top: calc(-1 * calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)));
+	min-height: var(--mrl-spacing-09);
+	:global(.MrlSvgContainer) {
+		flex-shrink: 0;
+	}
+}
+.MrlLabelWithDescription-label {
+	color: var(--mrl-label-with-description-color);
+	cursor: pointer;
+	transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
+	vertical-align: middle;
+	:global(.MrlLabel-icon) {
+		height: var(--mrl-spacing-07);
+		margin: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02) var(--mrl-spacing-01);
+		width: var(--mrl-spacing-07);
+	}
+	:global(.MrlLabel-text) {
+		padding-top: var(--mrl-label-text-padding-top);
+	}
+	&.has-icon {
+		margin-left: var(--mrl-spacing-01);
+		:global(.MrlLabel-text) {
+			padding-top: 0;
+		}
+	}
+	&.has-multiline-label {
+		:global(.MrlLabel-text) {
+			padding-top: var(--mrl-label-text-padding-top);
+		}
+	}
+}
+.MrlLabelWithDescription-description {
+	color: var(--mrl-label-with-description-color);
+	margin-left: var(--mrl-spacing-02);
+	transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
+	.MrlLabelWithDescription-text {
+		--mrl-text-weight: var(--mrl-type-weight-text-secondary);
+	}
+	&.has-icon,
+	&.has-multiline-label {
+		margin-left: var(--mrl-description-margin-left);
+	}
+	&.has-icon {
+		margin-top: var(--mrl-description-margin-top);
+	}
+	&.has-multiline-label {
+		margin-top: 0;
+	}
+}

package/dist/styles/MrlLabelWithDescription/variables.scss

@@ -0,0 +1,14 @@
+
+.MrlLabelWithDescription {
+	--mrl-label-with-description-color: rgba(var(--mrl-gray-80), 1);
+	&.mrl-is--selected,
+	&.mrl-is--indeterminate {
+		--mrl-label-with-description-color: rgba(var(--mrl-gray-100), 1);
+	}
+	&.mrl-is--disabled {
+		--mrl-label-with-description-color: var(--mrl-color-text-disabled);
+	}
+	&:not(.mrl-is--disabled):hover {
+		--mrl-label-with-description-color: rgba(var(--mrl-gray-90), 1);
+	}
+}

package/dist/styles/MrlLegacySelect/module.scss

@@ -0,0 +1,80 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.variables.scss' as selectItem;
+@use '../../forms.global.scss' as *;
+@use './MrlLegacySelect.variables.scss';
+.mrl-select {
+	display: block;
+	position: relative;
+}
+.mrl-select-trigger {
+	@include mrl-text-inputs;
+	align-items: center;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	padding-right: var(--mrl-input-icon-offset);
+	position: relative;
+	width: auto;
+}
+.mrl-select--read-only {
+	pointer-events: none;
+	.mrl-select-trigger {
+		background-color: var(--mrl-select-background-color-read-only);
+		border-color: var(--mrl-select-border-color-read-only);
+	}
+}
+.mrl-select:focus-within > .mrl-select-trigger {
+	border-color: var(--mrl-text-input-border-color-focus);
+}
+.mrl-select:focus-within > .mrl-select-trigger::after {
+	@include mrl-focus-pseudo-element($border-width: 'var(--mrl-text-input-border-width)');
+}
+.mrl-select:focus-visible {
+	outline: none;
+}
+.mrl-select-trigger span {
+	display: flex;
+}
+.mrl-select-trigger span mrl-svg {
+	@include mrl-selectItem-icon;
+}
+.mrl-select-trigger-indicator {
+	color: var(--mrl-trigger-indicator-color);
+	margin-left: var(--mrl-input-icon-offset);
+}
+.mrl-select-trigger-indicator.mrl-is--open {
+	transform: rotate(180deg);
+}
+.mrl-select:focus-within .mrl-select-trigger-indicator {
+	color: var(--mrl-trigger-indicator-color-focus);
+}
+.mrl-select-trigger:hover .mrl-select-trigger-indicator {
+	color: var(--mrl-trigger-indicator-color-hover);
+}
+.mrl-select-trigger--inline {
+	@include mrl-inline-input-vars;
+	font-weight: var(--mrl-font-weight-04);
+}
+.mrl-select-trigger--inline-label {
+	@include mrl-inline-input-vars;
+	color: var(--mrl-color-text-secondary);
+}
+.mrl-select-trigger--large {
+	--mrl-text-input-height: var(--mrl-spacing-09);
+}
+.mrl-select--disabled {
+	.mrl-select-trigger {
+		color: var(--mrl-text-input-color-disabled);
+		pointer-events: none;
+	}
+	.mrl-select-trigger-border {
+		border-color: var(--mrl-text-input-border-color-disabled);
+	}
+	.mrl-select-trigger-indicator {
+		color: var(--mrl-text-input-color-disabled);
+		cursor: default;
+		pointer-events: none;
+	}
+}

package/dist/styles/MrlLegacySelect/variables.scss

@@ -0,0 +1,10 @@
+
+@use '../../forms.variables.scss';
+.mrl-select {
+	--mrl-select-trigger-indicator-color: var(--mrl-text-input-border-color);
+	--mrl-select-trigger-indicator-color-hover: var(--mrl-text-input-border-color-hover);
+	--mrl-select-trigger-indicator-color-focus: var(--mrl-text-input-border-color-focus);
+}
+.mrl-select:focus-within > .mrl-select-trigger--inline {
+	--mrl-text-input-border-color-focus: transparent;
+}

package/dist/styles/MrlLegacySelectItem/module.scss

@@ -0,0 +1,39 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use './MrlLegacySelectItem.variables.scss';
+.mrl-select-item {
+	display: block;
+}
+.mrl-selectItem {
+	@include mrl-text-static($size: 'small', $kind: 'title-secondary');
+	background: var(--mrl-select-item-background);
+	border-radius: var(--mrl-select-item-border-radius);
+	color: var(--mrl-select-item-color);
+	cursor: pointer;
+	display: flex;
+	padding: var(--mrl-select-item-padding-vertical) var(--mrl-select-item-padding-horizontal);
+	position: relative;
+}
+.mrl-selectItem-selectedIcon {
+	position: absolute;
+	right: var(--mrl-select-item-icon-spacing);
+	width: var(--mrl-select-item-icon-size);
+}
+$spacing: var(--mrl-select-item-icon-spacing);
+$item: var(var(--mrl-select-item-icon-size));
+$icon: var(var(-mrl-select-item-icon-spacing));
+.mrl-is--selected {
+	padding-right: calc($spacing + $item + $icon);
+}
+.mrl-is--focused {
+	outline: 5px auto Highlight;
+	outline: 5px auto -webkit-focus-ring-color;
+}
+.mrl-selectItem[aria-disabled='true'],
+.mrl-selectItem[aria-disabled='true']:hover {
+	cursor: default;
+}
+.mrl-is--hidden {
+	display: none;
+}

package/dist/styles/MrlLegacySelectItem/variables.scss

@@ -0,0 +1,26 @@
+
+@use '../../forms.variables.scss';
+.mrl-selectItem {
+	--mrl-select-item-background: var(--mrl-color-background);
+	--mrl-select-item-color: var(--mrl-color-text-highlight);
+	--mrl-select-item-padding: var(--mrl-select-item-padding-vertical)
+		var(--mrl-select-item-padding-horizontal);
+	--mrl-select-item-padding-horizontal: var(--mrl-spacing-04);
+	--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-select-item-border-radius: var(--mrl-border-radius-functional);
+	--mrl-select-item-icon-size: var(--mrl-spacing-06);
+	--mrl-select-item-icon-spacing: var(--mrl-spacing-03);
+}
+.mrl-selectItem:hover {
+	--mrl-select-item-background: var(--mrl-color-background-highlight-hover);
+	--mrl-select-item-color: var(--mrl-color-text-highlight-hover);
+}
+.mrl-is--selected {
+	--mrl-select-item-background: var(--mrl-color-background-highlight-selected);
+	--mrl-select-item-color: var(--mrl-color-text-highlight-selected);
+}
+.mrl-selectItem[aria-disabled='true'],
+.mrl-selectItem[aria-disabled='true']:hover {
+	--mrl-select-item-background: transparent;
+	--mrl-select-item-color: var(--mrl-color-text-disabled);
+}

package/dist/styles/MrlLegacySelectMenu/module.scss

@@ -0,0 +1,30 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use './MrlLegacySelectMenu.variables.scss';
+$affordance: var(--mrl-select-item-text-affordance);
+$item-padding: var(--mrl-select-item-padding-vertical);
+$space: var(--mrl-select-item-spacing-stack);
+$mrl-selectItem-height: 20px;
+.mrl-selectMenu {
+	$mrl-selectItem-height: calc($affordance + ($item-padding * 2) + $space);
+	background: var(--mrl-color-background);
+	border-radius: var(--mrl-radii-03);
+	box-shadow: var(--mrl-shadow-01);
+	display: none;
+	left: 0;
+	max-height: calc(var(--mrl-select-item-height) * 6);
+	overflow-y: auto;
+	padding: var(--mrl-spacing-03);
+	position: absolute;
+	right: 0;
+	z-index: $mrl-zIndex-overlays;
+}
+.mrl-selectMenu--bottom {
+	top: calc(100% + var(--mrl-spacing-02));
+}
+.mrl-selectMenu-bottom--top {
+	bottom: calc(100% + var(--mrl-spacing-02));
+}
+.mrl-selectMenu--open {
+	display: block;
+}

package/dist/styles/MrlLegacySelectMenu/variables.scss

@@ -0,0 +1,4 @@
+
+.mrl-selectMenu {
+	--mrl-select-item-height: 34px;
+}

package/dist/styles/MrlLink/module.scss

@@ -0,0 +1,68 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../variables.scss';
+.mrl-link {
+	@include mrl-focus(
+		$element-radius: 'var(--mrl-radii-02)',
+		$border-width: 'var(--mrl-link-border-width)'
+	);
+	align-items: center;
+	color: var(--mrl-link-color);
+	display: inline-flex;
+	font-weight: var(--mrl-link-font-weight);
+	text-decoration: none;
+	transition: all var(--mrl-duration-03) var(--mrl-timing-m2);
+	transition-property: border-color, color;
+}
+.MrlLinkText {
+	border-bottom: var(--mrl-link-border-width) var(--mrl-link-border-style) currentcolor;
+}
+a.mrl-link--inverse {
+	@include mrl-focus(
+		$is-inverse: 'true',
+		$element-radius: 'var(--mrl-radii-02)',
+		$border-width: 'var(--mrl-link-border-width)'
+	);
+}
+a.mrl-link:visited {
+	color: rgb(var(--mrl-blue-100));
+}
+a.mrl-link--mono:visited {
+	color: rgb(var(--mrl-gray-80));
+}
+a.mrl-link--inverse:visited {
+	color: rgb(var(--mrl-white));
+}
+a.mrl-link:hover {
+	color: var(--mrl-link-color-hover);
+}
+a.mrl-link:active {
+	color: var(--mrl-link-color-active);
+}
+a.mrl-link--large {
+	@include mrl-text-interactive('large');
+}
+a.mrl-link--medium {
+	@include mrl-text-interactive('medium');
+}
+a.mrl-link--small {
+	@include mrl-text-interactive('small');
+}
+a.mrl-link--xsmall {
+	@include mrl-text-interactive('xsmall');
+}
+a.mrl-link--simple .MrlLinkText {
+	border-bottom: none;
+	text-decoration: underline;
+}
+.MrlLinkIcon {
+	margin-left: var(--mrl-spacing-01);
+	margin-top: calc(var(--mrl-spacing-01) * -1);
+}
+.mrl-link--small .MrlLinkIcon {
+	height: auto;
+	width: var(--mrl-spacing-05);
+}
+.mrl-link--xsmall .MrlLinkIcon {
+	height: auto;
+	width: calc(var(--mrl-spacing-04) + var(--mrl-spacing-01));
+}

package/dist/styles/MrlLinkButton/global.scss

@@ -0,0 +1,4 @@
+@use '../../button/MrlButton/MrlButton.global.scss';
+.mrlLinkButton {
+	text-decoration: none;
+}

package/dist/styles/MrlMain/module.scss

@@ -0,0 +1,26 @@
+
+@use './MrlMain.variables' as *;
+@use '../layout.variables' as *;
+@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+.MrlMain {
+	align-items: initial;
+	background: rgba(var(--mrl-white), 1);
+	border-radius: var(--mrl-border-radius-container-large);
+	flex: 1;
+	margin-bottom: var(--mrl-spacing-05);
+	padding: var(--main-padding-large) var(--main-padding-small);
+	width: 100%;
+	&--no-topbar {
+		margin-top: var(--mrl-spacing-05);
+	}
+}
+@media (min-width: $mrl-breakpoint-02) {
+	.MrlMain {
+		padding: var(--main-padding-large) var(--main-padding-medium);
+	}
+}
+@media (min-width: $mrl-breakpoint-03) {
+	.MrlMain {
+		padding: var(--main-padding-large) var(--main-padding-large);
+	}
+}

package/dist/styles/MrlMain/variables.scss

@@ -0,0 +1,5 @@
+.MrlMain {
+	--main-padding-large: var(--mrl-spacing-10);
+	--main-padding-medium: var(--mrl-spacing-08);
+	--main-padding-small: var(--mrl-spacing-07);
+}

package/dist/styles/MrlMenu/module.scss

@@ -0,0 +1,45 @@
+@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+.MrlMenu {
+	background: var(--mrl-color-background);
+	border-radius: var(--mrl-border-radius-functional-large);
+	box-shadow: var(--mrl-shadows-raised);
+	flex-direction: column;
+	opacity: 0;
+	overflow: visible;
+	z-index: $mrl-zIndex-menus;
+	ul[role='menu'] {
+		min-height: var(--mrl-spacing-10);
+		overflow-x: visible;
+		padding: var(--mrl-spacing-04);
+	}
+	&--internal {
+		box-shadow: none;
+		ul[role='menu'] {
+			padding: 0;
+		}
+	}
+	&--compact {
+		ul[role='menu'] {
+			padding: var(--mrl-space-stack-related);
+		}
+	}
+	&--scrolling {
+		padding-bottom: var(--mrl-spacing-04);
+		ul[role='menu'] {
+			overflow: hidden auto;
+		}
+	}
+	&--ignore {
+		max-height: calc(100vh - 32px);
+		ul[role='menu'] {
+			overflow: hidden auto;
+		}
+	}
+	&--submenu {
+		left: 97%;
+		position: absolute;
+	}
+	&.open {
+		display: flex;
+	}
+}

package/dist/styles/MrlMenuGroup/module.scss

@@ -0,0 +1,3 @@
+.MrlMenuGroup--label {
+	margin-bottom: var(--mrl-spacing-03);
+}

package/dist/styles/MrlMenuItem/module.scss

@@ -0,0 +1,118 @@
+@use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../divider/divider.mixins.scss' as *;
+@use '../../divider/divider.variables.scss' as *;
+$menu-padding: var(--mrl-space-stack-controls);
+$submenu-spacing: calc(100% + calc($menu-padding / 2));
+$menu-icon-min-width: var(--mrl-spacing-06);
+$space-inset-small: calc(var(--mrl-spacing-03) - var(--mrl-spacing-01));
+.MrlMenuItem {
+	border-radius: var(--mrl-border-radius-content-large);
+	list-style-type: none;
+	margin: 0;
+	margin-bottom: var(--mrl-space-stack-related-small);
+	text-align: left;
+	text-indent: 0;
+	white-space: nowrap;
+	> .subMenu {
+		bottom: calc($menu-padding / 2);
+		display: none;
+		left: $submenu-spacing;
+		position: absolute;
+		top: calc($menu-padding / -2);
+		&::before {
+			bottom: calc($menu-padding / 2);
+			content: '';
+			cursor: pointer;
+			height: 100%;
+			left: calc($menu-padding * -1);
+			position: absolute;
+			top: calc($menu-padding / 2);
+			width: calc($menu-padding + 0.125rem);
+		}
+	}
+	[aria-expanded='true'] + .subMenu {
+		display: flex;
+	}
+	a {
+		text-decoration: none;
+	}
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+.MrlMenuItem--item {
+	@include mrl-text-interactive('xsmall');
+	align-items: center;
+	background: none;
+	border: none;
+	border-radius: var(--mrl-border-radius-content-large);
+	color: var(--mrl-color-text);
+	cursor: pointer;
+	display: flex;
+	height: var(--mrl-spacing-08);
+	justify-content: flex-start;
+	padding: var(--mrl-space-inline-related) var(--mrl-space-inline-sibling);
+	position: relative;
+	white-space: nowrap;
+	width: 100%;
+	&--selected {
+		background: var(--mrl-color-background-inverse-hover);
+		color: var(--mrl-color-text-inverse);
+	}
+	&--withIcon {
+		height: var(--mrl-spacing-08);
+		padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)) var(--mrl-space-inline-sibling);
+	}
+	&--content {
+		position: relative;
+		z-index: 1;
+	}
+	&--hoverArea {
+		height: 100%;
+		left: -30px;
+		position: absolute;
+		width: 215px;
+	}
+	.mrl-svg {
+		min-width: $menu-icon-min-width;
+	}
+	&.isLink {
+		justify-content: flex-start;
+	}
+	&:focus-visible {
+		outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+		outline-offset: var(--mrl-spacing-01);
+	}
+	&--submenuItem {
+		padding-right: 15px;
+	}
+	&:hover:not(.MrlMenuItem--item--selected, [aria-disabled='true']),
+	&--submenuOpen {
+		background: var(--mrl-black-opacity-00);
+		color: var(--mrl-color-text-hover);
+	}
+	&:active:not(.MrlMenuItem--item--selected, [aria-disabled='true']) {
+		background: var(--mrl-black-opacity-01);
+		color: var(--mrl-color-text-active);
+	}
+	&--submenuIcon-left {
+		display: flex;
+		margin-right: var(--mrl-spacing-03);
+	}
+	&--submenuIcon-right {
+		display: flex;
+		margin-left: auto;
+		position: relative;
+		top: 0;
+		width: 14px;
+	}
+	&[aria-disabled='true'] {
+		background: transparent;
+		color: var(--mrl-color-text-disabled);
+		pointer-events: none;
+	}
+	span,
+	svg {
+		pointer-events: none;
+	}
+}

package/dist/styles/MrlModal/global.scss

@@ -0,0 +1,37 @@
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use './MrlModal.variables.scss';
+@use './MrlModal.mixins.scss' as *;
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal {
+		border-radius: var(--mrl-modal-border-radius);
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 8%), var(--mrl-shadow-03);
+		height: auto;
+		margin: var(--mrl-spacing-08);
+		max-height: var(--mrl-modal-max-height);
+		max-width: var(--mrl-modal-size);
+	}
+	.mrl-native-modal,
+	.mrl-display-modal {
+		height: min(var(--mrl-modal-max-height), 100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08));
+		margin-bottom: initial;
+		max-height: initial;
+	}
+}
+.mrl-native-modal,
+.mrl-display-modal {
+	border-radius: var(--mrl-modal-border-radius) var(--mrl-modal-border-radius) 0 0;
+	@media screen and (min-width: $mrl-breakpoint-01) {
+		border-radius: var(--mrl-modal-border-radius);
+	}
+	.mrl-modal-close {
+		display: none;
+	}
+	.mrl-modal-header {
+		position: relative;
+		text-align: center;
+		.mrl-text-heading {
+			text-align: center;
+			width: 100%;
+		}
+	}
+}

package/dist/styles/MrlModal/mixins.scss

@@ -0,0 +1,23 @@
+
+@mixin mrl-modal-scrim-in() {
+	opacity: 1;
+	transition-duration: var(--mrl-duration-04);
+	transition-property: opacity;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+@mixin mrl-modal-scrim-out() {
+	opacity: 0;
+	transition-duration: var(--mrl-duration-03);
+	transition-timing-function: var(--mrl-timing-m3);
+}
+@mixin mrl-modal-dialog-in() {
+	transform: translate(0, 0);
+	transition-duration: var(--mrl-duration-04);
+	transition-property: transform;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+@mixin mrl-modal-dialog-out() {
+	transform: translate(0, var(--mrl-distance-02));
+	transition-duration: var(--mrl-duration-03);
+	transition-timing-function: var(--mrl-timing-m3);
+}

package/dist/styles/MrlModal/module.scss

@@ -0,0 +1,55 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use './MrlModal.variables.scss';
+@use './MrlModal.mixins.scss' as *;
+.mrl-modal-backdrop {
+	align-items: center;
+	background: var(--mrl-modal-backdrop-background);
+	display: flex;
+	inset: 0;
+	justify-content: center;
+	opacity: 0;
+	position: fixed;
+	transition: opacity 300ms ease-in-out;
+	z-index: $mrl-zIndex-overlays;
+	&.fade-in {
+		@include mrl-modal-scrim-in;
+	}
+	&.fade-out {
+		@include mrl-modal-scrim-out;
+	}
+	&.display {
+		display: fixed;
+	}
+	&.hide {
+		display: none;
+	}
+	&--native,
+	&--display {
+		align-items: flex-start;
+	}
+}
+.mrl-modal {
+	background: var(--mrl-modal-background);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	height: 100dvh;
+	position: relative;
+	width: 100dvw;
+	.mrl-modal-close {
+		position: absolute;
+		right: var(--mrl-modal-close-offset);
+		top: var(--mrl-modal-close-offset);
+	}
+}
+@media (prefers-reduced-motion: no-preference) {
+	.mrl-modal-backdrop.fade-in .mrl-modal {
+		@include mrl-modal-dialog-in;
+	}
+	.mrl-modal-backdrop.fade-out .mrl-modal {
+		@include mrl-modal-dialog-out;
+	}
+}

package/dist/styles/MrlModal/variables.scss

@@ -0,0 +1,26 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '../modal.variables.scss';
+.mrl-modal-backdrop {
+	--mrl-modal-backdrop-background: var(--mrl-black-opacity-05);
+}
+.mrl-modal {
+	--mrl-modal-size: 600px;
+	--mrl-modal-border-radius: var(--mrl-radii-05);
+	--mrl-modal-background: var(--mrl-color-background);
+	--mrl-modal-max-height: 95vh;
+}
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal--small {
+		--mrl-modal-size: 400px;
+	}
+	.mrl-modal--large {
+		--mrl-modal-size: 800px;
+	}
+}
+.mrl-native-modal,
+.mrl-display-modal {
+	--mrl-modal-border-radius: var(--mrl-radii-04);
+	--mrl-modal-size: 600px;
+	--mrl-modal-max-height: 642px;
+}