@mixin mm_offcanvas_size( $cls: ".mm-menu_offcanvas",
	$width: $mm_menuWidth, $minWidth: $mm_menuMinWidth, $maxWidth: $mm_menuMaxWidth
) {
	#{$cls} {
		width: percentage( $width );
		min-width: $minWidth;
		max-width: $maxWidth;
	}

	.mm-wrapper_opening {
		#{$cls} ~ .mm-slideout {
			transform: translate3d( #{$width * 100}vw, 0, 0 );
		}
	}

	//	adjust for min- and max-width
	@media all and ( max-width: $minWidth / $width ) {
		.mm-wrapper_opening {
			#{$cls} ~ .mm-slideout {
				transform: translate3d( $minWidth, 0, 0 );
			}
		}
	}

	@media all and ( min-width: $maxWidth / $width ) {
		.mm-wrapper_opening {
			#{$cls} ~ .mm-slideout {
				transform: translate3d( $maxWidth, 0, 0 );
			}
		}
	}
}