:root {
	--fff: #fff;
	--f3f3f3: #f3f3f3;
	--f6f6f6: #f6f6f6;
	--f2f2f2: #f2f2f2;
	--eee: #eee;
	--e5e5e5: #e5e5e5;
	--ddd: #ddd;
	--d5d5d5: #d5d5d5;
	--002: rgba(0, 0, 0, 0.02);
	--005: rgba(0, 0, 0, 0.05);
	--015: rgba(0, 0, 0, 0.15);
	--025: rgba(0, 0, 0, 0.25);
	--border: 1px solid #d5d5d5;
	--border2: 2px solid #d5d5d5;
	--border3: 1px solid #c5c5c5;
}

[data-type="selection"] {
	font-size: 1rem;
	line-height: 1.063rem;
}
[data-type="selection"]::before,
[data-type="selection"]::after {
	cursor: pointer;
}
[data-type="selection"]::before {
	width: 100%;
	content: attr(data-selected);
	padding: 13px 15px;
	margin: 0 30px 0 0;
	position: relative; float: left;
	text-transform: capitalize;
	border: var(--border3);
	background: var(--fff);
}
[data-type="selection"]::after {
	font-family: "Font Awesome 6 Sharp";
    font-size: 1.375rem;
    line-height: 1.375rem;
    font-weight: 300;
	content: "\f0d7";
	position: absolute;
	top: 50%; right: 15px;
	transform: translateY(-50%);
}

[data-type="selection"] ul {
	width: 100%;
	max-height: 225px;
	position: absolute;
	top: 100%; left: 0;
	display: none;
	flex-flow: column nowrap;
	-webkit-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.7);
	box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.7);
	overflow-y: auto;
	z-index: 1;
}

[data-type="selection"] ul.active {
	display: flex;
}

[data-type="selection"] ul [data-option] {
	background: var(--fff);
}

[data-type="selection"] ul [data-option]::before {
	width: 100%;
	line-height: 1.125rem;
	content: attr(data-option);
	position: relative; float: left;
	text-transform: capitalize;
	padding: 13px 15px;
	margin: -1px 0 0 0;
	border: var(--border3);
	cursor: pointer;
}

[data-type="selection"] ul [data-option]:hover::before,
[data-type="selection"] ul [data-option].selected::before {
	background: var(--005);
}