
	.reactions.svelte-lr2j59 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.5em;
		flex-wrap: wrap;
	}

	.reaction.svelte-fgbew2 {
		padding: 4px 7px;
		width: fit-content;
		height: fit-content;
		max-height: 1.5em;
		background-color: rgba(0, 0, 0, 0.2);
		border: transparent 1px solid;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.9em;

		cursor: pointer;
		transition: 0.1s ease-in-out;
		transition-property: border-color;
		margin-top: 5px;
		overflow: hidden;
		user-select: none;
		padding: 0.9rem 0.7rem;
	}

	.countBox.svelte-fgbew2 {
		min-width: 1em;
		font-size: 0.9rem;

		display: flex;
		position: relative;
		flex-direction: column;
		align-items: flex-start;

		transform: translateY(25%);

		transition: transform 0.3s cubic-bezier(0.57, -0.38, 0.38, 1.59);
	}

	.countBox.active.svelte-fgbew2 {
		transform: translateY(-25%);
	}

	.reaction.svelte-fgbew2:hover {
		border-color: rgba(255, 255, 255, 0.3);
	}

	.reaction.active.svelte-fgbew2 {
		background-color: rgba(93, 124, 228, 0.129);
		border: #5865f2 1px solid;
	}

	.wrap.svelte-1tgti50 {
		position: relative;
		text-align: left;
	}

	h4.svelte-1tgti50 {
		height: 0.8em;
	}
	.triangle.svelte-1tgti50 {
		position: absolute;
		width: 40px;
		fill: var(--surface-color);
		aspect-ratio: 1/1;

		left: 50%;
		transform: rotate(180deg) translateX(50%) translateY(30px);
		z-index: -10;
		/* transform-origin: center; */
	}
	.wrap.animated.svelte-1tgti50 {
		animation: svelte-1tgti50-float 8s ease-in-out infinite;
		animation-fill-mode: backwards;
	}

	@keyframes svelte-1tgti50-float {
		0%,
		100% {
			transform: translateY(5px);
		}
		50% {
			transform: translateY(-5px);
		}
	}
