.tz-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: .7rem 0;
}

.tz-reaction-count {
    border: 1px solid var(--tz-leaf-300, #b6c098);
    border-radius: 999px;
    background: var(--tz-leaf-50, #f7f9e7);
    color: var(--tz-link, #3a5c00);
    padding: .2rem .55rem;
    line-height: 1.5;
}

.tz-reaction-count.selected,
.tz-reaction-option.selected {
    border-color: var(--tz-leaf-600, #819b4a);
    background: var(--tz-leaf-200, #dfe3d1);
    font-weight: bold;
}

.tz-reaction-picker {
    position: relative;
}

.tz-reaction-picker > summary {
    display: inline-block;
    border: 1px solid #5f7a2c;
    border-radius: 999px;
    background: var(--tz-bar-title, linear-gradient(180deg, #b0c188 0%, #a5b979 46%, #86a04f 47%, #6e8a36 100%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    padding: .25rem .75rem;
    font-family: var(--tz-font, inherit);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(40, 55, 10, .45);
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.tz-reaction-picker > summary:hover,
.tz-reaction-picker > summary:focus-visible {
    border-color: var(--tz-moss, #394c00);
    background: linear-gradient(180deg, #bccb96 0%, #b0c286 46%, #7f9a45 47%, #647f2e 100%);
}

.tz-reaction-picker > summary:focus-visible,
.tz-reaction-option:focus-visible {
    outline: 2px solid var(--tz-group-admin, #47428d);
    outline-offset: 2px;
}

.tz-reaction-picker > summary::-webkit-details-marker {
    display: none;
}

.tz-reaction-picker > summary::after {
    content: ' ▾';
    font-size: .75em;
    text-shadow: none;
}

.tz-reaction-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    position: absolute;
    z-index: 10;
    bottom: calc(100% + .25rem);
    left: 0;
    min-width: 17rem;
    max-width: min(22rem, 80vw);
    padding: .45rem;
    border: 1px solid var(--tz-leaf-600, #819b4a);
    border-radius: .5rem;
    background: var(--tz-leaf-50, #f7f9e7);
    box-shadow: 0 .2rem .7rem #0002;
}

.tz-reaction-form {
    display: inline;
    margin: 0;
}

.tz-reaction-option {
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: var(--tz-nav-link, #3f4a2a);
    padding: .3rem .45rem;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.tz-reaction-option:hover,
.tz-reaction-option:focus-visible {
    border-color: var(--tz-leaf-300, #b6c098);
    background: var(--tz-leaf-200, #dfe3d1);
}