@import '../common';

.oo-ui-menuLayout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	&-menu,
	&-content {
		position: absolute;
		.oo-ui-transition(all ease-in-out 200ms);
	}

	&-content {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	&-top {
		.oo-ui-menuLayout-menu {
			left: 0;
			top: 0;
			right: 0;
		}

		.oo-ui-menuLayout-content {
			right: 0 !important;
			bottom: 0 !important;
			left: 0 !important;
		}
	}

	&-after {
		.oo-ui-menuLayout-menu {
			top: 0;
			right: 0;
			bottom: 0;
		}

		.oo-ui-menuLayout-content {
			bottom: 0 !important;
			left: 0 !important;
			top: 0 !important;
		}
	}

	&-bottom {
		.oo-ui-menuLayout-menu {
			right: 0;
			bottom: 0;
			left: 0;
		}

		.oo-ui-menuLayout-content {
			left: 0 !important;
			top: 0 !important;
			right: 0 !important;
		}
	}

	&-before {
		.oo-ui-menuLayout-menu {
			bottom: 0;
			left: 0;
			top: 0;
		}

		.oo-ui-menuLayout-content {
			top: 0 !important;
			right: 0 !important;
			bottom: 0 !important;
		}
	}

	.theme-oo-ui-menuLayout();
}