/**
 * A special Ext.dom.Element used by Buttons.  Since buttons use `display:table` elements
 * for their layout, some special adjustments are needed when the width switches from
 * auto to fixed width and back.
 *
 * When the button has a width other than `auto`, and a right-aligned arrow, long button
 * text will cause the arrow to disappear off the right edge of the button if the btnWrap
 * element has table-layout:auto.  To prevent this, we need to set table-layout:fixed
 * on the btnWrap when the button has a width, however, when the button is shrinkwrap
 * width the btnWrap cannot have table-layout:fixed because its width:100% style will
 * cause the button to expand outward.
 *
 * Additionally, in shrinkWrap height mode, the button css sets a height on the btnEl
 * element, but if the height is being stretched, the btnEl's height will cause the contents
 * to be incorrectly vertically centered, so we dynamically set the btnEl's height to
 * "auto" in fixed-height mode.
 *
 * @private
 */
Ext.define('Ext.dom.ButtonElement', {
    extend: 'Ext.dom.Element',
 
    setSize: function(width, height, animate) {
        var me = this,
            component = me.component;
 
        me.callParent([width, height, animate]);
 
        component.btnWrap.setStyle(
            'table-layout',
            (!width || width === 'auto') ? '' : 'fixed'
        );
 
        component.btnEl.setStyle(
            'height',
            (!height || height === 'auto') ? '' : 'auto'
        );
 
        return me;
    },
 
    setStyle: function(prop, value) {
        var me = this,
            component = me.component,
            width, height;
 
        me.callParent([prop, value]);
 
        if (prop) {
            if (prop === 'width' || (typeof prop !== 'string' && 'width' in prop)) {
                width = value || prop.width;
                component.btnWrap.setStyle(
                    'table-layout',
                    (!width || width === 'auto') ? '' : 'fixed'
                );
            }
 
            if (prop === 'height' || (typeof prop !== 'string' && 'height' in prop)) {
                height = value || prop.height;
 
                component.btnEl.setStyle(
                    'height',
                    (!height || height === 'auto') ? '' : 'auto'
                );
            }
        }
 
        return me;
    },
 
    setHeight: function(height, animate) {
        this.callParent([height, animate]);
 
        this.component.btnEl.setStyle(
            'height',
            (!height || height === 'auto') ? '' : 'auto'
        );
 
        return this;
    },
 
    setWidth: function(width, animate) {
        this.callParent([width, animate]);
 
        this.component.btnWrap.setStyle(
            'table-layout',
            (!width || width === 'auto') ? '' : 'fixed'
        );
 
        return this;
    }
});