.reactionIndicatorWidget {
display: flex;
background-color: var(--cpd-color-bg-subtle-primary);
border-radius: var(--cpd-radius-pill-effect);
color: var(--cpd-color-icon-secondary);
}
.reactionIndicatorWidget > p {
padding: none;
margin-top: auto;
margin-bottom: auto;
width: 4em;
.reactionIndicatorWidgetLarge > p {
padding: var(--cpd-space-2x);
.reactionLarge {
margin: var(--cpd-space-2x);
padding: var(--cpd-space-4x);
padding-block: var(--cpd-space-4x);
.reaction {
margin: var(--cpd-space-1x);
background-color: var(--cpd-color-icon-secondary);
align-items: center;
user-select: none;
overflow: hidden;
box-shadow: var(--small-drop-shadow);
box-sizing: border-box;
max-inline-size: 100%;
max-width: fit-content;
padding: var(--cpd-space-1x);
padding-block: var(--cpd-space-1x);
.reaction > span {
width: var(--cpd-space-6x);
height: var(--cpd-space-6x);
display: inline-block;
text-align: center;
font-size: 1.2em;
/* Centralise */
line-height: 1.2;
.reactionLarge > span {
width: 30px;
height: 30px;
font-size: 25px;