.buttonGroup{
    background: var(--comment-vote-bg, #EAE5E0);
    font-size: var(--comment-vote-font-size, 1.2rem);
    padding: var(--comment-vote-padding, .5rem .8rem);
    height: var(--comment-vote-height, 2.8rem);
    gap: .4rem;
    color: #0F172A;

    @include flex-align(center, center);

    &.left{
        border-bottom-left-radius: var(--comment-vote-border-radius, 5rem);
        border-top-left-radius: var(--comment-vote-border-radius, 5rem);
        padding-right: 0;
    }

    &.right{
        border-bottom-right-radius: var(--comment-vote-border-radius, 5rem);
        border-top-right-radius: var(--comment-vote-border-radius, 5rem);
    }
}

.buttonGroupIcon{
    width: var(--comment-vote-icon-size, 1.6rem);
    height: var(--comment-vote-icon-size, 1.6rem);
}

.buttonGroup[disabled]{
    cursor: default !important;
}

.disabled > *{
    opacity: .3;
}