.rrui__expandable
{
	opacity        : 0;
	pointer-events : none;

	transform        : var(--rrui-expandable-transform-hide);
	transform-origin : var(--rrui-expandable-transform-origin);
	transition       : var(--rrui-expandable-transition-hide);

	/* prevent white background showing through the transparent border */
	/* http://stackoverflow.com/questions/7473200/transparent-border-expands-background-color-image */
	background-clip         : padding-box;
	-webkit-background-clip : padding-box;
}

.rrui__expandable--expanded
{
	opacity        : 1;
	pointer-events : auto;

	transform  : var(--rrui-expandable-transform-show);
	transition : var(--rrui-expandable-transition-show);
}

/* A small "hack" for "fade up" animation of `<ExpandableMenu/>`. */
.rrui__expandable--fade-up {
	transform: translateY(var(--rrui-expandable-fade-distance));
	transition: var(--rrui-expandable-transition-show);
}

/* A small "hack" for "fade up" animation of `<ExpandableMenu/>`. */
.rrui__expandable--expanded--fade-up {
	transform: translateY(0);
}

.rrui__expandable--overlay
{
	position : absolute;
	z-index  : 1;
}

.rrui__expandable__content
{
	/*
	The inner block's `opacity` is animated too
	(it fades in and out by itself too).
	This is done to fade out the inner block when the dropdown is collapsed
	therefore hiding an otherwise bizarre and unwanted visual clutter
	*/
	opacity: var(--rrui-expandable-content-opacity-hide);

	/* Mitigates inner content overlapping with itself creating a feeling of a mess */
	transition: var(--rrui-expandable-content-transition);
}

/* A small "hack" for "fade up" animation of `<ExpandableMenu/>`. */
.rrui__expandable__content--fade-up {
	opacity: 1;
	transition: none;
}

.rrui__expandable__content--expanded
{
	opacity: 1;
}

.rrui__expandable--left-aligned
{
	left: 0;
}

.rrui__expandable--right-aligned
{
	right: 0;
}

.rrui__expandable--downward
{
	/* When an html page is overflown by a long list
	   then this bottom margin helps to see that
	   there's no more options left out being clipped or something */
	margin-bottom: var(--rrui-expandable-margin);
}

.rrui__expandable--upward
{
	bottom: 100%;
	transform-origin: var(--rrui-expandable-transform-origin-upward);

	/* When an html page is overflown by a long list
	   then this bottom margin helps to see that
	   there's no more options left out being clipped or something */
	margin-top: var(--rrui-expandable-margin);
}

.rrui__expandable__close
{
	/*
	Set `display` to `block` for fullscreen `.rrui__expandable` design.
	display : block;
	*/
	display : none;
}