.#{$prefix}split-button {
    .#{$prefix}btn-wrap {
        &.#{$prefix}btn-split-right {
            &:before {
                position: absolute;
                content: ' ';
                top: 0;
                left: 0;
                bottom: 0;
            }
            
            & + .#{$prefix}btn-arrow-el {
                top: 0;
                width: 0;
                height: 100%;
                
                &:before {
                    content: ' ';
                    position: absolute;
                    display: block;
                    height: 100%;
                    top: 0;
                }
            }
        }
        
        &.#{$prefix}btn-split-bottom {
            &:before {
                position: absolute;
                content: ' ';
                top: 0;
                left: 0;
                right: 0;
            }
            
            & + .#{$prefix}btn-arrow-el {
                top: 0;
                left: 0;
                right: auto;
                width: 0;
                height: 0;
                clip: rect(0, 0, 0, 0);
            }
        }
        
        &.#{$prefix}btn-split-right:after {
            z-index: 1;
        }
    }
}

@if $include-button-default-small-ui {
    @include extjs-graphite-button-ui(
        $ui: 'default-small',
        
        $color: $button-default-color,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus: $button-default-color-focus,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color,
        
        $opacity-disabled: $button-default-opacity-disabled,
        
        $icon-spacing: $button-icon-spacing
    );
    
    @include extjs-graphite-splitbutton-ui(
        $ui: 'default-small',
        
        $split-width: $button-small-split-width,
        $split-height: $button-small-split-height,
        $split-line-width: $button-small-split-line-width,
        
        $padding: $button-small-padding,
        
        $border-color: $button-default-border-color,
        
        $background-color: $button-default-background-color,
        $background-color-over: $button-default-background-color-over,
        $background-color-focus: $button-default-background-color-focus,
        $background-color-focus-over: $button-default-background-color-focus-over,
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-focus-over: $button-default-color-focus-over,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $separator-color: $button-default-split-line-color,
        $separator-color-over: $button-default-split-line-color-over,
        $separator-color-focus: $button-default-split-line-color-focus,
        $separator-color-focus-over: $button-default-split-line-color-focus-over,
        $separator-color-pressed: $button-default-split-line-color-pressed,
        $separator-color-pressed-over: $button-default-split-line-color-pressed-over,
        $separator-color-focus-pressed: $button-default-split-line-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color
    );
}

@if $include-button-default-medium-ui {
    @include extjs-graphite-button-ui(
        $ui: 'default-medium',
        
        $color: $button-default-color,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus: $button-default-color-focus,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color,
        
        $opacity-disabled: $button-default-opacity-disabled,
        
        $icon-spacing: $button-icon-spacing
    );
    
    @include extjs-graphite-splitbutton-ui(
        $ui: 'default-medium',
        
        $split-width: $button-medium-split-width,
        $split-height: $button-medium-split-height,
        $split-line-width: $button-medium-split-line-width,
        
        $padding: $button-medium-padding,
        
        $border-color: $button-default-border-color,
        
        $background-color: $button-default-background-color,
        $background-color-over: $button-default-background-color-over,
        $background-color-focus: $button-default-background-color-focus,
        $background-color-focus-over: $button-default-background-color-focus-over,
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-focus-over: $button-default-color-focus-over,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $separator-color: $button-default-split-line-color,
        $separator-color-over: $button-default-split-line-color-over,
        $separator-color-focus: $button-default-split-line-color-focus,
        $separator-color-focus-over: $button-default-split-line-color-focus-over,
        $separator-color-pressed: $button-default-split-line-color-pressed,
        $separator-color-pressed-over: $button-default-split-line-color-pressed-over,
        $separator-color-focus-pressed: $button-default-split-line-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color
    );
}

