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

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

.discord-reaction {
	border-radius: 0.5rem;
	cursor: pointer;
	flex-shrink: 0;
	margin-right: 0.25rem;
	margin-bottom: 0.25rem;
	user-select: none;
	transition: none 0.1s ease;
	transition-property: background-color, border-color;
	background-color: #2f3136;
	border: 1px solid transparent;
}

.discord-light-theme .discord-reaction {
	background-color: #f2f3f5;
}

.discord-reaction:hover {
	background-color: #36393f;
	border-color: #fff2;
}

.discord-light-theme .discord-reaction:not(.discord-reaction-reacted):hover {
	background-color: white;
	border-color: #0003;
}

.discord-reaction.discord-reaction-reacted {
	background-color: rgba(88, 101, 242, 0.15);
	border-color: #5865f2;
}

.discord-light-theme .discord-reaction.discord-reaction-reacted {
	background-color: #e7e9fd;
}

.discord-reaction .discord-reaction-inner {
	display: flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
}

.discord-reaction img {
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0;
	min-width: auto;
	min-height: auto;
	object-fit: contain;
	vertical-align: bottom;
}

.discord-reaction .discord-reaction-count {
	font-size: 0.875rem;
	font-weight: 500;
	margin-left: 0.375rem;
	text-align: center;
	color: #b9bbbe;
}

.discord-light-theme .discord-reaction .discord-reaction-count {
	color: #4f5660;
}

.discord-reaction.discord-reaction-reacted .discord-reaction-count {
	color: #dee0fc;
}

.discord-light-theme .discord-reaction.discord-reaction-reacted .discord-reaction-count {
	color: #5865f2;
}