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

package/dist/styles/MrlModalContent/module.scss

@@ -1,19 +0,0 @@
-@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-.mrl-modal-content {
-	@include mrl-focus($style: 'outline');
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	overflow-y: auto;
-	padding: var(--mrl-modal-padding-vertical-content) var(--mrl-modal-padding-horizontal);
-	:global(.mrl-native-modal) &,
-	:global(.mrl-display-modal) & {
-		margin-top: var(--mrl-spacing-03);
-		padding-bottom: var(--mrl-spacing-09);
-		@media screen and (min-width: $mrl-breakpoint-01) {
-			margin-bottom: var(--mrl-spacing-05);
-			padding-bottom: 0;
-		}
-	}
-}

package/dist/styles/MrlModalFooter/global.scss

@@ -1,16 +0,0 @@
-.mrl-modal-footer {
-	.mrlButton,
-	.modal-tertiary,
-	button {
-		align-self: flex-start;
-	}
-	.modal-secondary,
-	.modal-primary,
-	.mrlButton--primary,
-	.mrlButton--secondary {
-		margin-left: auto;
-	}
-	.mrlButton--primary {
-		margin: 0;
-	}
-}

package/dist/styles/MrlModalFooter/module.scss

@@ -1,41 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use '../../../styles/shared/box-shadow/scrollShadow.scss' as *;
-@use './MrlModalFooter.variables.scss';
-.mrl-modal-footer {
-	display: flex;
-	flex-direction: row;
-	gap: var(--mrl-modal-footer-inline-margin);
-	padding: var(--mrl-modal-padding-vertical-footer) var(--mrl-modal-padding-horizontal);
-	transition: box-shadow var(--mrl-duration-04) var(--mrl-timing-m2);
-}
-.mrl-modal-footer-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: var(--mrl-modal-footer-inline-margin);
-	width: 100%;
-}
-.slotted :global(.mrlButton) {
-	display: block;
-	width: 100%;
-}
-@media screen and (min-width: $mrl-breakpoint-01) {
-	.mrl-modal-footer {
-		flex-direction: row;
-		justify-content: space-between;
-	}
-	.mrl-modal-footer-wrapper {
-		flex-direction: row;
-		justify-content: right;
-	}
-	.mrl-modal-footer-wrapper .slotted {
-		display: inline-flex;
-		width: auto;
-	}
-}
-.mrl-modal-scroll-shadow-bottom {
-	@include scrollShadowBottom;
-	border-bottom-left-radius: var(--mrl-modal-border-radius);
-	border-bottom-right-radius: var(--mrl-modal-border-radius);
-}

package/dist/styles/MrlModalFooter/variables.scss

@@ -1,5 +0,0 @@
-
-@use '../modal.variables.scss';
-.mrl-modal-footer {
-	--mrl-modal-footer-inline-margin: var(--mrl-spacing-03);
-}

package/dist/styles/MrlModalHeader/module.scss

@@ -1,21 +0,0 @@
-
-@use '../../../styles/shared/box-shadow/scrollShadow.scss' as *;
-@use '../modal.variables.scss' as *;
-.mrl-modal-header {
-	color: var(--mrl-modal-header-text-color);
-	display: flex;
-	min-height: calc(
-		var(--mrl-type-size-headline-large) * var(--mrl-type-line-height-headline-large)
-	);
-	padding: var(--mrl-modal-padding-vertical-top)
-		calc(
-			#{$mrl-modal-close-size} + var(--mrl-modal-close-offset) + var(--mrl-modal-close-inline-margin)
-		)
-		var(--mrl-modal-padding-vertical-bottom) var(--mrl-modal-padding-horizontal);
-	transition: box-shadow var(--mrl-duration-04) var(--mrl-timing-m2);
-}
-.mrl-modal-scroll-shadow-top {
-	@include scrollShadowTop;
-	border-top-left-radius: var(--mrl-modal-border-radius);
-	border-top-right-radius: var(--mrl-modal-border-radius);
-}

package/dist/styles/MrlPage/module.scss

@@ -1,13 +0,0 @@
-
-@import '../layout.variables';
-.MrlPage {
-	background: var(--mrl-color-background-page);
-	display: flex;
-	flex-wrap: wrap;
-	padding-left: var(--mrl-spacing-05);
-	padding-right: var(--mrl-spacing-05);
-	position: relative;
-	&--no-topbar {
-		padding-top: var(--mrl-spacing-05);
-	}
-}

package/dist/styles/MrlPagination/module.scss

