/**
 * Creates a visual theme for text fields.  Note this mixin only provides styling
 * for the form field body, The label and error are styled by {@link #extjs-label-ui}.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$ui-height=$form-text-field-height]
 * The height of the text field
 *
 * @param {number} [$ui-font-size=$form-text-field-font-size]
 * The font-size of the text field
 *
 * @param {string} [$ui-font-family=$form-text-field-font-family]
 * The font-family of the text field
 *
 * @param {string} [$ui-font-weight=$form-text-field-font-weight]
 * The font-weight of the text field
 *
 * @param {color} [$ui-color=$form-text-field-color]
 * The color of the text field's input element
 *
 * @param {color} [$ui-background-color=$form-text-field-background-color]
 * The background color of the text field's input element
 *
 * @param {number/list} [$ui-border-width=$form-text-field-border-width]
 * The border width of the text field
 *
 * @param {string/list} [$ui-border-style=$form-text-field-border-style]
 * The border style of the text field
 *
 * @param {color/list} [$ui-border-color=$form-text-field-border-color]
 * The border color of text fields
 *
 * @param {color/list} [$ui-focus-border-color=$form-text-field-focus-border-color]
 * The border color of the text field when focused
 *
 * @param {color} [$ui-invalid-border-color=$form-text-field-invalid-border-color]
 * The border color of the text field when the field value is invalid.
 *
 * @param {number/list} [$ui-border-radius=$form-text-field-border-radius]
 * The border radius of the text field
 *
 * @param {string} [$ui-background-image=$form-text-field-background-image]
 * The background image of the text field's input element
 *
 * @param {number/list} [$ui-padding=$form-text-field-padding]
 * The padding of the text field's input element
 *
 * @param {color} [$ui-empty-color=$form-text-field-empty-color]
 * Text color for of the text field when empty
 *
 * @param {number} [$ui-body-width=$form-text-field-body-width]
 * The default width of the text field's body element (the element that contains the input
 * element and triggers) when the field is not sized explicitly using the {@link #width}
 * config, or sized by it's containing layout.
 *
 * @param {color} [$ui-invalid-background-color=$form-field-invalid-background-color]
 * Background color of the input element when the field value is invalid.
 *
 * @param {string} [$ui-invalid-background-image=$form-field-invalid-background-image]
 * Background image of the input element when the field value is invalid.
 *
 * @param {string} [$ui-invalid-background-repeat=$form-field-invalid-background-repeat]
 * Background repeat of the input element when the field value is invalid.
 *
 * @param {string/list} [$ui-invalid-background-position=$form-field-invalid-background-position]
 * Background position of the input element when the field value is invalid.
 *
 * @param {number} [$ui-trigger-width=$form-trigger-width]
 * The width of the trigger element
 *
 * @param {number/list} [$ui-trigger-border-width=$form-trigger-border-width]
 * The width of the trigger's border
 *
 * @param {color/list} [$ui-trigger-border-color=$form-trigger-border-color]
 * The color of the trigger's border
 *
 * @param {string/list} [$ui-trigger-border-style=$form-trigger-border-style]
 * The style of the trigger's border
 *
 * @param {color} [$ui-trigger-border-color-over=$form-trigger-border-color-over]
 * The color of the trigger's border when hovered
 *
 * @param {color} [$ui-trigger-border-color-focus=$form-trigger-border-color-focus]
 * The color of the trigger's border when the field is focused
 *
 * @param {color} [$ui-trigger-border-color-pressed=$form-trigger-border-color-pressed]
 * The color of the trigger's border when the field is focused and the trigger is hovered
 *
 * @param {string} [$ui-trigger-background-image=$form-trigger-background-image]
 * The default background image for the trigger
 *
 * @param {color} [$ui-trigger-background-color=$form-trigger-background-color]
 * The background color of the trigger element
 *
 * @param {string/list} [$ui-trigger-glyph=$form-trigger-glyph]
 * The default glyph for for text field triggers when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-trigger-glyph-color=$form-trigger-glyph-color]
 * The color the trigger when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$ui-textarea-line-height=$form-textarea-line-height]
 * The line-height of the textarea element when this mixin is used to style a
 * {@link Ext.form.field.TextArea TextArea}
 *
 * @param {number} [$ui-textarea-body-height=$form-textarea-body-height]
 * The default width of the TextArea's body element (the element that contains the textarea
 * html element when the field is not sized explicitly using the {@link #width}config, or
 * sized by it's containing layout.
 *
 * @param {color} [$ui-file-field-color=$form-file-field-color] The text color of the
 * input element when this mixin is used to style a {@link Ext.form.field.File File Field}
 *
 * @param {boolean} [$ui-classic-border=$form-text-field-classic-border]
 * `true` to use classic-theme styled border.
 *
 * @member Ext.form.field.Text
 */
