.dropdown {
	position: relative;

	> button {
		height: calc(8 * var(--spacing));
		padding: calc(1 * var(--spacing)) calc(2.5 * var(--spacing));
		border-radius: var(--radius-md);

		&:hover {
			background-color: var(--bg-color-light);
		}

		> img {
			width: calc(4 * var(--spacing));
			height: calc(4 * var(--spacing));
		}
	}

	> ul {
		position: absolute;
		top: calc(8 * var(--spacing));
		right: 0;
		border-radius: var(--radius-md);
		border: 1px solid var(--color-neutral-200);
		padding: calc(1 * var(--spacing));
		box-shadow: var(--shadow-md);
		background-color: white;
		width: max-content;
		z-index: 1;
	}

	li {
		padding: calc(1.5 * var(--spacing)) calc(2 * var(--spacing));

		&:hover {
			background-color: var(--bg-color-light);
		}

		> div {
			cursor: default;
		}

		> a {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}