@@ -1,29 +0,0 @@
-.MrlPagination {
-	display: block;
-}
-.MrlPaginationList {
-	align-items: center;
-	display: flex;
-	margin: 0;
-	padding: 0;
-}
-.MrlPaginationItem {
-	height: var(--mrl-spacing-06);
-	margin: 0;
-	padding: 0;
-}
-.MrlPaginationText {
-	display: block;
-	font-size: var(--mrl-font-size-03);
-	padding-top: 0.1875rem;
-}
-.MrlPaginationRange {
-	font-weight: var(--mrl-font-weight-04);
-	padding: 0 var(--mrl-spacing-02);
-}
-.MrlPaginationDash {
-	font-weight: var(--mrl-font-weight-04);
-}
-.MrlPaginationTotal {
-	padding: 0 var(--mrl-spacing-02);
-}

package/dist/styles/MrlPanel/module.scss

@@ -1,61 +0,0 @@
-@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-$mrl-panel-width: 16.75rem;
-.MrlPanel {
-	background-color: var(--mrl-color-background);
-	border-radius: var(--mrl-border-radius-container);
-	box-shadow: var(--mrl-shadows-raised);
-	display: flex;
-	flex-direction: column;
-	height: auto;
-	max-height: 100%;
-	overflow: hidden;
-	padding: var(--mrl-spacing-06) 0 0 0;
-	pointer-events: auto;
-	position: relative;
-	width: $mrl-panel-width;
-	z-index: $mrl-zIndex-panels;
-	.MrlPanel--header-content {
-		margin-bottom: calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));
-		padding: 0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06);
-		&.MrlPanel--header-content-description {
-			margin-bottom: calc(var(--mrl-spacing-04) - var(--mrl-spacing-01));
-		}
-		.MrlPanel--title {
-			height: auto;
-		}
-		.MrlPanel--top-actions {
-			align-items: center;
-			display: flex;
-			justify-content: center;
-			position: absolute;
-			right: calc(var(--mrl-spacing-10) - var(--mrl-spacing-02));
-			top: var(--mrl-spacing-04);
-		}
-		.MrlPanel--top-actions-divider {
-			align-self: auto;
-		}
-	}
-	.MrlPanel--close {
-		position: absolute;
-		right: var(--mrl-spacing-04);
-		top: var(--mrl-spacing-04);
-	}
-}
-.MrlPanel--scrollable {
-	outline: none;
-	overflow: clip scroll;
-	overflow-y: overlay;
-	padding-left: var(--mrl-spacing-06);
-	padding-right: var(--mrl-spacing-06);
-	padding-top: var(--mrl-spacing-01);
-	&:focus-visible {
-		outline: var(--mrl-spacing-01) var(--mrl-color-focus) solid;
-	}
-	&.MrlPanel--scrollable-has-sticky-header {
-		padding-top: 0;
-	}
-	.MrlPanel--description {
-		margin-bottom: var(--mrl-spacing-06);
-		padding-right: var(--mrl-space-inset-container-large);
-	}
-}

package/dist/styles/MrlPanelFooter/module.scss

@@ -1,12 +0,0 @@
-.MrlPanelFooter {
-	background-color: var(--mrl-color-background);
-	bottom: var(--mrl-spacing-03);
-	color: rgba(var(--mrl-gray-60), 1);
-	left: 0;
-	margin: 0 var(--mrl-spacing-06);
-	position: absolute;
-	width: calc(100% - var(--mrl-spacing-06) * 2);
-	.MrlPanelFooter--divider {
-		margin: 0 0 var(--mrl-spacing-02) 0;
-	}
-}

package/dist/styles/MrlPanelStickyHeader/module.scss

@@ -1,14 +0,0 @@
-.MrlPanelStickyHeader {
-	background-color: var(--mrl-color-background);
-	position: sticky;
-	top: 0;
-	&::after {
-		background: var(--mrl-color-background);
-		content: '';
-		display: block;
-		inset: 0 calc(-1 * var(--mrl-spacing-03));
-		pointer-events: all;
-		position: absolute;
-		z-index: -1;
-	}
-}

package/dist/styles/MrlPopover/module.scss

