/**
 * Emoji reaction bars and picker, shared by posts and comments.
 */

.salakit-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: var( --salakit-spacing-sm );
	position: relative;
}

.salakit-reaction,
.salakit-reaction-add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var( --salakit-color-border );
	background: transparent;
	cursor: pointer;
	font-size: 0.9em;
}

.salakit-reaction.is-active {
	border-color: var( --salakit-color-primary );
	background: color-mix( in srgb, var( --salakit-color-primary ) 12%, transparent );
}

.salakit-emoji-picker {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var( --salakit-color-surface );
	border: 1px solid var( --salakit-color-border );
	border-radius: var( --salakit-radius );
	padding: var( --salakit-spacing-sm );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
}

.salakit-emoji-option,
.salakit-emoji-more {
	background: none;
	border: none;
	font-size: 1.1em;
	cursor: pointer;
	padding: 4px;
}