/***   FRAME   ***/



.frame
	{
		flex-direction: column;
		width: 33%;
		min-width: 280px;
		height: 100vh;
		position: fixed;
		top: 0px;
		left: -100%;
		transition: left 0.5s ease;
		z-index: 250;
	}

.frame:is( [data-open="true"] )
	{
		display: flex;
		left: 0px;
	}

.frame.overlay > .overlay
	{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		content: "";
		background-color: rgba(0, 0, 0, 0.3);
		opacity: 0;
		visibility: hidden;
		transition: opacity 1000ms;
	}

.frame > *
	{
		z-index: 500;
		opacity: 1;
	}



/**   CLOSE   **/



.frame .close
	{
		display: flex;
		align-items: center;
	}

.frame .close::before
	{
	    padding: 15px;
	}

.frame .close::after
	{
		width: 17px;
		height: 17px;
		display: block;
		content: url(https://library.silkdemo.nl/graphics/basic/cross-thin.svg);
		cursor: pointer;
		padding: 15px;
	}



/*   CLOSE TEXT   */



.frame.close-text .close
	{
		flex-direction: row;
		justify-content: flex-end;
	}

.frame.close-text .close::before
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		content: "Sluiten";
		cursor: pointer;
	}



/*   MENU TEXT   */



.frame.menu-text .close
	{
		flex-direction: row;
		justify-content: space-between;
	}

.frame.menu-text .close::before
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		content: "Kies een categorie";
		cursor: pointer;
	}



/***   MENU   ***/



.menu ul li
	{
		display: flex;
	}

.menu ul li  .close
	{
		display: none;
	}

.menu ul li a
	{
		width: 100%;
		padding: 15px;
	}


/**   MENU LIST   **/


.menu .menu-list
	{
		position: relative;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex-grow: 1;
		transition: left 0.5s ease;
		overflow: scroll;
	}

.menu .menu-list ul
	{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

.menu .menu-list ul li
	{
		display: none;
	}

.frame:is( [data-open="true"] ) .menu-list > ul > li
	{
		display: block;
	}

.frame:is( [data-open="true"] ) .menu-list li:is( [data-open="true"] )
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

.frame:is( [data-open="true"] ) .menu-list li:is( [data-open="true"] ) > .close
	{
		display: flex;
	}

.frame:is( [data-open="true"] ) .menu-list li:is( [data-open="true"] ) > ul > li
	{
		display: block;
	}

.menu .menu-list ul li a
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

.menu .menu-list ul li:is( :not( [data-count="0"] ):not( [data-open="true"] ) ) > a::after
	{
		display: block;
		content: url(https://library.silkdemo.nl/graphics/arrow/arrow-tale-thin.svg);
		width: 20px;
		height: 18px;
	}

.menu .menu-list ul li:is( [data-open="true"]:not( [data-count="0"] ) ) > a
	{
		position: relative;
		justify-content: center;
		font-size: 1.125em;
	}

.menu .menu-list ul li:is( [data-open="true"]:not( [data-count="0"] ) ) > a::before
	{
		position: absolute;
		left: 15px;
		display: block;
		content: url(https://library.silkdemo.nl/graphics/arrow/arrow-tale-thin.svg);
		width: 20px;
		height: 18px;
	    transform: rotate(180deg);
	}

.menu .menu-list ul li:is( :not( [data-count="0"] ) ) > a::after:is(:hover)
	{
		width: 24px;
		height: 22px;
	}