/**
 * @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 {number/list}
 * Text Field input border width when focused
 */
$textfield-focused-input-border-width: dynamic(null);
 
/**
 * @var {number/list}
 * Text Field input border width when invalid
 */
$textfield-invalid-input-border-width: dynamic(null);
 
/**
 * @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 {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 {color}
 * Text Field input padding
 */
$textfield-input-padding: dynamic(px-to-em(3px 6px, 13px));
 
/**
 * @var {color}
 * Text Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-padding-big: dynamic(px-to-em(3px 6px, 15px));
 
/**
 * @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(1rem);
 
/**
 * @var {number}
 * Text Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Text Field input line-height
 */
$textfield-input-line-height: dynamic(px-to-em(16px, 13px));
 
/**
 * @var {number}
 * Text Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-line-height-big: dynamic(px-to-em(24px, 15px));
 
/**
 * @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);
 
/**
 * 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 {color} $label-color
 * Text Field label color
 *
 * @param {color} $focused-label-color
 * Focused Text Field label color
 *
 * @param {color} $invalid-label-color
 * Invalid Text Field label color
 *
 * @param {color} $disabled-label-color
 * Disabled Text Field label color
 *
 * @param {color} $label-background-color
 * Text Field Label background color
 *
 * @param {color} $focused-label-background-color
 * Focused Text Field Label background color
 *
 * @param {color} $invalid-label-background-color
 * Invalid Text Field Label background color
 *
 * @param {color} $disabled-label-background-color
 * Disabled Text Field Label background color
 *
 * @param {Number} $label-padding
 * Text Field label padding
 *
 * @param {Number} $label-padding-big
 * Text Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {Number} $label-font-weight
 * Text Field label font weight
 *
 * @param {Number} $label-font-size
 * Text Field label font size
 *
 * @param {Number} $label-font-size-big
 * Text Field label font size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {Number} $label-line-height
 * Text Field label line height
 *
 * @param {Number} $label-line-height-big
 * Text Field label line height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {String} $label-font-family
 * Text Field label font family
 *
 * @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 {number/list} $focused-input-border-width
 * Text Field input border width when focused
 *
 * @param {number/list} $invalid-input-border-width
 * Text Field input border width when invalid
 *
 * @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 {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
 */
@mixin textfield-ui(
    $ui: null,
    $xtype: textfield,
    $background-color: null,
    $focused-background-color: null,
    $invalid-background-color: null,
    $disabled-background-color: null,
    $label-color: null,
    $focused-label-color: null,
    $invalid-label-color: null,
    $disabled-label-color: null,
    $label-background-color: null,
    $focused-label-background-color: null,
    $invalid-label-background-color: null,
    $disabled-label-background-color: null,
    $label-padding: null,
    $label-padding-big: null,
    $label-font-weight: null,
    $label-font-size: null,
    $label-font-size-big: null,
    $label-line-height: null,
    $label-line-height-big: null,
    $label-font-family: 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,
    $focused-input-border-width: null,
    $invalid-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-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
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}input {
            @include font($input-font-weight, $input-font-size, $input-line-height, $input-font-family);
            @include border($input-border-width, $input-border-style, $input-border-color);
            background-color: $input-background-color;
        }
 
        .#{$prefix}input-el {
            color: $input-color;
            padding: $input-padding;
            // input element has to have its own line height or it is not heighted correctly 
            line-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}focused {
            .#{$prefix}input {
                @include border($focused-input-border-width, $focused-input-border-style, $focused-input-border-color);
                background-color: $focused-input-background-color;
            }
 
            .#{$prefix}input-el {
                color: $focused-input-color;
            }
        }
 
        &.#{$prefix}invalid {
            .#{$prefix}input {
                @include border($invalid-input-border-width, $invalid-input-border-style, $invalid-input-border-color);
                background-color: $invalid-input-background-color;
            }
 
            .#{$prefix}input-el {
                color: $invalid-input-color;
            }
        }
 
        &.#{$prefix}disabled {
            .#{$prefix}input {
                background-color: $disabled-input-background-color;
                border-color: $disabled-input-border-color;
            }
 
            .#{$prefix}input-el {
                color: $disabled-input-color;
            }
        }
 
 
        // When border widths for the various states are not the same (e.g. focused 
        // state in material theme) it can cause the text/triggers to move when changing 
        // states.  The following rules ensure that the text and triggers remain still 
        // while moving between states with potentially different border widths. 
 
        $top-border-width: top($input-border-width) or top($textfield-input-border-width) or 0;
        $bottom-border-width: bottom($input-border-width) or bottom($textfield-input-border-width) or 0;
        $focused-top-border-width: top($focused-input-border-width) or top($textfield-focused-input-border-width) or $top-border-width;
        $focused-bottom-border-width: bottom($focused-input-border-width) or bottom($textfield-focused-input-border-width) or $bottom-border-width;
        $invalid-top-border-width: top($invalid-input-border-width) or top($textfield-invalid-input-border-width) or $top-border-width;
        $invalid-bottom-border-width: bottom($invalid-input-border-width) or bottom($textfield-invalid-input-border-width) or $bottom-border-width;
        $smallest-top-border: min($top-border-width, $focused-top-border-width, $invalid-top-border-width);
        $smallest-bottom-border: min($bottom-border-width, $focused-bottom-border-width, $invalid-bottom-border-width);
 
        .#{$prefix}input-el, .#{$prefix}before-el, .#{$prefix}after-el, {
            @if $top-border-width != $smallest-top-border {
                margin-top: -($smallest-top-border - $top-border-width);
            }
 
            @if $bottom-border-width != $smallest-bottom-border {
                margin-bottom: $smallest-bottom-border - $bottom-border-width;
            }
        }
 
        &.#{$prefix}focused {
            .#{$prefix}input-el, .#{$prefix}before-el, .#{$prefix}after-el, {
                @if $focused-top-border-width != $smallest-top-border {
                    margin-top: -($smallest-top-border - $focused-top-border-width);
                }
 
                @if $focused-bottom-border-width != $smallest-bottom-border {
                    margin-bottom: $smallest-bottom-border - $focused-bottom-border-width;
                }
            }
        }
 
        &.#{$prefix}invalid {
            .#{$prefix}input-el, .#{$prefix}before-el, .#{$prefix}after-el, {
                @if $invalid-top-border-width != $smallest-top-border {
                    margin-top: -($smallest-top-border - $invalid-top-border-width);
                }
 
                @if $invalid-bottom-border-width != $smallest-bottom-border {
                    margin-bottom: $smallest-bottom-border - $invalid-bottom-border-width;
                }
            }
        }
    }
}