    /**
     * Creates the base structure of a button group.
     * @member Ext.container.ButtonGroup
     */
    @mixin extjs-btn-group {
        .#{$prefix}btn-group {
            position: relative;
            overflow: hidden;
        }

        .#{$prefix}btn-group-body {
            position: relative;
            zoom: 1;
            padding: $btn-group-padding;
            .#{$prefix}table-layout-cell {
                vertical-align: top;
            }
        }

        .#{$prefix}btn-group-header-text {
            white-space: nowrap;
        }

        @include extjs-btn-group-ui('default');
    }

    /**
     * Creates a visual theme of a button group.
     * @member Ext.container.ButtonGroup
     */
    @mixin extjs-btn-group-ui(
        $ui-label,
        $ui-base-color: null,

        // background
        $ui-background-color: $btn-group-background-color,

        // borders
        $ui-border-color: $btn-group-border-color,
        $ui-border-width: $btn-group-border-width,
        $ui-border-radius: $btn-group-border-radius,
        $ui-inner-border-color: $btn-group-inner-border-color,

        //header
        $ui-header-background-color: $btn-group-header-background-color,
        $ui-header-font: $btn-group-header-font,
        $ui-header-color: $btn-group-header-color
    ){
        @include x-frame(
            'btn-group',
            $ui: '#{$ui-label}-framed',

            /* Radius, width, padding and background-color */
            $border-radius: $ui-border-radius,
            $border-width: $ui-border-width,
            $padding: $btn-group-padding,
            $background-color: $ui-background-color
        );

        .#{$prefix}btn-group-#{$ui-label}-framed {
            border-color: $ui-border-color;
            @include inner-border(
                $width: $btn-group-inner-border-width,
                $color: $ui-inner-border-color
            );
        }

        .#{$prefix}btn-group-header-#{$ui-label}-framed {
            margin: $btn-group-header-margin;
        }

        .#{$prefix}btn-group-header-body-#{$ui-label}-framed {
            padding: $btn-group-header-padding;

            background: $ui-header-background-color;

            @include border-top-radius($ui-border-radius);
        }

        .#{$prefix}btn-group-header-text-#{$ui-label}-framed {
            font: $ui-header-font;
            color: $ui-header-color;
        }
    }