.dropdown {
	position: relative;
	cursor: pointer;
}

.dropdown::before {
	position: absolute;
	display: block;
	content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>');
	top: 8px;
	right: -10px;
	width: 1rem;
}

.dropdown.open::before {
	content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>');
}

.dropdown-menu {
	padding: 2rem;
	position: absolute;
	background-color: var(--surface-light);
	color: var(--text-color);
	border-radius: var(--border-radius);
	z-index: var(--z-index-dropdown);
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 0 5px rgb(204 204 204 / 70%);
	transition: all .1s ease-in;
}

.dropdown.open .dropdown-menu {
	visibility: visible;
	opacity: 1;
}