/*
 * @copyright	Copyright (C) 2011 Simplify Your Web, Inc. All rights reserved.
 * @license		GNU General Public License version 3 or later; see LICENSE.txt
 */
 
ul.rawmenu,
ul.rawmenu ul {
	margin: 0;
    padding: 0;
    list-style: none;
}

ul.rawmenu li > * {
	display: inline-block;
	padding: 0.5rem;
}

ul.rawmenu a {
	text-decoration: none;
}
 
ul.rawmenu a:hover span,
ul.rawmenu a:focus span {
	text-decoration: underline;
}

ul.rawmenu a[href="#"]:hover,
ul.rawmenu a[href="#"]:focus {
	text-decoration: none;
}

ul.rawmenu a > i::before {
	display: inline-block; /* removes the text decoration */
}
 
ul.rawmenu .expcol {
    font-size: 1em;
    line-height: inherit;
	grid-area: cross;
	align-self: center;
	justify-self: center;
	width: auto;
	padding: 0;
	margin: 0 .35em;
}

ul.rawmenu .expcol + * {
	grid-area: title;
	align-self: center;
	line-height: normal;
	width: max-content;
}
 
ul.rawmenu .expcol:hover {
    cursor: pointer;
}
 
ul.rawmenu .active .expcol:hover {
    cursor: auto;
}

ul.rawmenu .expcol.no-icon {
	font-family: monospace;
	font-size: xx-large;
	line-height: normal;
}
 
ul.rawmenu .expcol.no-icon:before {
    content: "+";
}
 
ul.rawmenu .active > .expcol.no-icon:before,
ul.rawmenu .expanded > .expcol.no-icon:before {
    content: "-";
}
 
ul.rawmenu .deeper { 
    position: relative; /* hooks are absolute-positionned, therefore the parent element must be relative */
}

ul.rawmenu.pre > .deeper ul,
ul.rawmenu.post > .deeper ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    visibility: hidden;
}
 
ul.rawmenu .deeper.expanded > ul,
ul.rawmenu .active.deeper > ul {
    max-height: initial;
    visibility: visible;
}

ul.rawmenu.pre .deeper,
ul.rawmenu.post .deeper {
	display: inline-grid !important;
	grid-template-rows: auto;
	width: 100%;
}

ul.rawmenu.post .deeper {	
	grid-template-columns: 1fr min-content;	
	grid-template-areas: "title cross" "submenu submenu";
}

ul.rawmenu.post.post-beside .deeper {
	grid-template-columns: auto 1fr; /* get arrows close to text */
}

ul.rawmenu.post.post-beside .deeper > a {
	justify-self: start;
}

ul.rawmenu.pre .deeper {
	grid-template-columns: min-content auto;
	grid-template-areas: "cross title" ". submenu";
}

ul.rawmenu.pre .deeper .rawmenu-child,
ul.rawmenu.post .deeper .rawmenu-child {
	grid-area: submenu;
}

ul.rawmenu .deeper .rawmenu-child {	
	padding: 0;
	width: calc(100% - 30px);
	margin: 0 0 0 30px;
}

ul.rawmenu.no-indent .deeper .rawmenu-child {
	width: 100%;
	margin: 0;
}