@@ -1,112 +0,0 @@
-@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use '@muraldevkit/ds-foundation/src/styles/_mixins.scss' as *;
-@use './MrlPopover.variables.scss' as *;
-.MrlPopover {
-	background: var(--mrl-popover-background-color);
-	border-radius: var(--mrl-border-radius-functional-large);
-	box-shadow: var(--mrl-shadows-raised);
-	color: var(--mrl-popover-text-color);
-	flex-direction: column;
-	max-width: 600px;
-	opacity: 0;
-	overflow: hidden;
-	pointer-events: auto;
-	position: fixed;
-	z-index: $mrl-zIndex-menus;
-	z-index: $mrl-zIndex-popovers;
-	a {
-		color: var(--mrl-popover-text-color);
-	}
-	@include mrl-shadow('raised');
-	&--submenu {
-		left: 97%;
-		position: absolute;
-	}
-	&--close {
-		position: absolute;
-		right: 4px;
-		top: 6px;
-		transition: none;
-		svg {
-			color: var(--mrl-popover-text-color);
-		}
-	}
-	&.compact {
-		padding: var(--mrl-space-stack-related);
-	}
-	&.open {
-		display: flex;
-	}
-	&--scrolling--content {
-		overflow: hidden auto;
-		padding: var(--mrl-popover-padding) calc(var(--mrl-popover-padding) - 4px)
-			var(--mrl-popover-padding) var(--mrl-popover-padding);
-		.MrlPopover--close {
-			right: 8px;
-		}
-	}
-	&--point {
-		background: var(--mrl-popover-background-color);
-		border-radius: 0 2px;
-		height: 10px;
-		position: absolute;
-		width: 10px;
-		z-index: 2;
-		&[data-point*='bottom-'] {
-			top: -4px;
-			transform: rotate(315deg);
-		}
-		&[data-point*='top-'] {
-			bottom: -4px;
-			transform: rotate(315deg);
-		}
-		&[data-point='bottom-left'],
-		&[data-point='top-left'] {
-			left: 14px;
-		}
-		&[data-point='bottom-right'],
-		&[data-point='top-right'] {
-			right: 14px;
-		}
-		&[data-point='bottom-center'],
-		&[data-point='top-center'] {
-			left: calc(50% - 8px);
-		}
-		&[data-point*='left-'] {
-			right: -5px;
-			transform: rotate(225deg);
-		}
-		&[data-point*='right-'] {
-			left: -5px;
-			transform: rotate(45deg);
-		}
-		&[data-point='left-center'],
-		&[data-point='right-center'] {
-			top: calc(50% - 8px);
-		}
-		&[data-point='left-top'],
-		&[data-point='right-top'] {
-			top: 16px;
-		}
-		&[data-point='left-bottom'],
-		&[data-point='right-bottom'] {
-			bottom: 16px;
-		}
-	}
-}
-.inverse {
-	.MrlPopover--scrolling--content {
-		&::-webkit-scrollbar {
-			background-color: var(--mrl-popover-background-color);
-			border-radius: 10px;
-			width: 12px;
-		}
-		&::-webkit-scrollbar-thumb {
-			background-clip: content-box;
-			background-color: var(--mrl-popover-text-color);
-			border: 3px solid transparent;
-			border-radius: 10px;
-			position: relative;
-		}
-	}
-}

package/dist/styles/MrlPopover/variables.scss

@@ -1,16 +0,0 @@
-.primary {
-	--mrl-popover-background-color: var(--mrl-color-background);
-	--mrl-popover-text-color: var(--mrl-color-text);
-	--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
-}
-.inverse {
-	--mrl-popover-background-color: var(--mrl-color-background-inverse);
-	--mrl-popover-text-color: var(--mrl-color-text-inverse);
-	--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
-}
-.default {
-	--mrl-popover-padding: var(--mrl-spacing-05);
-}
-.compact {
-	--mrl-popover-padding: var(--mrl-spacing-04);
-}

package/dist/styles/MrlProgressBar/module.scss

@@ -1,57 +0,0 @@
-.MrlProgressBar-container {
-	min-width: 4.25rem;
-	padding: var(--mrl-spacing-03);
-	width: auto;
-}
-.MrlProgressBar {
-	background-color: var(--mrl-black-opacity-00);
-	border-radius: var(--mrl-radii-03);
-	height: var(--mrl-spacing-02);
-	overflow: hidden;
-	position: relative;
-	width: 100%;
-}
-.MrlProgressBar--complete {
-	background-color: rgba(var(--mrl-blue-70), 1);
-	border-radius: var(--mrl-radii-03);
-	height: var(--mrl-spacing-02);
-	left: 0;
-	position: absolute;
-	top: 0;
-}
-.MrlProgressBar--textContainer {
-	margin-top: var(--mrl-spacing-03);
-	text-align: center;
-}
-@keyframes timed {
-	0% {
-		width: 0;
-	}
-	15% {
-		width: 25%;
-	}
-	70% {
-		width: 72.5%;
-	}
-	100% {
-		width: 100%;
-	}
-}
-.MrlProgressBar--timed {
-	animation-name: timed;
-	animation-timing-function: var(--mrl-timing-m1);
-	width: 100%;
-}
-@keyframes indeterminate {
-	from {
-		left: -100%;
-	}
-	to {
-		left: 100%;
-	}
-}
-.MrlProgressBar--indeterminate {
-	animation: 2s indeterminate var(--mrl-timing-m1) infinite;
-	left: -100%;
-	width: 200%;
-}

