@derockdev/discord-components-core/dist/collection/components/discord-mention/discord-mention.css

Web components to easily build and display fake Discord messages on your webpages.

.discord-message .discord-mention {
	color: #e3e7f8;
	background-color: hsla(235, 85.6%, 64.7%, 0.3);
	font-weight: 500;
	padding: 0 2px;
	border-radius: 3px;
	unicode-bidi: -moz-plaintext;
	unicode-bidi: plaintext;
	-webkit-transition: background-color 50ms ease-out, color 50ms ease-out;
	transition: background-color 50ms ease-out, color 50ms ease-out;
	cursor: pointer;
}

.discord-message .discord-mention:hover {
	color: #fff;
	background-color: hsl(235, 85.6%, 64.7%);
}

.discord-message .discord-mention.discord-channel-mention {
	padding-left: 1.2rem !important;
	position: relative;
}

.discord-message .discord-mention.discord-voice-mention,
.discord-message .discord-mention.discord-locked-mention,
.discord-message .discord-mention.discord-thread-mention,
.discord-message .discord-mention.discord-forum-mention {
	padding-left: 1.25rem !important;
	position: relative;
}

.discord-light-theme .discord-message .discord-mention {
	color: #687dc6;
	background-color: hsla(235, 85.6%, 64.7%, 0.15);
}

.discord-light-theme .discord-message .discord-mention:hover {
	color: #ffffff;
	background-color: hsl(235, 85.6%, 64.7%);
}

.discord-message .discord-mention .discord-mention-icon {
	width: 1rem;
	height: 1rem;
	object-fit: contain;
	position: absolute;
	left: 0.125rem;
	top: 0.125rem;
}