/* Fixes to make the quick reactions look better */

.vc-better-quick-react {
    /* Discord officially has a 2px right margin and a 0px left margin, which is a hack for their selection border being cut off on the right */
    padding: 4px 1px 6px;
    justify-content: center;
    grid-template-columns: repeat(var(--vc-better-quick-react-columns), 44px);
    grid-template-rows: unset;
    grid-auto-rows: 44px;
    z-index: 10;
}

.vc-better-quick-react.vc-better-quick-react-compact {
    grid-template-columns: repeat(var(--vc-better-quick-react-columns), 33px);
    grid-auto-rows: 33px;
}

.vc-better-quick-react.vc-better-quick-react-compact > div {
    scale: 0.75;
}

.vc-better-quick-react.vc-better-quick-react-compact img {
    width: 25px;
    height: 25px;
}

/* 8 or more columns exceeds the default max width */
[class*="menu_"]:has(>div>.vc-better-quick-react) {
    max-width: fit-content;
}