.Select {
	display:flex;
	flex-direction:column;
	position:relative;
	color:#000;
	user-select:none;
	cursor:pointer;
	opacity:0;
	transition:opacity 150ms ease-out;
	align-items: flex-start;
}
.Select > .title {
	color:#fff;
	user-select: none;
    font-weight: 600;
}
.Select > .title + .select-wrap {
	margin-top:10px;
}
.Select[data-visible='true'] {
	opacity:1;
}
.Select > .select-wrap {
	display:flex;
	flex-flow:column;
	position:relative;
}
.Select > .select-wrap > .label {
	display:flex;
	border-radius:4px;
	padding:10px 40px 10px 10px;
	background:#fff;
	position:relative;
	z-index:2;
	align-items:center;
}
.Select > .select-wrap > .label:after {
	position:absolute;
	right:0px;
	width:40px;
	height:40px;
	background: url(/naering/gfx/arrow-black.svg) no-repeat center / 50%;
	transition:transform 150ms ease-out;
	content:'';
}
.Select[data-open='true'] {
	z-index:50;
}
.Select[data-open='true'] > .select-wrap > .label:after {
	transform:rotateX(180deg);
}

.Select > .select-wrap > .list-wrap {
	top:40px;
	z-index:1;
	opacity:0;
	min-width:200px;
	background:#fff;
	border-radius:4px;
	position:absolute;
	pointer-events:none;
	box-shadow:0 10px 30px rgba(0,0,0,.5);
	transform:translate3d(0, -20px, 0);
	transition:transform 150ms ease-out, opacity 150ms ease-out;
}
.Select[data-open='true'] > .select-wrap > .label {
	border-radius:4px 4px 0 0;
}
.Select[data-open='true'] > .select-wrap > .list-wrap {
	opacity:1;
	transform:none;
	border-radius:0 4px 4px 4px;
	pointer-events:all;
}
.Select > .select-wrap > .list-wrap > .list-item {
	padding:10px;
}
.Select > .select-wrap > .list-wrap > .list-item:hover {
	background:#00000010;
}