/*
 * PULLDOWN MENU
 */

:root {
	--product-zoeken-font-size: 22px;
}

/*
 * ------------------------------------------------------------
 * MENU
 * ------------------------------------------------------------
 */

#pulldown_menu {
	width: 250px;
	flex-shrink: 0;
	background: var(--pulldownmenu_background_color);
	color: white;
	padding: 3px;
	margin: 0 3px 0 0;
	border-right: 1px solid black;
	box-sizing: border-box;
}


#pulldown_menu > nav.pulldown_menu {
	display: block;
	width: 100%;
	margin: 0;
}

/*
 * Alle lijsten zijn gewone boomstructuren.
 */

#pulldown_menu .pulldown_menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}


/*
 * Een menu-item zelf.
 */

#pulldown_menu .pulldown_menu-item {
	display: block;
	background-color: var(--pulldownmenu_item_color);
	border-bottom: 1px solid var(--pulldownmenu_border_bottom_color);
	padding: 0;
}


/*
 * De submenu's worden alleen gegenereerd voor actieve items.
 */

#pulldown_menu .pulldown_menu-item > .pulldown_menu-list {
	margin-left: 10px;
	width: calc(100% - 10px);
	box-sizing: border-box;
}


/*
 * Actieve groep krijgt een andere achtergrond.
 */

#pulldown_menu .pulldown_menu-item.active {
	background-color: var(--pulldownmenu_selected_group_color);
}


/*
 * Links
 */

#pulldown_menu .pulldown_menu-item > a {
	display: flex;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;

	text-decoration: none;
	color: white;

	justify-content: space-between;
	align-items: center;
}


/*
 * Hover
 */

#pulldown_menu .pulldown_menu-item > a:hover {
	background: var(--pulldownmenu_background_hover_color);
	color: #eee;
	border-bottom: 1px solid #ccc;
}


/*
 * Submenu's iets kleiner.
 */

#pulldown_menu .pulldown_menu-list .pulldown_menu-item > a {
	font-size: 14px;
}


/*
 * Pijltjes
 */

#pulldown_menu .pulldown_menu-item > a i {
	margin-left: 8px;
}


/*
 * Actieve tak:
 * pijl naar beneden.
 */

#pulldown_menu .pulldown_menu-item.active > a i {
	transform: rotate(90deg);
}

/*
 * ------------------------------------------------------------
 * ZOEKEN
 * ------------------------------------------------------------
 */
 
 #pulldown_menu .zoek_product {
	 display: block;
 }

/*
 * ------------------------------------------------------------
 * @MEDIA CONTENT
 * ------------------------------------------------------------
 */
@media screen and (max-width: 768px) {
	#pulldown_menu {
		position: fixed;
		
		border-right: 1px solid #555;
		box-shadow: 4px 0 8px rgba(0, 0, 0, 0.3);
		
		top: 100px;
		left: -100%;
		width: 100%;
		max-width: 250px;
		height: calc(100% - 70px);
		z-index: 999;
	}

	#pulldown_menu.open {
		left: 0;
	}

/*
 * ------------------------------------------------------------
 * ZOEKEN
 * ------------------------------------------------------------
 */
 
#pulldown_menu .zoek_product {
	 display: none;
 }

}