/**
 * @class Ext.field.Text
 */
 
/**
 * @var {color}
 * Text Field input color
 */
$textfield-input-color: dynamic($color);
 
/**
 * @var {color}
 * Text Field input color when focused
 */
$textfield-focused-input-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field input color when invalid
 */
$textfield-invalid-input-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field input color when disabled
 */
$textfield-disabled-input-color: dynamic(null);
 
/**
 * @var {number/list}
 * Text Field input border width
 */
$textfield-input-border-width: dynamic(1px);
 
/**
 * @var {string/list}
 * Text Field input border style
 */
$textfield-input-border-style: dynamic(solid);
 
/**
 * @var {string/list}
 * Text Field input border style when focused
 */
$textfield-focused-input-border-style: dynamic(null);
 
/**
 * @var {string/list}
 * Text Field input border style when invalid
 */
$textfield-invalid-input-border-style: dynamic(null);
 
//# fashion replaces $field-border-color 
/**
 * @var {color/list}
 * Text Field input border color
 */
$textfield-input-border-color: dynamic($neutral-color);
 
/**
 * @var {string/list}
 * Text Field input border color when focused
 */
$textfield-focused-input-border-color: dynamic(mix(#fff, #157fcc, 15%));
 
/**
 * @var {string/list}
 * Text Field input border color when invalid
 */
$textfield-invalid-input-border-color: dynamic($alert-color);
 
/**
 * @var {string/list}
 * Text Field input border color when disabled
 */
$textfield-disabled-input-border-color: dynamic(null);
 
/**
 * @var {number}
 * Text field input underline width
 */
$textfield-input-underline-width: dynamic(null);
 
/**
 * @var {number}
 * Text field input underline width when focused
 */
$textfield-focused-input-underline-width: dynamic(null);
 
/**
 * @var {number}
 * Text field input underline width when invalid
 */
$textfield-invalid-input-underline-width: dynamic(null);
 
/**
 * @var {color}
 * Text field input underline color
 */
$textfield-input-underline-color: dynamic(null);
 
/**
 * @var {color}
 * Text field input underline color when focused
 */
$textfield-focused-input-underline-color: dynamic(null);
 
/**
 * @var {color}
 * Text field input underline color when invalid
 */
$textfield-invalid-input-underline-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field input background-color
 */
$textfield-input-background-color: dynamic($background-color);
 
/**
 * @var {color}
 * Text Field input background-color when focused
 */
$textfield-focused-input-background-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field input background-color when invalid
 */
$textfield-invalid-input-background-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field input background-color when disabled
 */
$textfield-disabled-input-background-color: dynamic(null);
 
/**
 * @var {number/list}
 * Text Field input padding
 */
$textfield-input-padding: dynamic(3px 6px 2px);
 
/**
 * @var {number/list}
 * Text Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-padding-big: dynamic(5px 6px);
 
/**
 * @var {string/number}
 * Text Field input font-weight
 */
$textfield-input-font-weight: dynamic($font-weight-normal);
 
/**
 * @var {number}
 * Text Field input font-size
 */
$textfield-input-font-size: dynamic($font-size);
 
/**
 * @var {number}
 * Text Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-font-size-big: dynamic($font-size-big);
 
/**
 * @var {number}
 * Text Field input line-height
 */
$textfield-input-line-height: dynamic(17px);
 
/**
 * @var {number}
 * Text Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-line-height-big: dynamic(20px);
 
/**
 * @var {string}
 * Text Field input font-family
 */
$textfield-input-font-family: dynamic($font-family);
 
/**
 * @var {color}
 * Text Field {@link #placeholder} color
 */
$textfield-placeholder-color: dynamic($neutral-medium-dark-color);
 
/**
 * @var {color}
 * Text Field {@link #placeholder} color when focused
 */
$textfield-focused-placeholder-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field {@link #placeholder} color when invalid
 */
$textfield-invalid-placeholder-color: dynamic(null);
 
/**
 * @var {color}
 * Text Field {@link #placeholder} color when disabled
 */
$textfield-disabled-placeholder-color: dynamic(null);
 
/**
 * @var {number}
 * Text Field body width
 */
$textfield-body-width: dynamic(170px);
 
/**
 * @var {number}
 * Text Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-body-width-big: dynamic(200px);
 
/**
 * @var {map}
 * Parameters for the "celleditor" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-celleditor-ui: dynamic((
    input-padding:
        top($gridcell-padding or 0) - top($textfield-input-border-width or 0) 
        right($gridcell-padding or 0) - right($textfield-input-border-width or 0) 
        bottom($gridcell-padding or 0) - bottom($textfield-input-border-width or 0) 
        left($gridcell-padding or 0) - left($textfield-input-border-width or 0), 
    input-padding-big:
        top($gridcell-padding-big or 0) - top($textfield-input-border-width or 0) 
        right($gridcell-padding-big or 0) - right($textfield-input-border-width or 0) 
        bottom($gridcell-padding-big or 0) - bottom($textfield-input-border-width or 0) 
        left($gridcell-padding-big or 0) - left($textfield-input-border-width or 0), 
    input-line-height: $gridcell-line-height, 
    input-line-height-big: $gridcell-line-height-big, 
    input-font-size: $gridcell-font-size, 
    input-font-size-big: $gridcell-font-size-big 
));
 
/**
 * @var {number}
 * The duration for the focus {@link #animateUnderline underline animation}
 */
$textfield-animate-underline-duration: dynamic(.45s);
 
/**
 * @var {map}
 * Parameters for the "alt" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-alt-ui: dynamic((
    input-background-color: rgba(255, 255, 255, .2), 
    focused-input-background-color: rgba(255, 255, 255, .15), 
    input-color: rgba(255, 255, 255, .6), 
    focused-input-color: rgba(255, 255, 255, .6), 
    input-padding: 7px 7px 7px 0, 
    input-padding-big: 7px 7px 7px 0, 
    input-border-width: 0, 
    placeholder-color: rgba(255, 255, 255, .6), 
    focused-placeholder-color: rgb(255, 255, 255), 
    border-radius: 3px 
));
 
/**
 * @var {map}
 * Parameters for the "faded" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-faded-ui: dynamic((
    input-background-color: rgba(0, 0, 0, .1), 
    focused-input-background-color: rgba(0, 0, 0, .15), 
    input-color: rgba(0, 0, 0, .4), 
    focused-input-color: rgba(0, 0, 0, .4), 
    input-padding: 7px 7px 7px 0, 
    input-padding-big: 7px 7px 7px 0, 
    input-border-width: 0, 
    placeholder-color: rgba(0, 0, 0, .4), 
    focused-placeholder-color: #333, 
    border-radius: 3px 
));
 
/**
 * @var {map}
 * Parameters for the "solo" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-solo-ui: dynamic((
    input-background-color: #FFFFFF, 
    input-color: rgba(0, 0, 0, .4), 
    focused-input-color: rgba(0, 0, 0, .4), 
    input-padding: 10px 10px 10px 0, 
    input-padding-big: 10px 10px 10px 0, 
    input-border-width: 0, 
    placeholder-color: rgba(0, 0, 0, .4), 
    border-radius: 3px 
));
 
/**
 * Creates a visual theme for a Text Field
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=textfield] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Text Field input background color
 *
 * @param {color} $focused-background-color
 * Focused Text Field background color
 *
 * @param {color} $invalid-background-color
 * Invalid Text Field background color
 *
 * @param {color} $disabled-background-color
 * Disabled Text Field background color
 *
 * @param {Number} $disabled-opacity
 * Text Field disabled opacity
 *
 * @param {Number} $required-indicator-font-weight
 * Required indicator font weight
 *
 * @param {Number} $required-indicator-font-size
 * Required indicator font size
 *
 * @param {Number} $required-indicator-line-height
 * Required indicator line height
 *
 * @param {String} $required-indicator-font-family
 * Required indicator font family
 *
 * @param {String} $required-indicator-margin
 * Required indicator margin
 *
 * @param {String} $required-indicator-margin-big
 * Required indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $input-color
 * Text field input color
 *
 * @param {color} $focused-input-color
 * Text Field input color when focused
 *
 * @param {color} $invalid-input-color
 * Text Field input color when invalid
 *
 * @param {color} $disabled-input-color
 * Text Field input color when disabled
 *
 * @param {number/list} $input-border-width
 * Text Field input border width
 *
 * @param {string/list} $input-border-style
 * Text Field input border style
 *
 * @param {string/list} $focused-input-border-style
 * Text Field input border style when focused
 *
 * @param {string/list} $invalid-input-border-style
 * Text Field input border style when invalid
 *
 * @param {color/list} $input-border-color
 * Text Field input border color
 *
 * @param {string/list} $focused-input-border-color
 * Text Field input border color when focused
 *
 * @param {string/list} $invalid-input-border-color
 * Text Field input border color when invalid
 *
 * @param {string/list} $disabled-input-border-color
 * Text Field input border color when disabled
 *
 * @param {number} $input-underline-width
 * Text field input underline width
 *
 * @param {number} $focused-input-underline-width
 * Text field input underline width when focused
 *
 * @param {number} $invalid-input-underline-width
 * Text field input underline width when invalid
 *
 * @param {color} $input-underline-color
 * Text field input underline color
 *
 * @param {color} $focused-input-underline-color
 * Text field input underline color when focused
 *
 * @param {color} $invalid-input-underline-color
 * Text field input underline color when invalid
 *
 * @param {color} $input-background-color
 * Text Field input background-color
 *
 * @param {color} $focused-input-background-color
 * Text Field input background-color when focused
 *
 * @param {color} $invalid-input-background-color
 * Text Field input background-color when invalid
 *
 * @param {color} $disabled-input-background-color
 * Text Field input background-color when disabled
 *
 * @param {color} $input-padding
 * Text Field input padding
 *
 * @param {color} $input-padding-big
 * Text Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $input-font-weight
 * Text Field input font-weight
 *
 * @param {number} $input-font-size
 * Text Field input font-size
 *
 * @param {number} $input-font-size-big
 * Text Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $input-line-height
 * Text Field input line-height
 *
 * @param {number} $input-line-height-big
 * Text Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $input-font-family
 * Text Field input font-family
 *
 * @param {color} $placeholder-color
 * Text Field {@link #placeholder} color
 *
 * @param {color} $focused-placeholder-color
 * Text Field {@link #placeholder} color when focused
 *
 * @param {color} $invalid-placeholder-color
 * Text Field {@link #placeholder} color when invalid
 *
 * @param {color} $disabled-placeholder-color
 * Text Field {@link #placeholder} color when disabled
 *
 * @param {number} $border-radius
 * The border radius of the text field
 *
 * @param {number} $body-width
 * Text Field body width
 *
 * @param {number} $body-width-big
 * Text Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $animate-underline-duration
 * The duration, in seconds, for the focus {@link #animateUnderline underline animation}
 */
@mixin textfield-ui(
    $ui: null,
    $xtype: textfield,
    $background-color: null,
    $focused-background-color: null,
    $invalid-background-color: null,
    $disabled-background-color: null,
    $disabled-opacity: null,
    $required-indicator-font-weight: null,
    $required-indicator-font-size: null,
    $required-indicator-line-height: null,
    $required-indicator-font-family: null,
    $required-indicator-margin: null,
    $required-indicator-margin-big: null,
    $input-color: null,
    $focused-input-color: null,
    $invalid-input-color: null,
    $disabled-input-color: null,
    $input-border-width: null,
    $input-border-style: null,
    $focused-input-border-style: null,
    $invalid-input-border-style: null,
    $input-border-color: null,
    $focused-input-border-color: null,
    $invalid-input-border-color: null,
    $disabled-input-border-color: null,
    $input-underline-width: null,
    $focused-input-underline-width: null,
    $invalid-input-underline-width: null,
    $input-underline-color: null,
    $focused-input-underline-color: null,
    $invalid-input-underline-color: null,
    $input-background-color: null,
    $focused-input-background-color: null,
    $invalid-input-background-color: null,
    $disabled-input-background-color: null,
    $input-padding: null,
    $input-padding-big: null,
    $input-font-weight: null,
    $input-font-size: null,
    $input-font-size-big: null,
    $input-line-height: null,
    $input-line-height-big: null,
    $input-font-family: null,
    $placeholder-color: null,
    $focused-placeholder-color: null,
    $invalid-placeholder-color: null,
    $disabled-placeholder-color: null,
    $border-radius: null,
    $body-width: null,
    $body-width-big: null,
    $animate-underline-duration: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        background-color: $background-color;
        @include border-radius($border-radius);
 
        .#{$prefix}body-wrap-el {
            width: $body-width;
 
            @if $enable-big {
                .#{$prefix}big & {
                    width: $body-width-big;
                }
            }
        }
 
        // keep the background-color, color and border rules at the x-input-wrap-el 
        // level to make triggers visually inside the text field input. 
        .#{$prefix}input-wrap-el {
            @include border($input-border-width, $input-border-style, $input-border-color);
 
            background-color: $input-background-color;
            color: $input-color;
        }
 
        .#{$prefix}input-el {
            @include font($input-font-weight, $input-font-size, $input-line-height, $input-font-family);
            @include padding($input-padding);
 
            // IE11 does not respect line-height on input elements. To workaround the issue 
            // we use content-box model and set min-height in addition to line-height 
            min-height: $input-line-height;
 
            @if $enable-big {
                .#{$prefix}big & {
                    padding: $input-padding-big;
                    font-size: $input-font-size-big;
                    line-height: $input-line-height-big;
                }
            }
 
            // when using vendor prefixes, the selectors need to be separated into their own 
            // rule for each prefix because when encountering an unsupported vendor prefix, 
            // CSS parsing engines will consider the entire rule invalid. 
            &::-webkit-input-placeholder {
                color: $placeholder-color;
            }
            &::-moz-placeholder {
                color: $placeholder-color;
            }
            &:-ms-input-placeholder {
                color: $placeholder-color;
            }
        }
 
        .#{$prefix}underline-el {
            height: $input-underline-width;
            background-color: $input-underline-color;
        }
 
        &.#{$prefix}animate-underline .#{$prefix}underline-el:before {
            transition: transform $animate-underline-duration cubic-bezier(0.23, 1, 0.32, 1);
        }
 
        &.#{$prefix}focused {
            background-color: $focused-background-color;
 
            .#{$prefix}underline-el:before {
                height: $focused-input-underline-width;
                background-color: $focused-input-underline-color;
            }
 
            .#{$prefix}input-wrap-el {
                border-style: $focused-input-border-style;
                border-color: $focused-input-border-color;
                background-color: $focused-input-background-color;
                color: $focused-input-color;
            }
 
            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own 
                // rule for each prefix because when encountering an unsupported vendor prefix, 
                // CSS parsing engines will consider the entire rule invalid. 
                &::-webkit-input-placeholder {
                    color: $focused-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $focused-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $focused-placeholder-color;
                }
            }
        }
 
        &.#{$prefix}invalid {
            background-color: $invalid-background-color;
 
            .#{$prefix}underline-el:after {
                height: $invalid-input-underline-width;
                background-color: $invalid-input-underline-color;
            }
 
            .#{$prefix}input-wrap-el {
                border-style: $invalid-input-border-style;
                border-color: $invalid-input-border-color;
                background-color: $invalid-input-background-color;
                color: $invalid-input-color;
            }
 
            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own 
                // rule for each prefix because when encountering an unsupported vendor prefix, 
                // CSS parsing engines will consider the entire rule invalid. 
                &::-webkit-input-placeholder {
                    color: $invalid-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $invalid-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $invalid-placeholder-color;
                }
            }
        }
 
        &.#{$prefix}disabled {
            background-color: $disabled-background-color;
 
            .#{$prefix}input-wrap-el {
                background-color: $disabled-input-background-color;
                border-color: $disabled-input-border-color;
                color: $disabled-input-color;
            }
 
            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own 
                // rule for each prefix because when encountering an unsupported vendor prefix, 
                // CSS parsing engines will consider the entire rule invalid. 
                &::-webkit-input-placeholder {
                    color: $disabled-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $disabled-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $disabled-placeholder-color;
                }
            }
        }
    }
}