.rrui__menu-icon {
	position: relative;
	width: 100%;
	height: 100%;
}

.rrui__menu-icon__bar {
	width: 100%;
	background-color: currentColor;
	position: absolute;
	height: var(--rrui-menu-icon-bar-thickness);
	border-radius: 1px; /* calc(var(--rrui-menu-icon-bar-thickness) / 2); */
	transform-origin: 50% 50%;
}

.rrui__menu-icon--expanded .rrui__menu-icon__bar {
	width: 100%;
	top: calc((100% - var(--rrui-menu-icon-bar-thickness)) / 2);
	transition: width 125ms 0s, top 125ms 0s, transform 125ms 125ms;
}

.rrui__menu-icon--expanded .rrui__menu-icon__bar:nth-child(1),
.rrui__menu-icon--expanded .rrui__menu-icon__bar:nth-child(2) {
	transform: rotate(-45deg);
}

.rrui__menu-icon--expanded .rrui__menu-icon__bar:nth-child(3) {
	transform: rotate(45deg);
}

.rrui__menu-icon--collapsed .rrui__menu-icon__bar {
	transition: transform 125ms 0s, top 125ms 125ms, width 125ms 125ms;
	transform: rotate(0);
}

.rrui__menu-icon--collapsed .rrui__menu-icon__bar:nth-child(1) {
	top: 17%;
}

.rrui__menu-icon--collapsed .rrui__menu-icon__bar:nth-child(2) {
	top: calc((100% - var(--rrui-menu-icon-bar-thickness)) / 2);
}

.rrui__menu-icon--collapsed .rrui__menu-icon__bar:nth-child(3) {
	top: calc(83% - var(--rrui-menu-icon-bar-thickness));
}