/**
 * 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,
    $ui-header-line-height: $btn-group-header-line-height,
    $ui-header-padding: $btn-group-header-padding,

    $ui-body-padding: $btn-group-padding,
    $ui-tool-background-image: $btn-group-tool-background-image
){
    @if $ui-border-radius != 0 {
        @include x-frame(
            'btn-group',
            $ui: '#{$ui-label}',

            $border-radius: $ui-border-radius,
            $border-width: $ui-border-width,
            $padding: $btn-group-padding,
            $background-color: $ui-background-color
        );
        @include x-frame(
            'btn-group',
            $ui: '#{$ui-label}-notitle',

            $border-radius: $ui-border-radius,
            $border-width: $ui-border-width,
            $padding: $btn-group-padding,
            $background-color: $ui-background-color
        );
    }

    .#{$prefix}btn-group-#{$ui-label} {
        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} {
        @if $btn-group-header-margin != 0 {
            margin: $btn-group-header-margin;
        }
        padding: $ui-header-padding;
        line-height: $ui-header-line-height;
        background: $ui-header-background-color;
        @if $ui-border-radius != null {
            @include border-top-radius($ui-border-radius);
        }

        .#{$prefix}tool-img {
            @if $ui-tool-background-image != $tool-background-image {
                background-image: theme-background-image($ui-tool-background-image);
            }
            // EXTJSIV-8846: partially transparent png images do not display correctly
            // in winXP/IE8m when the image element has a transparent background.
            // to fix this, we give the element the same background-color as the ButtonGroup.
            background-color: $ui-header-background-color;
        }
    }

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

    .#{$prefix}btn-group-body-#{$ui-label} {
        padding: $btn-group-padding;
        .#{$prefix}table-layout {
            border-spacing: $btn-group-border-spacing;
        }
    }
}

@include extjs-btn-group-ui(
    $ui-label: 'default'
);

@include extjs-btn-group-ui(
    $ui-label: 'default-framed',
    $ui-background-color: $btn-group-framed-background-color,
    $ui-border-radius: $btn-group-framed-border-radius,
    $ui-border-width: $btn-group-framed-border-width
);