.fsjs-button {
    background: $bgColor;
    border: $borderWidth solid $borderColor;
    border-radius: $borderRadius;
    color: inherit;
    cursor: pointer;
    flex-grow: 1;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: $buttonHeight;
    padding: $buttonPadding;

    &:hover,
    &:focus {
        background: $bgColorHover;
    }

    &.fsjs-button-selected {
        background: $bgColorHover;
    }
}

.fsjs-block-type-buttongroup {
    
    & > [data-property] {
        display: flex;
    }

    button {
        @extend .fsjs-button;
        border-radius: 0;
        
        &:first-of-type {
            border-top-left-radius: $borderRadius;
            border-bottom-left-radius: $borderRadius;
        }

        &:last-of-type {
            border-top-right-radius: $borderRadius;
            border-bottom-right-radius: $borderRadius;
        }
    }

    button+button {
        margin-left: -$borderWidth;
    }
}