.rrui__slideout-menu
{
	position         : fixed;
	z-index          : var(--rrui-z-index-overlay);
	padding-top      : calc(var(--rrui-list-vertical-padding) * 2.5);
	padding-bottom   : calc(var(--rrui-list-vertical-padding) * 2.5);
	/* `box-sizing` is for padding to not glitch when overflown vertically. */
	box-sizing       : border-box;
	overflow-y       : auto;
	opacity          : 0.9;
	background-color : var(--rrui-slide-out-menu-background-color);
	color            : var(--rrui-slide-out-menu-text-color);
	transform        : translate3d(-100%, 0, 0);
	transition       : transform var(--rrui-slideout-menu-animation-duration) ease-out, box-shadow var(--rrui-slideout-menu-animation-duration) ease-out;
}

.rrui__slideout-menu--fullscreen
{
	display         : flex;
	flex-direction  : column;
	justify-content : center;
}

.rrui__slideout-menu--expanded
{
	box-shadow : 0 0 0.2em rgba(0, 0, 0, 0.4);
}

.rrui__slideout-menu--left
{
	left      : 0;
	top       : 0;
	bottom    : 0;
	transform : translate3d(-100%, 0, 0);
}

.rrui__slideout-menu--left.rrui__slideout-menu--fullscreen
{
	right : 0;
}

.rrui__slideout-menu--left.rrui__slideout-menu--expanded
{
	transform : translate3d(0, 0, 0);
}

.rrui__slideout-menu--right
{
	right     : 0;
	top       : 0;
	bottom    : 0;
	transform : translate3d(100%, 0, 0);
}

.rrui__slideout-menu--right.rrui__slideout-menu--fullscreen
{
	left : 0;
}

.rrui__slideout-menu--right.rrui__slideout-menu--expanded
{
	transform : translate3d(0, 0, 0);
}

.rrui__slideout-menu--top
{
	left      : 0;
	right     : 0;
	top       : 0;
	transform : translate3d(0, -100%, 0);
}

.rrui__slideout-menu--top.rrui__slideout-menu--fullscreen
{
	bottom : 0;
}

.rrui__slideout-menu--top.rrui__slideout-menu--expanded
{
	transform : translate3d(0, 0, 0);
}

.rrui__slideout-menu--bottom
{
	left      : 0;
	right     : 0;
	bottom    : 0;
	transform : translate3d(0, 100%, 0);
}

.rrui__slideout-menu--bottom.rrui__slideout-menu--fullscreen
{
	top : 0;
}

.rrui__slideout-menu--bottom.rrui__slideout-menu--expanded
{
	transform : translate3d(0, 0, 0);
}

.rrui__slideout-menu__item
{
	display       : block;
	height        : var(--rrui-list-item-height);
	line-height   : var(--rrui-list-item-height);
	padding-left  : calc(var(--rrui-expandable-menu-item-side-padding) * 1.5);
	padding-right : calc(var(--rrui-expandable-menu-item-side-padding) * 1.5);

	opacity    : 0;
	transition : opacity calc(var(--rrui-slideout-menu-animation-duration) / 2) ease-out;
}

.rrui__slideout-menu--expanded .rrui__slideout-menu__item
{
	opacity : 1;
}

.rrui__slideout-menu__item:hover
{
	text-decoration : none;
}

.rrui__slideout-menu__item:active
{
	background-color : var(--rrui-slide-out-menu-background-color-active);
	color            : var(--rrui-slide-out-menu-text-color-active);
}

.rrui__slideout-menu--fullscreen .rrui__slideout-menu__item
{
	text-align : center;
}