/**
 * 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 Ext.form.Labelable#css_mixin-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-header-font-size=$fieldset-header-font-size]
 * The font-size of the FieldSet header
 *
 * @param {string} [$ui-header-font-weight=$fieldset-header-font-weight]
 * The font-weight of the FieldSet header
 *
 * @param {string} [$ui-header-font-family=$fieldset-header-font-family]
 * The font-family of the FieldSet header
 *
 * @param {number/string} [$ui-header-line-height=$fieldset-header-line-height]
 * The line-height of the FieldSet header
 *
 * @param {color} [$ui-header-color=$fieldset-header-color]
 * The text color of the FieldSet header
 *
 * @param {number} [$ui-border-width=$fieldset-border-width]
 * The border-width of the FieldSet
 *
 * @param {string} [$ui-border-style=$fieldset-border-style]
 * The border-style of the FieldSet
 *
 * @param {color} [$ui-border-color=$fieldset=border-color]
 * The border-color of the FieldSet
 *
 * @param {number} [$ui-border-radius=$fieldset=border-radius]
 * The border radius of FieldSet elements.
 *
 * @param {number/list} [$ui-padding=$fieldset-padding]
 * The FieldSet's padding
 *
 * @param {number/list} [$ui-margin=$fieldset-margin]
 * The FieldSet's margin
 *
 * @param {number/list} [$ui-header-padding=$fieldset-header-padding]
 * The padding to apply to the FieldSet's header
 *
 * @param {number} [$ui-collapse-tool-size=$fieldset-collapse-tool-size]
 * The size of the FieldSet's collapse tool
 *
 * @param {number/list} [$ui-collapse-tool-margin=$fieldset-collapse-tool-margin]
 * The margin to apply to the FieldSet's collapse tool
 *
 * @param {number/list} [$ui-collapse-tool-padding=$fieldset-collapse-tool-padding]
 * The padding to apply to the FieldSet's collapse tool
 *
 * @param {string} [$ui-collapse-tool-background-image=$fieldset-collapse-tool-background-image]
 * The background-image to use for the collapse tool. If 'none' the default tool
 * sprite will be used.  Defaults to 'none'.
 *
 * @param {number} [$ui-collapse-tool-opacity=$fieldset-collapse-tool-opacity]
 * The opacity of the FieldSet's collapse tool
 *
 * @param {number} [$ui-collapse-tool-opacity-over=$fieldset-collapse-tool-opacity-over]
 * The opacity of the FieldSet's collapse tool when hovered
 *
 * @param {number} [$ui-collapse-tool-opacity-pressed=$fieldset-collapse-tool-opacity-pressed]
 * The opacity of the FieldSet's collapse tool when pressed
 *
 * @param {color} [$ui-tool-glyph-color=$fieldset-tool-glyph-color]
 * The color to use for the collapse/expand tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-tool-expand-glyph=$fieldset-tool-expand-glyph]
 * Glyph for the "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-tool-collapse-glyph=$fieldset-tool-collapse-glyph]
 * Glyph for the "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number/list} [$ui-checkbox-margin=$fieldset-checkbox-margin]
 * The margin to apply to the FieldSet's checkbox (for FieldSets that use
 * {@link #checkboxToggle})
 *
 * @member Ext.form.FieldSet
 */
