.reactions-bar{display:flex;align-items:center;gap:.5rem;> .counts { display: flex; align-items: center; gap: 0.25rem; > .count-button { gap: 0.25rem; padding-block: 0.25rem; padding-inline: 0.5rem; border-radius: 0.375rem; > span { font-weight: 400; } &:hover { background-color: var(--primary-surface); } &.-selected { background-color: var(--primary-surface); } } } > .dropdown { display: inline-block; text-align: left; width: fit-content; > .toggle { padding-block: 0.25rem; padding-inline: 0.5rem; border-radius: 999px; &:hover { background-color: var(--bg); } > svg { width: 1.25rem; height: 1.25rem; } } > .reactions-panel { position: absolute; left: 0; margin-top: 0.5rem; padding: 1rem; width: 12rem; border: 1px solid var(--bg-dark); > .title { font-size: 0.875rem; } > .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; @media (min-width: 48rem) { grid-template-columns: repeat(3, 1fr); } > .pick { flex-direction: column; gap: 0.25rem; border-radius: 0.375rem; &:hover { background-color: var(--primary-surface); } } } } }}