/**
 * @class Ext.field.TextArea
 */
 
.#{$prefix}textareafield {
    .#{$prefix}body-wrap-el {
        height: $textareafield-body-height;
        padding: $textareafield-padding;
 
        @if $enable-big {
            .#{$prefix}big & {
                height: $textareafield-body-height-big;
                padding: $textareafield-padding-big;
            }
        }
    }
}
 
.#{$prefix}textareafield.#{$prefix}label-align-horizontal.#{$prefix}has-percentage-size-flex-bug {
    .#{$prefix}layout-fit > & .#{$prefix}body-wrap-el,
    .#{$prefix}layout-vbox > &.#{$prefix}flexed .#{$prefix}body-wrap-el,
    .#{$prefix}layout-hbox.#{$prefix}align-stretch > & .#{$prefix}body-wrap-el {
        // When the textareafield's label is horizontally aligned (left or right), we use 
        // a min-height and max-height of 100% on the body-wrap-el to ensure that the field's 
        // height correctly grows and shrinks in response to configured height or layout 
        // flexing/stretching.  However, in Safari, the following bug prevents percentage 
        // heights from working when the item's height is flexed by a vbox layout or stretched 
        // by an hbox layout: 
        // https://bugs.webkit.org/show_bug.cgi?id=167240 
        // To workaround the issue we set the body-wrap-el height back to auto when we detect 
        // that is the case.  The trade off is that if the owning layout itself is auto-heighted 
        // the $textareafield-body-height will not be respected. 
        height: auto;
    }
}