.btn__group {
    display: inline-block;

    .btn {
        border-right: 1px solid rgba(0, 0, 0, .1);
        border-radius: 0;

        &:first-of-type {
            border-top-left-radius: $border-radius;
            border-bottom-left-radius: $border-radius;
        }

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

        // Restore expected borders for solo outline buttons only
        &.btn--outline:only-of-type {
            border-right-width: 1px;
        }
    }
}

.dropdown .btn,
.dropup .btn {
    border-right-width: 0;
    border-radius: $border-radius;
}

@mixin button-group-item() {
    border-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);

    &:first-of-type {
        border-top-left-radius: $btn-border-radius;
        border-bottom-left-radius: $btn-border-radius;
    }

    &:last-of-type {
        border-top-right-radius: $btn-border-radius;
        border-bottom-right-radius: $btn-border-radius;
        border-right-width: 0;
    }
}

%btn__group,
.btn__group, {
    display: inline-block;

    .btn {
        @include button-group-item;

        // Restore expected borders for solo outline buttons only
        &.btn--outline:only-of-type {
            border-right-width: 1px;
        }

        // Make sure focused buttons aren't overlapped by subsequent children
        &:focus {
            z-index: 1;
        }
    }
}

.dropdown .btn,
.dropup .btn {
    border-right-width: 0;
    border-radius: $btn-border-radius;
}

Refactor button groups to properly style both html and form button groups
Refactor button groups to properly style both html and form button groups
