/**
 * @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 {number/list}
 * Field label padding
 */
$field-label-padding: dynamic(4px 6px 3px 0);

/**
 * @var {number/list}
 * Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-padding-big: dynamic(6px 6px 6px 0);

/**
 * @var {string/number}
 * Field label font-weight
 */
$field-label-font-weight: dynamic($font-weight-normal);

/**
 * @var {number}
 * Field label font-size
 */
$field-label-font-size: dynamic($font-size);

/**
 * @var {number}
 * Field label font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-font-size-big: dynamic($font-size-big);

/**
 * @var {number}
 * Field label line-height
 */
$field-label-line-height: dynamic(17px);

/**
 * @var {number}
 * Field label line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-line-height-big: dynamic(20px);

/**
 * @var {string}
 * Field label font-family
 */
$field-label-font-family: dynamic($font-family);

/**
 * @var {number}
 * Field label width
 */
$field-label-width: dynamic(100px);

/**
 * @var {number}
 * Field label width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-width-big: dynamic(120px);

/**
 * @var {number}
 * Field label min-width
 */
$field-label-min-width: dynamic(null);

/**
 * @var {number}
 * Field label min-width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-label-min-width-big: dynamic(null);

/**
 * @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(-3px null null 4px);

/**
 * @var {number}
 * Field {@link #required} indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-required-indicator-margin-big: dynamic(null);

/**
 * @var {string}
 * Field error icon when {#errorTarget} is `'side'`
 */
$field-error-icon-side: dynamic($fa-var-exclamation-circle 'Font Awesome 5 Free');

/**
 * @var {color}
 * Field error icon color when {#errorTarget} is `'side'`
 */
$field-error-icon-side-color: dynamic($alert-color);

/**
 * @var {number}
 * Field error icon size when {#errorTarget} is `'side'`
 */
$field-error-icon-side-size: dynamic(16px);

/**
 * @var {number}
 * Field error icon size when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-side-size-big: dynamic(30px);

/**
 * @var {number}
 * Field error icon font-size when {#errorTarget} is `'side'`
 */
$field-error-icon-side-font-size: dynamic(null);

/**
 * @var {number}
 * Field error icon font-size when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-side-font-size-big: dynamic(null);

/**
 * @var {number/list}
 * Field error icon margin when {#errorTarget} is `'side'`
 */
$field-error-icon-side-margin: dynamic(0 5px);

/**
 * @var {number/list}
 * Field error icon margin when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-side-margin-big: dynamic(0 8px);

/**
 * @var {string}
 * Field error icon when {#errorTarget} is `'under'`
 */
$field-error-icon-under: dynamic($fa-var-exclamation-circle 'Font Awesome 5 Free');

/**
 * @var {color}
 * Field error icon color when {#errorTarget} is `'under'`
 */
$field-error-icon-under-color: dynamic($alert-color);

/**
 * @var {number}
 * Field error icon size when {#errorTarget} is `'under'`
 */
$field-error-icon-under-size: dynamic(16px);

/**
 * @var {number}
 * Field error icon size when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-under-size-big: dynamic(30px);

/**
 * @var {number}
 * Field error icon font-size when {#errorTarget} is `'under'`
 */
$field-error-icon-under-font-size: dynamic(null);

/**
 * @var {number}
 * Field error icon font-size when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-under-font-size-big: dynamic(null);

/**
 * @var {number/list}
 * Field error icon margin when {#errorTarget} is `'under'`
 */
$field-error-icon-under-margin: dynamic(0 5px 0 0);

/**
 * @var {number/list}
 * Field error icon margin when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-icon-under-margin-big: dynamic(0 8px 0 0);

/**
 * @var {number/list}
 * Field error element margin when {#errorTarget} is `'under'`
 */
$field-error-under-margin: dynamic(2px 0);

/**
 * @var {number/list}
 * Field error element margin when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-under-margin-big: dynamic(3px);

/**
 * @var {color}
 * Field error message color
 */
$field-error-message-color: dynamic($alert-color);

/**
 * @var {string/number}
 * Field error message font-weight
 */
$field-error-message-font-weight: dynamic($font-weight);

/**
 * @var {number}
 * Field error message font-size
 */
$field-error-message-font-size: dynamic(1rem);

/**
 * @var {number}
 * Field error message font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-message-font-size-big: dynamic(null);

/**
 * @var {number}
 * Field error message line-height
 */
$field-error-message-line-height: dynamic(16px);

/**
 * @var {number}
 * Field error message line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-error-message-line-height-big: dynamic(24px);

/**
 * @var {string}
 * Field error message font-family
 */
$field-error-message-font-family: dynamic($font-family);