package/dist/styles/MrlRadioButton/module.scss

@@ -1,8 +0,0 @@
-
-.MrlRadioButton {
-	align-items: center;
-	display: flex;
-	> :first-child {
-		align-self: flex-start;
-	}
-}

package/dist/styles/MrlRadioButtonStandalone/global.scss

@@ -1,16 +0,0 @@
-@use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-.MrlRadioButtonStandalone-input {
-	@include mrl-focus(
-		$is-inline-element: 'true',
-		$element-radius: 'var(--mrl-border-radius-rounded)'
-	);
-	position: absolute;
-}
-.MrlRadioButtonStandalone-focus-indicator {
-	height: var(--mrl-radio-button-height);
-	left: 0;
-	pointer-events: none;
-	position: absolute;
-	top: auto;
-	width: var(--mrl-radio-button-width);
-}

package/dist/styles/MrlRadioButtonStandalone/module.scss

@@ -1,59 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use '../../forms.variables.scss';
-@use './MrlRadioButtonStandalone.variables.scss';
-.MrlRadioButtonStandalone {
-	display: inline-block;
-	margin: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
-	margin-left: var(--mrl-spacing-01);
-	min-height: var(--mrl-radio-button-height);
-	min-width: var(--mrl-radio-button-width);
-	position: relative;
-}
-.MrlRadioButtonStandalone-input {
-	appearance: none;
-	cursor: pointer;
-	height: var(--mrl-radio-button-height);
-	left: 0;
-	margin: 0;
-	opacity: 0;
-	padding: 0;
-	position: absolute;
-	top: 0;
-	vertical-align: middle;
-	width: var(--mrl-radio-button-width);
-	z-index: $mrl-zIndex-focus;
-	&:disabled,
-	& ~ .MrlRadioButtonStandalone-faux-input {
-		cursor: default;
-		pointer-events: none;
-	}
-	& ~ .MrlRadioButtonStandalone-faux-input {
-		background-color: var(--mrl-radio-button-background);
-		border-color: var(--mrl-radio-button-border-color);
-		border-radius: var(--mrl-radio-button-border-radius);
-		border-style: solid;
-		border-width: var(--mrl-radio-button-border-width);
-		height: var(--mrl-radio-button-height);
-		left: 0;
-		position: absolute;
-		top: 0;
-		transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2),
-			border-color var(--mrl-duration-03) var(--mrl-timing-m2);
-		width: var(--mrl-radio-button-width);
-		&::before {
-			background-color: var(--mrl-radio-button-background);
-			border-radius: var(--mrl-border-radius-rounded);
-			content: '';
-			cursor: pointer;
-			height: var(--mrl-radio-button-fill-size);
-			left: 50%;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2);
-			width: var(--mrl-radio-button-fill-size);
-		}
-	}
-}

package/dist/styles/MrlRadioButtonStandalone/variables.scss

@@ -1,31 +0,0 @@
-.MrlRadioButtonStandalone-input:focus-within ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-color-line-active);
-}
-.MrlRadioButtonStandalone-input:hover ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-color-line-hover);
-}
-.MrlRadioButtonStandalone-input:checked ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-radio-button-background-selected);
-	&::before {
-		--mrl-radio-button-background: var(--mrl-radio-button-background-selected);
-	}
-}
-.MrlRadioButtonStandalone-input:disabled ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-color-line-disabled);
-}
-.MrlRadioButtonStandalone-input.hasError ~ .MrlRadioButtonStandalone-faux-input,
-.MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input,
-.MrlRadioButtonStandalone-input.hasError:hover ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-color-background-error);
-}
-.MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input {
-	&::before {
-		--mrl-radio-button-background: var(--mrl-color-background-error);
-	}
-}
-.MrlRadioButtonStandalone-input:disabled:checked ~ .MrlRadioButtonStandalone-faux-input {
-	--mrl-radio-button-border-color: var(--mrl-color-line-disabled);
-	&::before {
-		--mrl-radio-button-background: var(--mrl-color-background-disabled);
-	}
-}

