/**
 * 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);
        }
    }

    .#{$prefix}#{$base-cls}-tooltip {
        display: none;
        position: absolute;
        pointer-events: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        .#{$prefix}btn-disabled & {
            display: block;
        }
    }

    @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;
    }
}