.dropdown {
	position: relative;

	> button.ellipsis {
		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) }
	}
}

.dropdown-sheet {
	position: absolute;
	right: 0;
	top: 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: var(--z-dropdown);

	&.--full-width { width: 100% }
	&.--drop-up {
		top: unset;
		bottom: 0;
	}

	@media (width < 40rem) {
		padding: 0;
		border: 0;
		border-radius: calc(8 * var(--spacing));
	}

	.dropdown-item {
		padding: calc(1.5 * var(--spacing)) calc(2 * var(--spacing));

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

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

		@media (width < 40rem) {
			font-size: var(--text-lg);
			padding: calc(4 * var(--spacing)) calc(6 * var(--spacing));
			border-top: 1px solid var(--color-neutral-200);

			&:first-child { border-top: 0 }
			&:hover { background-color: transparent }
		}
	}
}