package/dist/styles/MrlSidebar/module.scss

@@ -1,65 +0,0 @@
-
-@use '../layout.variables' as *;
-@use '../../grid/grid.variables' as *;
-.MrlSidebar {
-	align-items: stretch;
-	margin-right: var(--mrl-spacing-05);
-	width: $sidebar-width;
-	&--mobile {
-		align-items: stretch;
-		background: var(--mrl-color-background-page);
-		border-radius: 0 var(--mrl-radii-03) var(--mrl-radii-03) 0;
-		bottom: 0;
-		left: calc(($sidebar-width + 2px) * -1);
-		max-height: calc(100% - var(--mrl-spacing-03));
-		overflow-y: auto;
-		padding: 4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);
-		position: fixed;
-		top: var(--mrl-spacing-03);
-		transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1),
-			left var(--mrl-duration-03) var(--mrl-timing-m1);
-		z-index: 2;
-		@media (prefers-reduced-motion: reduce) {
-			transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
-		}
-		&--open {
-			left: 0;
-			opacity: 1;
-		}
-	}
-	&--offset {
-		&.MrlSidebar--mobile,
-		&.MrlSidebar-overlay {
-			bottom: 0;
-		}
-	}
-}
-.MrlSidebar-menu.MrlSidebar-menu-trigger {
-	left: var(--mrl-spacing-05);
-	position: absolute;
-	top: var(--mrl-spacing-05);
-	width: 50px;
-	z-index: 1;
-}
-.MrlSidebar-menu-close {
-	position: fixed;
-}
-.MrlSidebar-overlay {
-	background-color: rgba(0, 0, 0, 56%);
-	inset: 0 0 0 -10000px;
-	opacity: 0;
-	pointer-events: none;
-	position: absolute;
-	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
-	z-index: 1;
-	&--visible {
-		opacity: 1;
-		pointer-events: initial;
-	}
-}
-.MrlSidebar-content {
-	display: none;
-	&--visible {
-		display: block;
-	}
-}

package/dist/styles/MrlSidebarNavGroup/module.scss

@@ -1,8 +0,0 @@
-
-.MrlSidebarNavGroup {
-	margin-bottom: var(--mrl-spacing-07);
-}
-.MrlSidebarNavGroup-heading {
-	color: var(--mrl-color-text-secondary);
-	margin-bottom: var(--mrl-spacing-03);
-}

package/dist/styles/MrlSidebarNavItem/module.scss

@@ -1,47 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-$mrl-sidebar-nav-item-background-color-hover: rgba(var(--mrl-gray-20), 1);
-$mrl-sidebar-nav-item-background-color-active: rgba(var(--mrl-gray-30), 1);
-$mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-highlight-active);
-$mrl-sidebar-nav-item-text-color-default: var(--mrl-color-text-heading);
-$mrl-sidebar-nav-item-text-color-selected: var(--mrl-color-text-inverse-active);
-.MrlSidebarNavItem {
-	height: var(--mrl-spacing-08);
-	margin-bottom: var(--mrl-spacing-01);
-	& > a {
-		align-items: center;
-		border-radius: var(--mrl-border-radius-content-large);
-		color: $mrl-sidebar-nav-item-text-color-default;
-		display: inline-flex;
-		height: 100%;
-		outline: none;
-		padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
-		position: relative;
-		text-decoration: none;
-		width: 100%;
-		@include mrl-text-interactive('xsmall');
-		&:focus-visible::after {
-			@include mrl-focus-pseudo-element;
-		}
-		&:hover {
-			background-color: $mrl-sidebar-nav-item-background-color-hover;
-		}
-		&:active {
-			background-color: $mrl-sidebar-nav-item-background-color-active;
-		}
-	}
-	&.hasIcon > a {
-		padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))
-			calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
-	}
-	&.MrlSidebarNavItem-selected a,
-	&.MrlSidebarNavItem-selected a:hover {
-		background-color: $mrl-sidebar-nav-item-background-color-selected;
-		color: $mrl-sidebar-nav-item-text-color-selected;
-	}
-}
-.MrlSidebarNavItem-icon {
-	height: var(--mrl-spacing-06);
-	margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
-	width: var(--mrl-spacing-06);
-}

package/dist/styles/MrlSkeleton/module.scss

@@ -1,9 +0,0 @@
-
-@use '../skeleton.mixins.scss' as *;
-.MrlSkeleton {
-	@include mrl-skeleton-base;
-	@include mrl-skeleton-shimmer-effect;
-}
-.MrlSkeleton-circle {
-	border-radius: 50%;
-}