@if $include-button-default-large-ui {
    @include extjs-graphite-button-ui(
        $ui: 'default-large',
        
        $color: $button-default-color,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus: $button-default-color-focus,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color,
        
        $opacity-disabled: $button-default-opacity-disabled,
        
        $icon-spacing: $button-icon-spacing
    );
    
    @include extjs-graphite-splitbutton-ui(
        $ui: 'default-large',
        
        $split-width: $button-large-split-width,
        $split-height: $button-large-split-height,
        $split-line-width: $button-large-split-line-width,
        
        $padding: $button-large-padding,
        
        $border-color: $button-default-border-color,
        
        $background-color: $button-default-background-color,
        $background-color-over: $button-default-background-color-over,
        $background-color-focus: $button-default-background-color-focus,
        $background-color-focus-over: $button-default-background-color-focus-over,
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-pressed-over: $button-default-background-color-pressed-over,
        $background-color-focus-pressed: $button-default-background-color-focus-pressed,
        
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-focus-over: $button-default-color-focus-over,
        $color-pressed: $button-default-color-pressed,
        $color-pressed-over: $button-default-color-pressed-over,
        $color-focus-pressed: $button-default-color-focus-pressed,
        
        $separator-color: $button-default-split-line-color,
        $separator-color-over: $button-default-split-line-color-over,
        $separator-color-focus: $button-default-split-line-color-focus,
        $separator-color-focus-over: $button-default-split-line-color-focus-over,
        $separator-color-pressed: $button-default-split-line-color-pressed,
        $separator-color-pressed-over: $button-default-split-line-color-pressed-over,
        $separator-color-focus-pressed: $button-default-split-line-color-focus-pressed,
        
        $inner-border-width-focus-over: $button-default-focus-over-border-width,
        $inner-border-color-focus-over: $button-default-focus-over-border-color
    );
}

