/**
 * @class Ext.Toolbar
 */

/**
 * @var {color}
 * Toolbar background-color
 */
$toolbar-background-color: dynamic($background-color);

/**
 * @var {string/list}
 * Toolbar background-gradient. Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$toolbar-background-gradient: dynamic(null);

/**
 * @var {color}
 * Toolbar color
 */
$toolbar-color: dynamic($color);

/**
 * @var {number/list}
 * Toolbar border-width
 */
$toolbar-border-width: dynamic(1px);

/**
 * @var {string/list}
 * Toolbar border-style
 */
$toolbar-border-style: dynamic(solid);

/**
 * @var {color/list}
 * Toolbar border-color
 */
$toolbar-border-color: dynamic($neutral-medium-dark-color);

/**
 * @var {list}
 * Toolbar box-shadow
 */
$toolbar-box-shadow: dynamic(null);

/**
 * @var {string/number}
 * Toolbar font-weight
 */
$toolbar-font-weight: dynamic($font-weight-bold);

/**
 * @var {number}
 * Toolbar font-size
 */
$toolbar-font-size: dynamic($font-size);

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

/**
 * @var {number}
 * Toolbar line-height
 */
$toolbar-line-height: dynamic(16px);

/**
 * @var {number}
 * Toolbar line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-line-height-big: dynamic(null);

/**
 * @var {string}
 * Toolbar font-family
 */
$toolbar-font-family: dynamic($font-family);

/**
 * @var {number/list}
 * Toolbar padding
 */
$toolbar-padding: dynamic(6px 8px);

/**
 * @var {number/list}
 * Toolbar padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-padding-big: dynamic(6px 10px);

/**
 * @var {number}
 * The space in between horizontally aligned Toolbar items
 */
$toolbar-horizontal-spacing: dynamic(8px);

/**
 * @var {number}
 * The space in between horizontally aligned Toolbar items in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-horizontal-spacing-big: dynamic(10px);

/**
 * @var {number}
 * The space in between vertically aligned Toolbar items
 */
$toolbar-vertical-spacing: dynamic(6px);

/**
 * @var {number}
 * The space in between vertically aligned Toolbar items in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-vertical-spacing-big: dynamic(8px);

/**
 * @var {color}
 * Toolbar {@link Ext.Title Title} color
 */
$toolbar-title-color: dynamic($highlight-color);

/**
 * @var {string/number}
 * Toolbar {@link Ext.Title Title} font-weight
 */
$toolbar-title-font-weight: dynamic($toolbar-font-weight);

/**
 * @var {number}
 * Toolbar {@link Ext.Title Title} font-size
 */
$toolbar-title-font-size: dynamic($toolbar-font-size);

/**
 * @var {number}
 * Toolbar {@link Ext.Title Title} font-size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-title-font-size-big: dynamic($toolbar-font-size-big);

/**
 * @var {string}
 * Toolbar {@link Ext.Title Title} font-family
 */
$toolbar-title-font-family: dynamic($font-family);

/**
 * @var {number}
 * Toolbar {@link Ext.Title Title} title-padding
 */
$toolbar-title-padding: dynamic(null);

/**
 * @var {number}
 * Toolbar {@link Ext.Title Title} title-padding in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-title-padding-big: dynamic(null);

/**
 * @var {number}
 * Toolbar min-height
 */
$toolbar-min-height: dynamic(36px);

