/**
 * @class Ext.field.Field
 */
 
/**
 * @var {color}
 * Field background-color
 */
$field-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field background-color when focused
 */
$field-focused-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field background-color when invalid
 */
$field-invalid-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field background-color when disabled
 */
$field-disabled-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field label text color
 */
$field-label-color: dynamic($color);
 
/**
 * @var {color}
 * Field label text color when focused
 */
$field-focused-label-color: dynamic(null);
 
/**
 * @var {color}
 * Field label text color when invalid
 */
$field-invalid-label-color: dynamic(null);
 
/**
 * @var {color}
 * Field label text color when disabled
 */
$field-disabled-label-color: dynamic(null);
 
/**
 * @var {color}
 * Field label background-color
 */
$field-label-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field label background-color when focused
 */
$field-focused-label-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field label background-color when invalid
 */
$field-invalid-label-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field label background-color when disabled
 */
$field-disabled-label-background-color: dynamic(null);
 
/**
 * @var {color}
 * Field label padding
 */
$field-label-padding: dynamic(px-to-em(3px 6px 3px 0, 13px));
 
/**
 * @var {color}
 * Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-padding-big: dynamic(px-to-em(3px 6px 3px 0, 15px));
 
/**
 * @var {string/number}
 * Field label font-weight
 */
$field-label-font-weight: dynamic($font-weight-bold);
 
/**
 * @var {number}
 * Field label font-size
 */
$field-label-font-size: dynamic(1rem);
 
/**
 * @var {number}
 * Field label font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Field label line-height
 */
$field-label-line-height: dynamic(px-to-em(16px, 13px));
 
/**
 * @var {number}
 * Field label line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-line-height-big: dynamic(px-to-em(24px, 15px));
 
/**
 * @var {string}
 * Field label font-family
 */
$field-label-font-family: dynamic($font-family);
 
/**
 * @var {number}
 * Opacity of form fields when disabled
 */
$field-disabled-opacity: dynamic(.3);
 
/**
 * @var {string/number}
 * Field {@link #required} indicator font-weight
 */
$field-required-indicator-font-weight: dynamic(null);
 
/**
 * @var {number}
 * Field {@link #required} indicator font-size
 */
$field-required-indicator-font-size: dynamic(null);
 
/**
 * @var {number}
 * Field {@link #required} indicator line-height
 */
$field-required-indicator-line-height: dynamic(null);
 
/**
 * @var {string}
 * Field {@link #required} indicator font-family
 */
$field-required-indicator-font-family: dynamic(null);
 
/**
 * @var {number}
 * Field {@link #required} indicator margin
 */
$field-required-indicator-margin: dynamic(-.2em null null .3em);
 
/**
 * @var {number}
 * Field {@link #required} indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-required-indicator-margin-big: dynamic(null);
 
/**
 * Creates a visual theme for a 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=field] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Field background-color
 *
 * @param {color} $focused-background-color
 * Field background-color when focused
 *
 * @param {color} $invalid-background-color
 * Field background-color when invalid
 *
 * @param {color} $disabled-background-color
 * Field background-color when disabled
 *
 * @param {color} $label-color
 * Field label text color
 *
 * @param {color} $focused-label-color
 * Field label text color when focused
 *
 * @param {color} $invalid-label-color
 * Field label text color when invalid
 *
 * @param {color} $disabled-label-color
 * Field label text color when disabled
 *
 * @param {color} $label-background-color
 * Field label background-color
 *
 * @param {color} $focused-label-background-color
 * Field label background-color when focused
 *
 * @param {color} $invalid-label-background-color
 * Field label background-color when invalid
 *
 * @param {color} $disabled-label-background-color
 * Field label background-color when disabled
 *
 * @param {color} $label-padding
 * Field label padding
 *
 * @param {color} $label-padding-big
 * Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $label-font-weight
 * Field label font-weight
 *
 * @param {number} $label-font-size
 * Field label font-size
 *
 * @param {number} $label-font-size-big
 * Field label font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $label-line-height
 * Field label line-height
 *
 * @param {number} $label-line-height-big
 * Field label line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $label-font-family
 * Field label font-family
 *
 * @param {number} $disabled-opacity
 * Opacity of form fields when disabled
 *
 * @param {string/number} $required-indicator-font-weight
 * Field {@link #required} indicator font-weight
 *
 * @param {number} $required-indicator-font-size
 * Field {@link #required} indicator font-size
 *
 * @param {number} $required-indicator-line-height
 * Field {@link #required} indicator line-height
 *
 * @param {string} $required-indicator-font-family
 * Field {@link #required} indicator font-family
 *
 * @param {number} $required-indicator-margin
 * Field {@link #required} indicator margin
 *
 * @param {number} $required-indicator-margin-big
 * Field {@link #required} indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin field-ui(
    $ui: null,
    $xtype: field,
    $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
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        background-color: $background-color;
 
        .#{$prefix}label-el {
            color: $label-color;
            background-color: $label-background-color;
            padding: $label-padding;
 
            @include font($label-font-weight, $label-font-size, $label-line-height, $label-font-family);
 
            @if $enable-big {
                .#{$prefix}big & {
                    padding: $label-padding-big;
                    font-size: $label-font-size-big;
                    line-height: $label-line-height-big;
                }
            }
        }
 
        &.#{$prefix}focused {
            background-color: $focused-background-color;
 
            .#{$prefix}label-el {
                color: $focused-label-color;
                background-color: $focused-label-background-color;
            }
        }
 
        &.#{$prefix}invalid {
            background-color: $invalid-background-color;
 
            .#{$prefix}label-el {
                color: $invalid-label-color;
                background-color: $invalid-label-background-color;
            }
        }
 
        &.#{$prefix}disabled {
            background-color: $disabled-background-color;
 
            // apply opacity to the label and component separately so that if the field's component has its 
            // own disabled opacity it will be applied to the same element and not layered. 
            .#{$prefix}label-el {
                opacity: $disabled-opacity;
                color: $disabled-label-color;
                background-color: $disabled-label-background-color;
            }
 
            .#{$prefix}body-el > .#{$prefix}component {
                opacity: $disabled-opacity;
            }
        }
 
        &.#{$prefix}required .#{$prefix}label-el:after {
            @include font($required-indicator-font-weight, $required-indicator-font-size, $required-indicator-line-height, $required-indicator-font-family);
            margin: $required-indicator-margin;
 
            @if $enable-big {
                .#{$prefix}big & {
                    margin: $required-indicator-margin-big;
                }
            }
        }
    }
}
 
 
// The following variables are not configurable per-UI 
 
/**
 * @var {number}
 * Vertical space in between form fields
 */
$field-vertical-spacing: dynamic(0.385em);
 
/**
 * @var {number}
 * Vertical space in between form fields in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-vertical-spacing-big: dynamic(0.534em);