Rocket.Chat/packages/rocketchat-theme/client/imports/components/popover.css

:root {
	--rc-popover-open: {
		display: flex;
		align-items: flex-start;
		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
	--rc-popover-open-mobile: {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
}

.rc-popover-anchor {
	display: none;

	&:checked + .rc-popover {
		@apply --rc-popover-open;
	}
}

.rc-popover {
	display: none;
	position: absolute;
	will-change: transform;
	z-index: 9999;

	&__content {
		display: flex;
		padding: 1rem;
		border-radius: 2px;
		background-color: #ffffff;
		box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12);
		cursor: default;
	}

	&--show {
		@apply --rc-popover-open;
	}

	&__column {
		display: flex;
		flex-direction: column;
		min-width: 130px;
		flex: 1 0 auto;

		&:not(:first-child) {
			padding-left: 1rem;
		}

		&-wrapper:not(:first-child) {
			margin-top: 1rem;
		}
	}

	&__title {
		font-size: 0.75rem;
		text-transform: uppercase;
		color: #2f343d;
		margin-bottom: 8px;
	}

	&__item {
		display: flex;
		align-items: center;
		color: #2f343d;
		font-size: 0.875rem;
		padding: 4px 0;
		cursor: pointer;
	}

	&__icon {
		width: 16px;
		margin: 0.25rem 0.25rem 0.25rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&__icon-element {
		stroke: currentColor;

		&--customize {
			width: 14px;
			height: 14px;
		}

		&--comment-alt {
			width: 16px;
			height: 14px;
		}

		&--user {
			width: 18px;
			height: 17px;
		}

		&--sign-out {
			width: 14px;
			height: 14px;
		}

		&--video {
			width: 17px;
			height: 13px;
		}

		&--audio {
			width: 16px;
			height: 14px;
		}

		&--computer {
			width: 16px;
			height: 14px;
		}

		&--map-pin {
			width: 12px;
			height: 16px;
		}
	}

	&__item-text {
		margin-left: 0.25rem;
	}

	&__divider {
		width: 100%;
		height: 2px;
		background: #e1e5e8;
		margin: 1rem 0;
	}
}

@keyframes dropdown-show {
	0% {
		transform: translate(0, -2%);
		opacity: 0;
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

@media (width <= 400px) {
	.rc-popover {
		&-anchor:checked + .rc-popover {
			@apply --rc-popover-open-mobile;
		}

		&--show {
			@apply --rc-popover-open-mobile;
		}
	}
}