/**
 * @var {number}
 * Toolbar min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toolbar-min-height-big: dynamic(44px);

/**
 * @var {map}
 * Parameters for the "footer" toolbar UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$toolbar-footer-ui: dynamic((
    background-color: mix($base-light-color, $neutral-light-color, 30%)
));

/**
 * Creates a visual theme for a Toolbar.
 *
 * @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=toolbar] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Toolbar background-color
 *
 * @param {string/list} $background-gradient
 * Toolbar background-gradient. Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $color
 * Toolbar color
 *
 * @param {number/list} $border-width
 * Toolbar border-width
 *
 * @param {string/list} $border-style
 * Toolbar border-style
 *
 * @param {color} $border-color
 * Toolbar border-color
 *
 * @param {color} $box-shadow
 * Toolbar box-shadow
 *
 * @param {string/number} $font-weight
 * Toolbar font-weight
 *
 * @param {number} $font-size
 * Toolbar font-size
 *
 * @param {number} $font-size-big
 * Toolbar font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Toolbar line-height
 *
 * @param {number} $line-height-big
 * Toolbar line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Toolbar font-family
 *
 * @param {number/list} $padding
 * Toolbar padding
 *
 * @param {number/list} $padding-big
 * Toolbar padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $horizontal-spacing
 * The space in between horizontally aligned Toolbar items
 *
 * @param {number} $horizontal-spacing-big
 * The space in between horizontally aligned Toolbar items in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $vertical-spacing
 * The space in between vertically aligned Toolbar items
 *
 * @param {number} $vertical-spacing-big
 * The space in between vertically aligned Toolbar items in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $title-color
 * Toolbar {@link Ext.Title Title} color
 *
 * @param {string/number} $title-font-weight
 * Toolbar {@link Ext.Title Title} font-weight
 *
 * @param {number} $title-font-size
 * Toolbar {@link Ext.Title Title} font-size
 *
 * @param {number} $title-font-size-big
 * Toolbar {@link Ext.Title Title} font-size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $title-padding
 * Toolbar {@link Ext.Title Title} padding
 *
 * @param {number} $title-padding-big
 * Toolbar {@link Ext.Title Title} padding in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $title-font-family
 * Toolbar {@link Ext.Title Title} font-family
 *
 * @param {number} $min-height
 * Toolbar min-height
 *
 * @param {number} $min-height-big
 * Toolbar min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin toolbar-ui(
    $ui: null,
    $xtype: toolbar,
    $background-color: null,
    $background-gradient: null,
    $color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $box-shadow: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null,
    $horizontal-spacing: null,
    $horizontal-spacing-big: null,
    $vertical-spacing: null,
    $vertical-spacing-big: null,
    $title-color: null,
    $title-font-weight: null,
    $title-font-size: null,
    $title-font-size-big: null,
    $title-padding: null,
    $title-padding-big: null,
    $title-font-family: null,
    $min-height: null,
    $min-height-big: null
) {
    $ui-suffix: ui-suffix($ui);

    @if $background-color != null {
        @if $border-color == null {
            $border-color: toolbar-border-color($background-color);
        }

        @if $title-color == null {
            $title-color: toolbar-title-color($background-color);
        }
    }

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        @include background-gradient($background-color, $background-gradient);
        @include border($border-width, $border-style, $border-color);
        @include font($font-weight, $font-size, $line-height, $font-family);
        color: $color;
        box-shadow: $box-shadow;

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

        .#{$prefix}title {
            color: $title-color;
            padding: $title-padding;
            @include font(
                $font-weight: $title-font-weight,
                $font-size: $title-font-size,
                $font-family: $title-font-family
            );

            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $title-font-size-big;
                    padding: $title-padding-big;
                }
            }
        }
    }

    .#{$prefix}#{$xtype}#{$ui-suffix}-body-el {
        padding: $padding;
        min-height: $min-height;

        @if $enable-big {
            .#{$prefix}big & {
                padding: $padding-big;
                min-height: $min-height-big;
            }
        }

        @if $horizontal-spacing != null {
            &.#{$prefix}horizontal > .#{$prefix}component {
                margin-right: $horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-right: $horizontal-spacing-big;
                    }
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        @if $vertical-spacing != null {
            &.#{$prefix}vertical > .#{$prefix}component {
                margin-bottom: $vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-bottom: $vertical-spacing-big;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

/**
 * Creates a theme UI for toolbars.
 *
 *     // SCSS
 *     @include sencha-toolbar-ui('sub', #58710D, 'glossy');
 *
 *     // JS
 *     var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'})
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $color Base color for the UI.
 * @param {string} [$gradient=$toolbar-background-gradient] Background gradient style for the UI.
 *
 * @member Ext.Button
 * @deprecated 6.0 Use {@link #toolbar-ui} instead
 */
@mixin sencha-toolbar-ui(
    $ui-label,
    $color,
    $gradient: $toolbar-background-gradient
) {
    @include toolbar-ui(
        $ui: $ui-label,
        $background-color: $color,
        $background-gradient: $gradient
    );
}