/**
 * generates base style rules for both tabs and buttons
 *
 * @param {string} [$base-cls='button']
 *
 * @param {string} [$btn-display=inline-block]
 *
 * @param {boolean} [$include-arrows=true]
 *
 * @param {boolean} [$flexbox=true]
 *
 * @member Ext.button.Button
 * @private
 */
@mixin extjs-button-base(
    $base-cls: 'btn',
    $btn-display: inline-block,
    $include-arrows: true,
    $flexbox: true
) {
    .#{$prefix}#{$base-cls} {
        display: $btn-display;
        outline: 0;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        vertical-align: top;
        overflow: hidden;
        // buttons are position:relative because they may contain an absolutely positioned 
        // pseudo element for imitating box-shadow in IE8 when used in a segmented button 
        // see extjs-button-ui 
        position: relative;
        > .#{$prefix}frame {
            height: 100%;
            width: 100%;
        }
    }
 
    .#{$prefix}#{$base-cls}-wrap {
        height: 100%;
        width: 100%;
 
        @if $flexbox {
            @include ext-box;
            @include ext-box-align(stretch);
 
            &.#{$prefix}btn-arrow-bottom,
            &.#{$prefix}btn-split-bottom {
                @include ext-box-orient(vertical);
            }
 
            @if $include-ie {
                .#{$prefix}ie9m & {
                    display: table;
                    border-spacing: 0;
                }
            }
        } @else {
            display: table;
            border-spacing: 0;
        }
    }
 
    .#{$prefix}#{$base-cls}-button {
        white-space: nowrap;
        line-height: 0;
        // this element must be position:relative so that the split line can be absolutely 
        // positioned inside of it 
        position: relative;
 
        @if $flexbox {
            @include ext-box;
            @include ext-box-align(center);
            @include ext-box-flex;
 
            &.#{$prefix}#{$base-cls}-icon-top,
            &.#{$prefix}#{$base-cls}-icon-bottom {
                @include ext-box-orient(vertical);
                @include ext-box-align(stretch);
                @include ext-box-pack(center);
 
                @if $include-ie {
                    // Button is not correctly sized horizontally in IE10 and 11 
                    // when icon is placed above/below 
                    .#{$prefix}ie10p & {
                        overflow: hidden;
                    }
                }
            }
 
            @if $include-ie {
                .#{$prefix}ie9m & {
                    display: table-cell;
                    vertical-align: middle;
                }
            }
        } @else {
            display: table-cell;
            vertical-align: middle;
        }
    }
 
    .#{$prefix}#{$base-cls}-inner {
        overflow: hidden;
        text-overflow: ellipsis;
 
        @if $flexbox {
            -ms-flex-negative: 1;
            display: block;
 
            @if $include-ie {
                .#{$prefix}ie9m & {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        } @else {
            display: inline-block;
            vertical-align: middle;
        }
 
        .#{$prefix}#{$base-cls}-icon.#{$prefix}#{$base-cls}-no-text > & {
            display: none;
        }
    }
 
    .#{$prefix}#{$base-cls}-icon-el {
        display: none;
        vertical-align: middle;
        text-align: center;
        background-position: center center;
        background-repeat: no-repeat;
 
        @if $flexbox {
            flex-shrink: 0;
 
            .#{$prefix}#{$base-cls}-icon > & {
                display: block;
            }
 
            @if $include-ie {
                .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-left > &,
                .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-right > & {
                    display: inline-block;
                }
            }
        } @else {
            .#{$prefix}#{$base-cls}-icon > & {
                display: inline-block;
            }
 
            .#{$prefix}#{$base-cls}-icon-top > &,
            .#{$prefix}#{$base-cls}-icon-bottom > & {
                display: block;
            }
        }
    }
 
    .#{$prefix}#{$base-cls}-button-center {
        @if $include-ie {
            .#{$prefix}ie9m & {
                text-align: center;
            }
        }
        @if $flexbox {
            @include ext-box-pack(center);
        }
 
        &.#{$prefix}#{$base-cls}-icon-top,
        &.#{$prefix}#{$base-cls}-icon-bottom {
            text-align: center;
        }
    }
 
    .#{$prefix}#{$base-cls}-button-left {
        text-align: left;
        @if $flexbox {
            @include ext-box-pack(start);
        }
    }
 
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-left {
            text-align: right;
        }
    }
 
    .#{$prefix}#{$base-cls}-button-right {
        text-align: right;
        @if $flexbox {
            @include ext-box-pack(end);
        }
    }
 
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-right {
            text-align: left;
        }
    }
 
    @if $include-arrows {
        .#{$prefix}#{$base-cls}-arrow:after,
        .#{$prefix}#{$base-cls}-split:after {
            display: block;
            background-repeat: no-repeat;
            content: '';
            // pseudo elements don't match wildcard selectors, so ".x-border-box *" will not apply 
            // to this element 
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            text-align: center;
        }
 
        .#{$prefix}#{$base-cls}-arrow-right:after,
        .#{$prefix}#{$base-cls}-split-right:after {
            background-position: right center;
 
            @if $flexbox {
                @include ext-box;
                @include ext-box-align(center);
                @include ext-box-pack(center);
 
                @if $include-ie {
                    .#{$prefix}ie9m & {
                        display: table-cell;
                        vertical-align: middle;
                    }
                }
            } @else {
                display: table-cell;
                vertical-align: middle;
            }
        }
 
        @if $include-rtl {
            .#{$prefix}rtl {
                &.#{$prefix}#{$base-cls}-arrow-right:after,
                &.#{$prefix}#{$base-cls}-split-right:after {
                    background-position: left center;
                }
            }
        }
 
        .#{$prefix}#{$base-cls}-arrow-bottom:after,
        .#{$prefix}#{$base-cls}-split-bottom:after {
            background-position: center bottom;
            // when this pseudo el is display:table-row (with no table-cell inside) in needs 
            // content other than emtpy or space in order to render in some browsers (IE8-11), 
            // so use non-breaking space 
            content: '\00a0';
            // line-height:0 prevents the pseudo el from inheriting line-height and being 
            // taller than specified by $icon-size. 
            line-height: 0;
 
            @if $flexbox {
                @if $include-ie {
                    .#{$prefix}ie9m & {
                        display: table-row;
                    }
                }
            } @else {
                display: table-row;
            }
        }
 
        // placeholder pseudo element for split line when line is not contained in arrow image 
        .#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after {
            position: absolute;
            display: block;
            top: -100%;
            right: 0;
            height: 300%;
            content: '';
        }
 
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after {
                left: 0;
                right: auto;
            }
        }
 
        // placeholder pseudo element for split line when line is not contained in arrow image 
        .#{$prefix}#{$base-cls}-split-bottom > .#{$prefix}btn-button:after {
            position: absolute;
            display: block;
            bottom: 0;
            left: -100%;
            font-size: 0;
            width: 300%;
            content: '';
        }
    }
 
    .#{$prefix}#{$base-cls}-mc {
        // buttons and tabs can have a focus outline on the btnWrap element.  The default 
        // overflow:hidden styling of the frame body hides the outline, so override it to 
        // overflow:visible. 
        overflow: visible;
    }
}