@mixin extjs-text-field-ui(
    $ui: null,
    $ui-height: $form-text-field-height,
    $ui-font-size: $form-text-field-font-size,
    $ui-font-family: $form-text-field-font-family,
    $ui-font-weight: $form-text-field-font-weight,
    $ui-color: $form-text-field-color,
    $ui-background-color: $form-text-field-background-color,
    $ui-border-width: $form-text-field-border-width,
    $ui-border-style: $form-text-field-border-style,
    $ui-border-color: $form-text-field-border-color,
    $ui-focus-border-color: $form-text-field-focus-border-color,
    $ui-invalid-border-color: $form-text-field-invalid-border-color,
    $ui-border-radius: $form-text-field-border-radius,
    $ui-background-image: $form-text-field-background-image,
    $ui-padding: $form-text-field-padding,
    $ui-empty-color: $form-text-field-empty-color,
    $ui-body-width: $form-text-field-body-width,

    $ui-invalid-background-color: $form-field-invalid-background-color,
    $ui-invalid-background-image: $form-field-invalid-background-image,
    $ui-invalid-background-repeat: $form-field-invalid-background-repeat,
    $ui-invalid-background-position: $form-field-invalid-background-position,

    $ui-trigger-width: $form-trigger-width,
    $ui-trigger-border-width: $form-trigger-border-width,
    $ui-trigger-border-color: $form-trigger-border-color,
    $ui-trigger-border-style: $form-trigger-border-style,

    $ui-trigger-border-color-over: null,
    $ui-trigger-border-color-focus: null,
    $ui-trigger-border-color-pressed: null,

    $ui-trigger-background-image: $form-trigger-background-image,
    $ui-trigger-background-color: $form-trigger-background-color,
    $ui-trigger-glyph: $form-trigger-glyph,
    $ui-trigger-glyph-color: $form-trigger-glyph-color,

    $ui-textarea-line-height: $form-textarea-line-height,
    $ui-textarea-body-height: $form-textarea-body-height,
    $ui-file-field-color: $form-file-field-color,

    $ui-classic-border: $form-text-field-classic-border
) {
    @if is-null($ui-trigger-border-color-over) {
        @if $ui == 'default' {
            $ui-trigger-border-color-over: $form-trigger-border-color-over;
        } @else if $ui == 'toolbar' {
            $ui-trigger-border-color-over: $form-toolbar-trigger-border-color-over;
        } @else if $ui == 'grid-cell' {
            $ui-trigger-border-color-over: $grid-cell-field-trigger-border-color-over;
        } @else {
            $ui-trigger-border-color-over: $ui-trigger-border-color;
        }
    }

    @if is-null($ui-trigger-border-color-focus) {
        @if $ui == 'default' {
            $ui-trigger-border-color-focus: $form-trigger-border-color-focus;
        } @else if $ui == 'toolbar' {
            $ui-trigger-border-color-over: $form-toolbar-trigger-border-color-over;
        } @else if $ui == 'grid-cell' {
            $ui-trigger-border-color-over: $grid-cell-field-trigger-border-color-over;
        } @else {
            $ui-trigger-border-color-focus: $ui-trigger-border-color;
        }
    }

    @if is-null($ui-trigger-border-color-pressed) {
        @if $ui == 'default' {
            $ui-trigger-border-color-pressed: $form-trigger-border-color-pressed;
        } @else if $ui == 'toolbar' {
            $ui-trigger-border-color-pressed: $form-toolbar-trigger-border-color-pressed;
        } @else if $ui == 'grid-cell' {
            $ui-trigger-border-color-pressed: $grid-cell-field-trigger-border-color-pressed;
        } @else {
            $ui-trigger-border-color-pressed: $ui-trigger-border-color;
        }
    }

    .#{$prefix}form-text-field-body-#{$ui} {
        // We use a combination of min-width and max-width to control the "default" width
        // of the field body for the following reasons:
        //
        // 1. When the field is shrink wrap width, min-width prevents the width of the
        // body from shrinking smaller than the default width
        //
        // 2. When the field is shrink wrap width, max-width prevents the width:100%
        // triggerWrap element that is immediately inside the body element from causing
        // the body to expand to infinity.
        //
        // 3. When the field's outermost element has a "width" assigned, whether that
        // width is larger or smaller than what the default shrink-wrap width of the
        // field would have been, that width will overcome either min-width or max-width
        // and adjust the size of the body to fit within the defined width of the field
        // minus the label width.
        min-width: $ui-body-width;
        max-width: $ui-body-width;
    }

    .#{$prefix}form-trigger-wrap-#{$ui} {
        @if not $ui-classic-border {
            border-width: $ui-border-width;
            border-style: $ui-border-style;
            border-color: $ui-border-color;
            @if $ui-border-radius != 0 {
                border-radius: $ui-border-radius;
            }
            &.#{$prefix}form-trigger-wrap-focus {
                border-color: $ui-focus-border-color;
            }

            &.#{$prefix}form-trigger-wrap-invalid {
                border-color: $ui-invalid-border-color;
            }
        }
    }

    @if $ui-classic-border {
        .#{$prefix}form-text-wrap-#{$ui} {
            border-width: $ui-border-width;
            border-style: $ui-border-style;
            border-color: $ui-border-color;
            @if $ui-border-radius != 0 {
                border-radius: $ui-border-radius;
            }
            &.#{$prefix}form-text-wrap-focus {
                border-color: $ui-focus-border-color;
            }

            &.#{$prefix}form-text-wrap-invalid {
                border-color: $ui-invalid-border-color;
            }
        }
    }

    $ui-line-height: $ui-height - vertical($ui-padding) - vertical($ui-border-width);
    .#{$prefix}form-text-#{$ui} {
        color: $ui-color;
        padding: $ui-padding;
        background-color: $ui-background-color;
        @if $ui-border-radius != 0 {
            border-radius: $ui-border-radius;
        }
        @if not is-null($ui-background-image) {
            background-image: theme-background-image($ui-background-image);
        }
        font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family;
        min-height: $ui-height - vertical($ui-border-width);

        @if $include-ie {
            .#{$prefix}ie8 & {
                // min-height triggers content-box sizing on IE8, so subtract padding
                min-height: $ui-height - vertical($ui-border-width) - vertical($ui-padding);
            }
        }

        &.#{$prefix}form-textarea {
            line-height: $ui-textarea-line-height;
            min-height: $ui-textarea-body-height;

            @if $include-ie {
                .#{$prefix}ie8 & {
                    // min-height triggers content-box sizing on IE8, so subtract padding
                    min-height: $ui-textarea-body-height - vertical($ui-padding);
                }
            }

            // Must cascade in ie8 rule since we'll have the same specificity
            .#{$prefix}form-text-heighted & {
                // When the textareafield is given a height or flex, we need to back-off
                // the min-height here or else those height values on the outer el won't
                // have the desired effect:
                min-height: auto;
            }
        }

        &.#{$prefix}form-text-file {
            color: $ui-file-field-color;
        }

        &.#{$prefix}webkit-border-box-bug {
            // workaround for https://bugs.webkit.org/show_bug.cgi?id=137693
            height: calc(100% + #{vertical($ui-padding)});
        }
    }

    .#{$prefix}placeholder-label-#{$ui} {
        padding: $ui-padding;
    }

    .#{$prefix}form-empty-field-#{$ui} + .#{$prefix}placeholder-label-#{$ui} {
        color: $ui-empty-color;
    }

    // selectors with vendor specific pseudo classes cannot be combined with other selectors
    .#{$prefix}form-text-#{$ui}:-ms-input-placeholder {
        color: $ui-empty-color;
    }

    .#{$prefix}form-invalid-field-#{$ui} {
        background-color: $ui-invalid-background-color;
        @if not is-null($ui-invalid-background-image) {
            background-image: theme-background-image($ui-invalid-background-image);
            background-repeat: $ui-invalid-background-repeat;
            background-position: $ui-invalid-background-position;
        }
    }

    $bg-position-y: if($ui-classic-border, 0, center);

    .#{$prefix}form-trigger-#{$ui} {
        width: $ui-trigger-width;

        @if $enable-font-icons and ($ui-trigger-glyph != null) {
            @include font-icon($ui-trigger-glyph, $line-height: $ui-height - vertical($ui-border-width));
            background: $ui-trigger-background-color;
            color: $ui-trigger-glyph-color;
        } @else {
            background: 0 $bg-position-y $ui-trigger-background-color theme-background-image($ui-trigger-background-image) no-repeat;
        }

        @if $ui-trigger-border-width != 0 {
            border-width: $ui-trigger-border-width;
            border-color: $ui-trigger-border-color;
            border-style: $ui-trigger-border-style;
        }

        @if $include-rtl and ((not $enable-font-icons) or ($ui-trigger-glyph == null)) {
            &.#{$prefix}rtl {
                background-image: theme-background-image($ui-trigger-background-image + '-rtl');
            }
        }

        &.#{$prefix}form-trigger-over {
            background-position: -$ui-trigger-width $bg-position-y;
            @if $ui-trigger-border-width != 0 and $ui-trigger-border-color-over != $ui-trigger-border-color {
                border-color: $ui-trigger-border-color-over;
            }

            &.#{$prefix}form-trigger-focus {
                background-position: -($ui-trigger-width * 4) $bg-position-y;
            }
        }

        &.#{$prefix}form-trigger-focus {
            background-position: -($ui-trigger-width * 3) $bg-position-y;
            @if $ui-trigger-border-width != 0 and $ui-trigger-border-color-focus != $ui-trigger-border-color {
                border-color: $ui-trigger-border-color-focus;
            }
        }
    }

    // add x-form-trigger class to increase specificity of "click" above focus/over
    .#{$prefix}form-trigger.#{$prefix}form-trigger-#{$ui}.#{$prefix}form-trigger-click {
        background-position: -($ui-trigger-width * 2) $bg-position-y;
        @if $ui-trigger-border-width != 0 and $ui-trigger-border-color-pressed != $ui-trigger-border-color-over {
            border-color: $ui-trigger-border-color-pressed;
        }
    }

    // Text field or subclass inside cell - calculate top/bottom padding to keep row height correct
    @if $include-ext-grid-column-widget or $include-ext-grid-plugin-editing {
        .#{$prefix}textfield-#{$ui}-cell > .#{$prefix}grid-cell-inner {
            padding-top:    max(ceil(($grid-row-height - $ui-height) / 2), 0);
            padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);
        }
    }
}