@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-menu_opened ~ .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-menu_opened ~ .mm-slideout
			{
				transform: translate3d( $minWidth, 0, 0 );
			}
		}
	}
	@media all and ( min-width: $maxWidth / $width ) {
		.mm-wrapper_opening
		{
			#{$cls}.mm-menu_opened ~ .mm-slideout
			{
				transform: translate3d( $maxWidth, 0, 0 );
			}
		}
	}
}
