.popover {
	display: inline-block;
}
.popover__body li {
	padding: 7px 0px;
}

.popover .popover__body {
	display: none;
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	z-index: 10;
	background: var(--bg-color);
	transform: translateX(-50%);
	padding: 10px 15px;
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	font-size: var(--normal);
	min-width: 200px;
	z-index: 12;
}
    .popover.show .popover__body { display: block;}

.popover__body::before {
	content: "";
	border-bottom: 10px solid var(--bg-color);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: 100%;
	left: 50%;
}