/**
 * Stylesheet Tree Menu
 *
 * @package usertheme
 * @subpackage usertheme
 * @since usertheme
 */

/** selecter **/
.treemenu{
	position: relative;
	z-index: 10;
}
.treemenu > ul{
	height: 0;
	overflow: hidden;

	transition-duration: 0.4s;
	transition-timing-function: ease;
}
.treemenu.treemenu-after > ul{
	height: auto !important;
}
.treemenu > ul > li{
	opacity: 0;
	transform: translateY(-15px);

	transition-duration: 0.4s;
	transition-timing-function: ease;
}
.treemenu.treemenu-opened > ul > li{
	opacity: 1;
	transform: translateY(0);
}
.treemenu > .treemenu-button{
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	cursor: pointer;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 15px;
	line-height: 1.0em;

	transform: rotate(0deg);
	transform-origin: 50% 50%;
	transition-duration: 0.4s;
	transition-timing-function: ease;
}
.treemenu > .treemenu-button::before{
	font-family: dashicons;
	content: "\f347";
}
.treemenu.treemenu-opened > .treemenu-button{
	transform: rotate(180deg);
	transform-origin: 50% 50%;
}

/** Mobile selecter **/
.treemenu-mobile{
	position: relative;
	z-index: 10;
}
.treemenu-mobile > .treemenu-button-mobile{
	display: none;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	cursor: pointer;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 15px;
	line-height: 1.0em;
}
.treemenu-mobile > .treemenu-button-mobile::before{
	font-family: dashicons;
	content: "\f347";
}
@media screen and (max-width: 736px) {
	.treemenu-mobile > ul{
		height: 0;
		overflow: hidden;

		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	.treemenu-mobile.treemenu-after-mobile > ul{
		height: auto !important;
	}
	.treemenu-mobile > ul > li{
		opacity: 0;
		transform: translateY(-15px);

		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	.treemenu-mobile.treemenu-opened-mobile > ul > li{
		opacity: 1;
		transform: translateY(0);
	}
	.treemenu-mobile > .treemenu-button-mobile{
		display: block;

		transform: rotate(0deg);
		transform-origin: 50% 50%;
		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	.treemenu-mobile.treemenu-opened-mobile > .treemenu-button-mobile{
		transform: rotate(180deg);
		transform-origin: 50% 50%;
	}
}