/**
 * 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 {number/list} $label-padding
 * Field label padding
 *
 * @param {number/list} $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} $label-width
 * Field label width
 *
 * @param {number} $label-width-big
 * Field label width in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $label-min-width
 * Field label min-width
 *
 * @param {number} $label-min-width-big
 * Field label min-width in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @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
 *
 * @param {string} $error-icon-side
 * Field error icon when {#errorTarget} is `'side'`
 *
 * @param {color} $error-icon-side-color
 * Field error icon color when {#errorTarget} is `'side'`
 *
 * @param {number} $error-icon-side-size
 * Field error icon size when {#errorTarget} is `'side'`
 *
 * @param {number} $error-icon-side-size-big
 * Field error icon size when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $error-icon-side-font-size
 * Field error icon font-size when {#errorTarget} is `'side'`
 *
 * @param {number} $error-icon-side-font-size-big
 * Field error icon font-size when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $error-icon-side-margin
 * Field error icon margin when {#errorTarget} is `'side'`
 *
 * @param {number/list} $error-icon-side-margin-big
 * Field error icon margin when {#errorTarget} is `'side'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $error-icon-under
 * Field error icon when {#errorTarget} is `'under'`
 *
 * @param {color} $error-icon-under-color
 * Field error icon color when {#errorTarget} is `'under'`
 *
 * @param {number} $error-icon-under-size
 * Field error icon size when {#errorTarget} is `'under'`
 *
 * @param {number} $error-icon-under-size-big
 * Field error icon size when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $error-icon-under-font-size
 * Field error icon font-size when {#errorTarget} is `'under'`
 *
 * @param {number} $error-icon-under-font-size-big
 * Field error icon font-size when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $error-icon-under-margin
 * Field error icon margin when {#errorTarget} is `'under'`
 *
 * @param {number/list} $error-icon-under-margin-big
 * Field error icon margin when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $error-under-margin
 * Field error element margin when {#errorTarget} is `'under'`
 *
 * @param {number/list} $error-under-margin-big
 * Field error element margin when {#errorTarget} is `'under'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $error-message-color
 * Field error message color
 *
 * @param {string/number} $error-message-font-weight
 * Field error message font-weight
 *
 * @param {number} $error-message-font-size
 * Field error message font-size
 *
 * @param {number} $error-message-font-size-big
 * Field error message font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $error-message-line-height
 * Field error message line-height
 *
 * @param {number} $error-message-line-height-big
 * Field error message line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $error-message-font-family
 * Field error message font-family
 */
@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,
    $label-width: null,
    $label-width-big: null,
    $label-min-width: null,
    $label-min-width-big: 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,
    $error-icon-side: null,
    $error-icon-side-color: null,
    $error-icon-side-size: null,
    $error-icon-side-size-big: null,
    $error-icon-side-font-size: null,
    $error-icon-side-font-size-big: null,
    $error-icon-side-margin: null,
    $error-icon-side-margin-big: null,
    $error-icon-under: null,
    $error-icon-under-color: null,
    $error-icon-under-size: null,
    $error-icon-under-size-big: null,
    $error-icon-under-font-size: null,
    $error-icon-under-font-size-big: null,
    $error-icon-under-margin: null,
    $error-icon-under-margin-big: null,
    $error-under-margin: null,
    $error-under-margin-big: null,
    $error-message-color: null,
    $error-message-font-weight: null,
    $error-message-font-size: null,
    $error-message-font-size-big: null,
    $error-message-line-height: null,
    $error-message-line-height-big: null,
    $error-message-font-family: null
) {
    $ui-suffix: ui-suffix($ui);

    // This mixin must use child selectors and not descendant selectors to ensure it only
    // styles the field's own elements and not descendants of a containerfield

    .#{$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);

            width: $label-width;
            min-width: $label-min-width;

            @if $enable-big {
                .#{$prefix}big & {
                    padding: $label-padding-big;
                    font-size: $label-font-size-big;
                    line-height: $label-line-height-big;
                    width: $label-width-big;
                    min-width: $label-min-width-big;
                }
            }
        }

        &.#{$prefix}label-align-right {
            > .#{$prefix}label-el {
                padding: flip-horizontal($label-padding);

                @if $enable-big {
                    .#{$prefix}big & {
                        padding: flip-horizontal($label-padding-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 body-wrap separately so that sliderfield
            // can reset the body-wrap opacity since the slider component has its own.
            > .#{$prefix}label-el {
                opacity: $disabled-opacity;
                color: $disabled-label-color;
                background-color: $disabled-label-background-color;
            }

            > .#{$prefix}body-wrap-el {
                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;
                }
            }
        }

        &.#{$prefix}error-target-side > * > * > .#{$prefix}error-icon-el {
            margin: $error-icon-side-margin;

            @if $enable-big {
                .#{$prefix}big & {
                    margin: $error-icon-side-margin-big;
                }
            }

            @include icon(
                $icon: $error-icon-side,
                $color: $error-icon-side-color,
                $size: $error-icon-side-size,
                $size-big: $error-icon-side-size-big,
                $font-size: $error-icon-side-font-size,
                $font-size-big: $error-icon-side-font-size-big
            );
        }

        &.#{$prefix}error-target-under {
            > * > * > .#{$prefix}error-icon-el {
                margin: $error-icon-under-margin;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin: $error-icon-under-margin-big;
                    }
                }

                @include icon(
                    $icon: $error-icon-under,
                    $color: $error-icon-under-color,
                    $size: $error-icon-under-size,
                    $size-big: $error-icon-under-size-big,
                    $font-size: $error-icon-under-font-size,
                    $font-size-big: $error-icon-under-font-size-big
                );
            }

            > * > .#{$prefix}error-el {
                margin: $error-under-margin;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin: $error-under-margin-big;
                    }
                }
            }
        }

        > * > * > .#{$prefix}error-message-el {
            @include font(
                $error-message-font-weight,
                $error-message-font-size,
                $error-message-line-height,
                $error-message-font-family
            );

            color: $error-message-color;

            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $error-message-font-size-big;
                    line-height: $error-message-line-height-big;
                }
            }
        }
    }
}


// The following variables are not configurable per-UI

/**
 * @var {number}
 * Vertical space in between form fields
 */
$field-vertical-spacing: dynamic(8px);

/**
 * @var {number}
 * Vertical space in between form fields in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$field-vertical-spacing-big: dynamic(8px);