@if $include-ext-toolbar-toolbar {
    @if $include-button-default-toolbar-small-ui {
        @include extjs-graphite-button-ui(
            $ui: 'default-toolbar-small',
            
            $color: $button-toolbar-color,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color,
        
            $opacity-disabled: $button-toolbar-opacity-disabled,
            
            $icon-spacing: $button-icon-spacing
        );
        
        @include extjs-graphite-splitbutton-ui(
            $ui: 'default-toolbar-small',
            
            $split-width: $button-small-split-width,
            $split-height: $button-small-split-height,
            $split-line-width: $button-small-split-line-width,
            
            $padding: $button-small-padding,
            
            $border-color: $button-toolbar-border-color,
            
            $background-color: $button-toolbar-background-color,
            $background-color-over: $button-toolbar-background-color-over,
            $background-color-focus: $button-toolbar-background-color-focus,
            $background-color-focus-over: $button-toolbar-background-color-focus-over,
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $color: $button-toolbar-color,
            $color-over: $button-toolbar-color-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-over: $button-toolbar-color-focus-over,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $separator-color: $button-toolbar-split-line-color,
            $separator-color-over: $button-toolbar-split-line-color-over,
            $separator-color-focus: $button-toolbar-split-line-color-focus,
            $separator-color-focus-over: $button-toolbar-split-line-color-focus-over,
            $separator-color-pressed: $button-toolbar-split-line-color-pressed,
            $separator-color-pressed-over: $button-toolbar-split-line-color-pressed-over,
            $separator-color-focus-pressed: $button-toolbar-split-line-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color
        );
        
        @include extjs-graphite-button-ui(
            $ui: 'plain-toolbar-small',
            
            $color: $button-plain-toolbar-color,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus: $button-toolbar-background-color-focus,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color,
        
            $opacity-disabled: $button-toolbar-opacity-disabled,
            
            $icon-spacing: $button-icon-spacing
        );
        
        @include extjs-graphite-splitbutton-ui(
            $ui: 'plain-toolbar-small',
            
            $split-width: $button-small-split-width,
            $split-height: $button-small-split-height,
            $split-line-width: $button-small-split-line-width,
            
            $padding: $button-small-padding,
            
            $border-color: $button-toolbar-border-color,
            
            $background-color: transparent,
            $background-color-over: $button-toolbar-background-color-over,
            $background-color-focus: $button-toolbar-background-color-focus,
            $background-color-focus-over: $button-toolbar-background-color-focus-over,
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $color: $button-plain-toolbar-color,
            $color-over: $button-toolbar-color-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-over: $button-toolbar-color-focus-over,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $separator-color: $button-toolbar-split-line-color,
            $separator-color-over: $button-toolbar-split-line-color-over,
            $separator-color-focus: $button-toolbar-split-line-color-focus,
            $separator-color-focus-over: $button-toolbar-split-line-color-focus-over,
            $separator-color-pressed: $button-toolbar-split-line-color-pressed,
            $separator-color-pressed-over: $button-toolbar-split-line-color-pressed-over,
            $separator-color-focus-pressed: $button-toolbar-split-line-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color
        );
    }
    
    @if $include-button-default-toolbar-medium-ui {
        @include extjs-graphite-button-ui(
            $ui: 'default-toolbar-medium',
            
            $color: $button-toolbar-color,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color,
        
            $opacity-disabled: $button-toolbar-opacity-disabled,
            
            $icon-spacing: $button-icon-spacing
        );
        
        @include extjs-graphite-splitbutton-ui(
            $ui: 'default-toolbar-medium',
            
            $split-width: $button-medium-split-width,
            $split-height: $button-medium-split-height,
            $split-line-width: $button-medium-split-line-width,
            
            $padding: $button-medium-padding,
            
            $border-color: $button-toolbar-border-color,
            
            $background-color: $button-toolbar-background-color,
            $background-color-over: $button-toolbar-background-color-over,
            $background-color-focus: $button-toolbar-background-color-focus,
            $background-color-focus-over: $button-toolbar-background-color-focus-over,
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $color: $button-toolbar-color,
            $color-over: $button-toolbar-color-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-over: $button-toolbar-color-focus-over,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $separator-color: $button-toolbar-split-line-color,
            $separator-color-over: $button-toolbar-split-line-color-over,
            $separator-color-focus: $button-toolbar-split-line-color-focus,
            $separator-color-focus-over: $button-toolbar-split-line-color-focus-over,
            $separator-color-pressed: $button-toolbar-split-line-color-pressed,
            $separator-color-pressed-over: $button-toolbar-split-line-color-pressed-over,
            $separator-color-focus-pressed: $button-toolbar-split-line-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color
        );
    }
    
    @if $include-button-default-toolbar-large-ui {
        @include extjs-graphite-button-ui(
            $ui: 'default-toolbar-large',
            
            $color: $button-toolbar-color,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color,
        
            $opacity-disabled: $button-toolbar-opacity-disabled,
            
            $icon-spacing: $button-icon-spacing
        );
        
        @include extjs-graphite-splitbutton-ui(
            $ui: 'default-toolbar-large',
            
            $split-width: $button-large-split-width,
            $split-height: $button-large-split-height,
            $split-line-width: $button-large-split-line-width,
            
            $padding: $button-large-padding,
            
            $border-color: $button-toolbar-border-color,
            
            $background-color: $button-toolbar-background-color,
            $background-color-over: $button-toolbar-background-color-over,
            $background-color-focus: $button-toolbar-background-color-focus,
            $background-color-focus-over: $button-toolbar-background-color-focus-over,
            $background-color-pressed: $button-toolbar-background-color-pressed,
            $background-color-pressed-over: $button-toolbar-background-color-pressed-over,
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed,
            
            $color: $button-toolbar-color,
            $color-over: $button-toolbar-color-over,
            $color-focus: $button-toolbar-color-focus,
            $color-focus-over: $button-toolbar-color-focus-over,
            $color-pressed: $button-toolbar-color-pressed,
            $color-pressed-over: $button-toolbar-color-pressed-over,
            $color-focus-pressed: $button-toolbar-color-focus-pressed,
            
            $separator-color: $button-toolbar-split-line-color,
            $separator-color-over: $button-toolbar-split-line-color-over,
            $separator-color-focus: $button-toolbar-split-line-color-focus,
            $separator-color-focus-over: $button-toolbar-split-line-color-focus-over,
            $separator-color-pressed: $button-toolbar-split-line-color-pressed,
            $separator-color-pressed-over: $button-toolbar-split-line-color-pressed-over,
            $separator-color-focus-pressed: $button-toolbar-split-line-color-focus-pressed,
            
            $inner-border-width-focus-over: $button-toolbar-focus-over-border-width,
            $inner-border-color-focus-over: $button-toolbar-focus-over-border-color
        );
    }
}