.hr-reaction-bar {
    display: flex;
    gap: 10px;
    justify-content: var(--hr-position, left);
    flex-wrap: wrap;
    margin: 1.5em 0;
    padding: 0.5em 0;
    //border-top: 1px solid rgba(0,0,0,0.1);
    //border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Reaction Buttons */
.hr-reaction {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: var(--hr-font-size);
    //transform: scale(1.2);
    transition: all 0.3s;
    opacity: 0.9;
    display: flex;
    //flex-direction: column;
    align-items: center;
}

.hr-reaction:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.hr-reaction:hover,
.hr-reaction.active {
    opacity: 1;
    transform: scale(1.4);
    border: none;
}

.hr-reaction:after,
.hr-reaction:active:after,
.hr-reaction:checked {
  opacity: 1;
  border: none;
  transform: scale(1.4);
}

.hr-emoji {
    //font-size: var(--hr-icon-size);
    //transform: scale(0.9);
    filter: saturate(1.5) brightness(1.1) contrast(1.1);

    line-height: 1;
}

.hr-count {
    font-size: 0.7em;
    margin-top: 2px;
    color: var(--hr-color,black);
    //font-weight: bold;
}

/* Dark Mode */
/*
.hr-dark-mode .hr-reaction-bar {
    color: rgba(255,255,255,0.7);
}
*/
.hr-dark-mode .hr-count {
    color: black;
}
.hr-light-mode .hr-count {
    color: white;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .hr-reaction-bar {
        gap: 5px;
    }
    .hr-reaction-icon {
        font-size: calc(var(--hr-icon-size, 16px) * 0.9);
    }
}