/* https://codepen.io/bennettfeely/pen/twbyA */

.rrui__menu-button-icon-x
{
	width  : 100%;
	height : 100%;
}

.rrui__menu-button-icon-x__icon
{
	position   : relative;
	top        : calc((100% - 12.5%) / 2);
	height     : 12.5%;
	transition : transform var(--rrui-menu-button-animation-duration), background-color var(--rrui-menu-button-animation-duration);
}

.rrui__menu-button-icon-x__icon,
.rrui__menu-button-icon-x__icon:before,
.rrui__menu-button-icon-x__icon:after
{
	background-color : currentColor;
}

.rrui__menu-button-icon-x__icon:before,
.rrui__menu-button-icon-x__icon:after
{
	display    : block;
	content    : "";
	position   : absolute;
	top        : 0;
	left       : 0;
	width      : 100%;
	height     : 100%;
	/*z-index  : -1;*/
	transition : transform var(--rrui-menu-button-animation-duration);
}

.rrui__menu-button-icon-x__icon:before
{
	transform: translateY(-200%); /* 25% */
}

.rrui__menu-button-icon-x__icon:after
{
	transform: translateY(200%); /* 25% */
}

.rrui__menu-button-icon-x:hover .rrui__menu-button-icon-x__icon--collapsed:before
{
	transform : translateY(-264%); /* -33% */
}

.rrui__menu-button-icon-x:hover .rrui__menu-button-icon-x__icon--collapsed:after
{
	transform : translateY(264%); /* +33% */
}

.rrui__menu-button-icon-x__icon--expanded
{
	background-color : transparent;
	transform : scale(0.85);
}

.rrui__menu-button-icon-x__icon--expanded:before
{
	transform : rotate(-45deg);
}

.rrui__menu-button-icon-x__icon--expanded:after
{
	transform : rotate(45deg);
}