/* menuder.css */
:root {
	--menuder-bg: #fff;
	--menuder-border-color: #666;
	--menuder-border-width: 2px 0;

	--menuder-child-first-border-color: #fff #bbb #bbb #bbb;
	--menuder-child-first-border-width: 2px 2px 2px 2px;
	--menuder-child-first-bg: #fff;

	--menuder-child-next-border-color: #bbb;
	--menuder-child-next-border-width: 2px;
	--menuder-child-next-bg: #fff;

	--menuder-caret-color: currentColor;
	--menuder-link-padding-y: 0.25em;
	--menuder-link-padding-x: 0.75em;
	--menuder-caret-bottom-img:url('img/chevron-bottom-xx.svg');
	--menuder-caret-right-img:url('img/chevron-right-xx.svg');
	--menuder-caret-width:1em;
	--menuder-caret-height:1.5em;
}

.menuder-container {}
.menuder {
	background-color: var(--menuder-bg,#fff);
	border: solid var(--menuder-border-color, #666);
	border-width: var(--menuder-border-width,1px 0);
}

.menuder ul,
.menu-items.menuder,
.menuder .menu-items {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: row;
	font-weight: bold;
}

.menuder li,
.menuder .menu-items__item {
	width: 100%;
	padding: 0;
	position: relative;
}

.menuder a,
.menuder .menu-items__lien  {
	display: block;
	height: 100%;
	padding-top: var(--menuder-link-padding-y, 0.25em);
	padding-bottom: var(--menuder-link-padding-y, 0.25em);
	padding-left: var(--menuder-link-padding-x, 0.75em);
	padding-right: var(--menuder-link-padding-x, 0.75em);
	text-decoration: none;
}

.menuder a.daddy,
.menuder .menu-items__lien:not(:last-child){
	padding-right: 1.5em;
}
.menuder a.daddy:before,
.menuder .menu-items__lien:not(:last-child):before  {
	content:'';
	display: block;
	position: absolute;
	top:var(--menuder-link-padding-y, 0.25em);
	right: var(--menuder-link-padding-x, 0.75em);
	width: var(--menuder-caret-width,1em);
	height: var(--menuder-caret-height,1.5em);

	background-color:var(--menuder-caret-color,currentColor);
	-webkit-mask-image: var(--menuder-caret-bottom-img);
	mask-image: var(--menuder-caret-bottom-img);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	transition: transform ease 0.25s;
}

.menuder li li a.daddy:before,
.menuder .menu-items__item .menu-items__item .menu-items__lien:before {
	-webkit-mask-image: var(--menuder-caret-right-img);
	mask-image: var(--menuder-caret-right-img);
}

.menuder li,
.menuder .menu-items__item {
	width: 100%;
	padding: 0;
	position: relative;
}

.menuder li ul,
.menuder .menu-items__item .menu-items {
	flex-direction: column;

	position: absolute;
	left: -999rem;
	height: auto;
	width: auto;
	min-width: 100%;
	max-width: 20em;
	margin: 0;
	font-weight: normal;
	z-index:100;

	border-style:solid;
	background-color: var(--menuder-child-first-bg,#fff);
	border-color: var(--menuder-child-first-border-color, #bbb);
	border-width: var(--menuder-child-first-border-width, 2px);
}

.menuder li li ul,
.menuder .menu-items__item .menu-items__item .menu-items {
	background-color: var(--menuder-child-next-bg,#fff);
	border-color: var(--menuder-child-next-border-color, #bbb);
	border-width: var(--menuder-child-next-border-width, 2px);
}


.menuder li:hover>ul,
.menuder li:focus-within>ul,
.menuder .menu-items__item:hover>.menu-items,
.menuder .menu-items__item:focus-within>.menu-items {
	left: auto;
}

.menuder li:hover>a:before,
.menuder li:focus-within>a:before,
.menuder .menu-items__item:hover>.menu-items__lien:before,
.menuder .menu-items__item:focus-within>.menu-items__lien:before {
	transform: rotate(180deg);
	opacity: 0.5;
}


.menuder li li:hover>ul,
.menuder li li:focus-within>ul,
.menuder .menu-items__item .menu-items__item:hover>.menu-items,
.menuder .menu-items__item .menu-items__item:focus-within>.menu-items {
	left: 100%;
	top:0;
}