/**
 * @class Ext.form.FieldSet
 */

/**
 * @var {number}
 * The font-size of the FieldSet header
 */
$fieldset-header-font-size: dynamic(ceil($font-size * .9));

/**
 * @var {string}
 * The font-weight of the FieldSet header
 */
$fieldset-header-font-weight: dynamic($font-weight);

/**
 * @var {string}
 * The font-family of the FieldSet header
 */
$fieldset-header-font-family: dynamic($font-family);

/**
 * @var {number/string}
 * The line-height of the FieldSet header
 */
$fieldset-header-line-height: dynamic(14px);

/**
 * @var {color}
 * The text color of the FieldSet header
 */
$fieldset-header-color: dynamic(adjust-color($base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%));

/**
 * @var {number}
 * The border-width of the FieldSet
 */
$fieldset-border-width: dynamic(1px);

/**
 * @var {string}
 * The border-style of the FieldSet
 */
$fieldset-border-style: dynamic(solid);

/**
 * @var {color}
 * The border-color of the FieldSet
 */
$fieldset-border-color: dynamic(#B5B8C8);

/**
 * @var {number}
 * The border radius of FieldSet elements.
 */
$fieldset-border-radius: dynamic(0);

/**
 * @var {number/list}
 * The FieldSet's padding
 */
$fieldset-padding: dynamic(0 10px);

/**
 * @var {number/list}
 * The FieldSet's margin
 */
$fieldset-margin: dynamic(0 0 10px);

/**
 * @var {number/list}
 * The padding to apply to the FieldSet's header
 */
$fieldset-header-padding: dynamic(0 3px 1px);

/**
 * @var {number}
 * The size of the FieldSet's collapse tool
 */
$fieldset-collapse-tool-size: dynamic(15px);

/**
 * @var {number/list}
 * The margin to apply to the FieldSet's collapse tool
 */
$fieldset-collapse-tool-margin: dynamic(1px 3px 0 0);

/**
 * @var {number/list}
 * The padding to apply to the FieldSet's collapse tool
 */
$fieldset-collapse-tool-padding: dynamic(0);

/**
 * @var {string} $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'.
 */
$fieldset-collapse-tool-background-image: dynamic('none');

/**
 * @var {number}
 * The opacity of the FieldSet's collapse tool
 */
$fieldset-collapse-tool-opacity: dynamic(1);

/**
 * @var {number}
 * The opacity of the FieldSet's collapse tool when hovered
 */
$fieldset-collapse-tool-opacity-over: dynamic(1);

/**
 * @var {number}
 * The opacity of the FieldSet's collapse tool when pressed
 */
$fieldset-collapse-tool-opacity-pressed: dynamic(1);

/**
 * @var {number}
 * The font size to use for the collapse/expand tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$fieldset-tool-glyph-font-size: dynamic(16px);

/**
 * @var {color}
 * The color to use for the collapse/expand tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$fieldset-tool-glyph-color: dynamic($fieldset-header-color);

/**
 * @var {string/list}
 * Glyph for the "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$fieldset-tool-expand-glyph: dynamic($fa-var-caret-down $fieldset-tool-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$fieldset-tool-collapse-glyph: dynamic($fa-var-caret-up $fieldset-tool-glyph-font-size $font-icon-font-family);

/**
 * @var {number/list}
 * The margin to apply to the FieldSet's checkbox (for FieldSets that use
 * {@link #checkboxToggle})
 */
$fieldset-checkbox-margin: dynamic($fieldset-collapse-tool-margin);

$fieldset-use-standard-tool-background-positions: dynamic(false);

/**
 * @var {boolean}
 * True to include the "default" fieldset UI
 */
$include-fieldset-default-ui: dynamic($include-field-default-ui);

/**
 * 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})
 *
 * @param {boolean} [$ui-use-standard-tool-background-positions=$fieldset-use-standard-tool-background-positions]
 *
 * @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 {
            .#{$prefix}keyboard-mode & {
                outline: 1px solid $form-field-focus-border-color;
            }
        }
    }

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