<template>
	<div :class="{ 'discord-reaction-active': active }" class="discord-reaction">
		{{ count }}
	</div>
</template>

<script>
export default {
	name: 'DiscordReaction',
	props: {
		active: Boolean,
		count: {
			type: Number,
			'default': 0,
		},
	},
};
</script>

<style>
.discord-reaction {
	color: #72767d;
	background-color: rgba(255, 255, 255, 0.05);
	padding: 0 0.4em;
	border-radius: 4px;
	margin-right: 2px;
	margin-bottom: 2px;
}

.discord-reaction:hover {
	color: #dcddde;
}

.discord-reaction.discord-reaction-active {
	color: #7289da;
	background-color: rgba(114, 137, 218, 0.3);
}
</style>
