.#{$button-class-name} {

    -webkit-appearance: menuitem;
    padding: $button-padding;
    cursor:pointer;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    line-height: normal;

    & + .#{$button-class-name} {
        margin-left: $button-margin;
    }
}

.button-group {

    & > .#{$button-class-name}  {

        float: left;
        margin: $button-margin 0;
        @include border-radius(0);
        border-left: none;

        &:hover,
        &:active {
            border-left: none;
        }

        &:first-child {            
            @include border-radius($button-border-radius 0 0 $button-border-radius);
            border-left: 1px solid darken($grey-15,10%);
        }

        &:last-child {
            @include border-radius(0 $button-border-radius $button-border-radius 0);
        }

        &:only-child {
            @include border-radius($button-border-radius);
        }
    }

    @include pie-clearfix;
}

.button-toolbar {
    
    & > .button-group {
        margin-right: $button-margin * 2;
        float: left;
    }

    @include pie-clearfix;
}
