@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-color: inherit;
            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;
// }

@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-color: inherit;
            border-right-width: 1px;
        }

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

    .is-active {
        background-color: color(primary);
        color: color(primary, alt);
        font-family: $font-family-regular;

        &::after {
            background-color: color(white);
            bottom: 4px;
            content: '';
            display: block;
            height: 2px;
            position: absolute;
            width: auto;
            right: 5px;
            left: 5px;
            border-radius: 3px;
        }
    }
}


Add is-active styling to button groups
Add is-active styling to button groups