@mixin extjs-fieldset-ui(
    $ui: null,
    $ui-header-font-size: $fieldset-header-font-size,
    $ui-header-font-weight: $fieldset-header-font-weight,
    $ui-header-font-family: $fieldset-header-font-family,
    $ui-header-line-height: $fieldset-header-line-height,
    $ui-header-color: $fieldset-header-color,
    $ui-border-width: $fieldset-border-width,
    $ui-border-style: $fieldset-border-style,
    $ui-border-color: $fieldset-border-color,
    $ui-border-radius: $fieldset-border-radius,
    $ui-padding: $fieldset-padding,
    $ui-margin: $fieldset-margin,
    $ui-header-padding: $fieldset-header-padding,
    $ui-collapse-tool-size: $fieldset-collapse-tool-size,
    $ui-collapse-tool-margin: $fieldset-collapse-tool-margin,
    $ui-collapse-tool-padding: $fieldset-collapse-tool-padding,
    $ui-collapse-tool-background-image: $fieldset-collapse-tool-background-image,
    $ui-collapse-tool-opacity: $fieldset-collapse-tool-opacity,
    $ui-collapse-tool-opacity-over: $fieldset-collapse-tool-opacity-over,
    $ui-collapse-tool-opacity-pressed: $fieldset-collapse-tool-opacity-pressed,
    $ui-tool-glyph-color: $fieldset-tool-glyph-color,
    $ui-tool-expand-glyph: $fieldset-tool-expand-glyph,
    $ui-tool-collapse-glyph: $fieldset-tool-collapse-glyph,
    $ui-checkbox-margin: $fieldset-checkbox-margin,
    $ui-use-standard-tool-background-positions: $fieldset-use-standard-tool-background-positions 
) {
    $ui-collapse-tool-background-position: 0 0;
    $ui-collapse-tool-background-position-over: 0 (-$ui-collapse-tool-size);
    $ui-collapse-tool-background-position-collapsed: (-$ui-collapse-tool-size) 0;
    $ui-collapse-tool-background-position-collapsed-over: (-$ui-collapse-tool-size) (-$ui-collapse-tool-size);
 
    @if ($ui-use-standard-tool-background-positions) {
        $ui-collapse-tool-background-position: 0 ($ui-collapse-tool-size * -4);
        $ui-collapse-tool-background-position-over: (-$ui-collapse-tool-size) ($ui-collapse-tool-size * -4);
        $ui-collapse-tool-background-position-collapsed: 0 ($ui-collapse-tool-size * -5);
        $ui-collapse-tool-background-position-collapsed-over: (-$ui-collapse-tool-size) ($ui-collapse-tool-size * -5);
    }
 
    .#{$prefix}fieldset-#{$ui} {
        border: $ui-border-width $ui-border-style $ui-border-color;
        padding: $ui-padding;
        margin: $ui-margin;
        @if $ui-border-radius != 0 {
            @include border-radius($ui-border-radius);
        }
    }
 
    @if $include-ie {
        // Insane IE bug: Fieldset padding-top is rendered *outside* the border 
        // So we transfer the padding-top to the body element. 
        .#{$prefix}ie8 {
            .#{$prefix}fieldset-#{$ui} {
                padding-top: 0;
            }
            .#{$prefix}fieldset-body-#{$ui} {
                padding-top: top($ui-padding);
            }
        }
    }
 
    .#{$prefix}fieldset-header-#{$ui} {
        padding: $ui-header-padding;
        line-height: $ui-header-line-height;
 
        > .#{$prefix}fieldset-header-text {
            font: $ui-header-font-weight #{$ui-header-font-size}/#{$ui-header-line-height} $ui-header-font-family;
            color: $ui-header-color;
            padding: 1px 0;
        }
    }
 
    .#{$prefix}fieldset-header-checkbox-#{$ui} {
        margin: $ui-checkbox-margin;
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rtl($ui-checkbox-margin);
            }
        }
        line-height: $ui-header-line-height;
    }
 
    .#{$prefix}fieldset-header-tool-#{$ui} {
        margin: $ui-collapse-tool-margin;
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rtl($ui-collapse-tool-margin);
            }
        }
        padding: $ui-collapse-tool-padding;
 
        > .#{$prefix}tool-img {
            @include opacity($ui-collapse-tool-opacity);
            height: $ui-collapse-tool-size;
            width: $ui-collapse-tool-size;
        }
 
        @if $ui-collapse-tool-opacity-over != 1 or $ui-collapse-tool-opacity != 1 {
            &.#{$prefix}tool-over > .#{$prefix}tool-img {
                @include opacity($ui-collapse-tool-opacity-over);
            }
        }
 
        @if $ui-collapse-tool-opacity-pressed != 1 or $ui-collapse-tool-opacity != 1 {
            &.#{$prefix}tool-pressed > .#{$prefix}tool-img {
                @include opacity($ui-collapse-tool-opacity-pressed);
            }
        }
 
        @if $enable-font-icons and ($ui-tool-expand-glyph != null) {
            > .#{$prefix}tool-toggle {
                @include font-icon($ui-tool-expand-glyph);
                color: $ui-tool-glyph-color;
            }
        } @else {
            > .#{$prefix}tool-toggle {
                @if not is-null($ui-collapse-tool-background-image) {
                    background-image: theme-background-image($ui-collapse-tool-background-image);
                }
                background-position: $ui-collapse-tool-background-position;
            }
            @if not is-null($ui-collapse-tool-background-position-over) {
                &.#{$prefix}tool-over > .#{$prefix}tool-toggle {
                    background-position: $ui-collapse-tool-background-position-over;
                }
            }
        }
 
        // TODO Come up with proper styling! 
        &.#{$prefix}focus {
            outline: 1px solid red;
        }
    }
 
    .#{$prefix}fieldset-#{$ui} {
        &.#{$prefix}fieldset-collapsed {
            @if $ui-border-radius != 0 {
                @include border-radius(0);
            }
            border-width: 1px 1px 0 1px;
            border-left-color: transparent;
            border-right-color: transparent;
 
            @if $enable-font-icons and ($ui-tool-collapse-glyph != null) {
                .#{$prefix}tool-toggle {
                    @include font-icon($ui-tool-collapse-glyph);
                }
            } @else {
                .#{$prefix}tool-toggle {
                    background-position: $ui-collapse-tool-background-position-collapsed;
                }
                @if not is-null($ui-collapse-tool-background-position-collapsed-over) {
                    .#{$prefix}tool-over > .#{$prefix}tool-toggle {
                        background-position: $ui-collapse-tool-background-position-collapsed-over;
                    }
                }
            }
        }
    }
}
 
@if $include-fieldset-default-ui {
    @include extjs-fieldset-ui( 
        $ui: 'default' 
    );
}