@use '../assets';

#app-mount {
	.reactions-3ryImn {
		margin: 0;
		padding: 0;
		.reactionBtn-3_qQdk {
			color: var(--text-muted);
			cursor: var(--cursor);
			display: flex;
			align-items: center;
			justify-content: center;
			&:hover,
			&[aria-expanded='true'] {
				color: var(--accent-solid) !important;
			}
			svg {
				width: 12px;
				height: 12px;
				color: inherit;
				path {
					d: path(assets.$path_add);
					transform: scale(1.6) translateX(1px) translateY(-1px);
				}
			}
		}
		.reaction-3vwAF2 {
			background: var(--background-light);
			border: 1px solid var(--base-border);
			margin-bottom: var(--spacing-half);
			margin-right: var(--spacing-half);
			border-radius: var(--button-border-radius);
			cursor: var(--cursor);
			box-sizing: border-box;
			padding: var(--spacing-third) var(--spacing-half);
			color: var(--text-normal);
			&:hover {
				border: 1px solid currentColor;
			}
			&:active {
				box-shadow: 0 0 0 1px currentColor;
				border: 1px solid currentColor;
			}
			.reactionInner-YJjOtT {
				padding: 0;
				.reactionCount-26U4As {
					margin: 0;
					margin-left: var(--spacing-third);
					font-size: var(--chat-font-size-sm);
					color: var(--text-normal);
					font-weight: var(--font-weight-normal);
				}
				.emoji {
					margin: 0;
					width: var(--font-size-md);
					height: var(--font-size-md);
				}
			}
			&.reactionMe-1PwQAc {
				background: rgb(var(--accent), 0.25);
				border-color: var(--accent-solid);
				.reactionCount-26U4As {
					color: var(--text-focus);
				}
				&:active {
					box-shadow: 0 0 0 2px rgb(var(--accent), 0.25);
				}
			}
		}
	}
}

// Light Mode

html.theme-light #app-mount .reactions-1BUEKl .reaction-1hd86g:not(.reactionMe-1PwQAc) {
	&:hover {
		background: var(--background);
		border: 1px solid var(--secondary-border);
	}
	&:active {
		box-shadow: 0 0 0 2px rgb(0, 0, 0, 0.05) !important;
		border: 1px solid var(--secondary-border) !important;
	}
}
