/***   SELECTIONS   ***/



.selections
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}



/***   SELECTION   ***/



.selection
	{
		width: 100%;
	}

.selection > * > * > .layout-container
	{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex-grow: 1;
	}

/**   SELECTION BUTTON   **/

/*
.filter-button
	{
		position: relative;
		display: none;
		margin: 0px;
		width: 100%;
		justify-content: center;
		border: solid 1px rgb(162, 162, 162);
		padding: 10px;
		cursor: pointer;
	}

.filter-button::before
	{
		content: '';
		width: 10px;
		height: 10px;
		background-image: url(/graphics/chevron-down.svg);
		display: inline-block;
		background-repeat: no-repeat;
		position: absolute;
		top: 16px;
		right: 10px;
	}
*/


/***   SELECT   ***/



.select
	{
		max-width: 100%;
		position: relative;
		x-max-width: 240px;
		flex-grow: 1;
		margin: 5px 10px 5px 0px;
	}

.select:is( body[max-width~="768px"] *[data-open=true] )
	{
		position: fixed;
		height: 100vh;
		width: 100vh;
		top: 0px;
		left: 0px;
		z-index: 300;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 100%;
		padding: 30px;
		margin: auto;
	}



/**   SELECT - OPTIONS SELECTED   **/



.select .options.selected
	{
		position: relative;
		display: flex;
		flex-direction: row;
		cursor: pointer;
		padding: 10px;
		overflow: hidden;
		white-space: nowrap;
		justify-content: space-between;
	}

.select:is([data-open=true]) .options.selected
	{
		z-index: 200;
	}

.select .options.selected::after
	{
		content: "";
		position: relative;
		display: flex;
		min-width: 20px;
		width: 20px;
		height: auto;
		background-image: url(https://modules.silksites.nl/cdn/graphics/arrow-bottom.svg);
		background-size: 12px;
		background-repeat: no-repeat;
		background-position: center;
		margin-left: auto;
	}

.select:is([data-required=true][data-multiple=false]:not([data-open=true])) .options.selected .title
	{
		display: none;
	}

.select:is([data-open=true]) .options.selected .title::after
	{
		margin: 0px 0px 0px 10px;
		transform: rotate(180deg);
	}

.select .options.selected .list
	{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		margin: 0px 0px 0px 10px;
	}

.select .options.selected .list::after
	{
		content: "";
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0px;
		right: 0px;
		background: linear-gradient(120deg, rgba(255, 255, 255, 0) ,rgba(255, 255, 255, 1));
		cursor: pointer;

	}

.select .options.selected:is([data-open=true]) .list
	{
		display: none;
	}

.select .options.selected .list ul
	{
		display: flex;
		flex-direction: row;
		cursor: pointer;
	}

.select:is([data-multiple=true]) .options.selected .list ul.selected
	{
		position: absolute;
	}

.select:is([data-open=true]) .options.selected .list ul.selected
	{
		display: none;
	}

.select .options.selected .list ul li
	{
		white-space: nowrap;
	}

.select .options.selected .list ul :is(li + li::before)
	{
		content: ' , ';
	}


/**   SELECT - OPTIONS LIST   **/


.select .options.list
	{
		display: none;
		max-height: 360px;
		min-width: 150px;
		position: absolute;
		overflow: auto;
	}

.select:is([data-open=true]) .options.list
	{
		display: block;
		margin-top: -1px;
		min-width: 100%;
		z-index: 200;
	}

.select:is( body[max-width~="768px"] *[data-open=true] ) .options.list
	{
		position: relative;
	}

.select:is([data-open=false]) .options.list ul.option
	{
		x-display: none;
	}

.select .options.list ul.option li
	{
		position: relative;
		display: flex;
		cursor: pointer;
		padding: 8px 40px 8px 10px;
		white-space: nowrap;
	}

.select .options.list ul.option li:is([data-available=false])
	{
		x-display: none;
	}

.select:is([data-open=true][data-multiple=true]) .options.list ul.option li:is([data-selected=true])::after
	{
		content: "";
		position: absolute;
		top: 7px;
		right: 10px;
		display: flex;
		width: 20px;
		height: 20px;
		background-image: url(https://modules.silksites.nl/cdn/graphics/cross.svg);
		background-size: 6px;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgb( 255, 255, 255 );
		border-radius: 50%;
	}





/*

.select .options.list .checkbox
	{
		width: 18px;
		min-width: 18px;
		height: 18px;
		display: block;
		margin-right: 5px;
	}

.filter-item .filter-container .search input
	{
		width: 100%;
		padding: 5px;
		font-size: 0.8em;
	}


.filter-item-container:is([data-open=true]) .title
	{
		max-width: 100%;
	}

:is( body[max-width~="600px"] * ).filter-item-container
	{
		flex-direction: column;
	} 

:is( body[max-width~="600px"] * ).filter-item
	{
		max-width: inherit;
	}

*/