/**
 * 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 {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} $border-color
 * Toolbar border-color
 *
 * @param {number/list} $border-width
 * Toolbar border-width
 *
 * @param {number/list} $border-style
 * Toolbar border-style
 *
 * @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 {string} $title-font-family
 * Toolbar {@link Ext.Title Title} font-family
 *
 * @member Ext.Button
 */
@mixin toolbar-ui(
    $ui: null,
    $background-color: null,
    $background-gradient: null,
 
    $border-color: null,
    $border-width: null,
    $border-style: 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-font-family: 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);
        }
    }
 
    .x-toolbar#{$ui-suffix} {
        @include background-gradient($background-color, $background-gradient);
        @include border($border-width, $border-style, $border-color);
        padding: $padding;
 
        @if $enable-big and ($padding-big != $padding) {
            .x-big & {
                padding: $padding-big;
            }
        }
 
        @if $horizontal-spacing != null {
            .x-toolbar-inner.x-horizontal > * {
                margin-right: $horizontal-spacing;
 
                @if $enable-big and ($horizontal-spacing-big != $horizontal-spacing) {
                    .x-big & {
                        margin-right: $horizontal-spacing-big;
                    }
                }
 
                &:last-child {
                    margin-right: 0;
                }
            }
        }
 
        @if $vertical-spacing != null {
            .x-vertical > * {
                margin-bottom: $vertical-spacing;
 
                @if $enable-big and ($vertical-spacing-big != $vertical-spacing) {
                    .x-big & {
                        margin-bottom: $vertical-spacing-big;
                    }
                }
 
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
 
        .x-title {
            color: $title-color;
            @include font( 
                $font-weight: $title-font-weight, 
                $font-size: $title-font-size, 
                $font-family: $title-font-family 
            );
 
            @if $enable-big and ($title-font-size-big != $title-font-size) {
                .x-big & {
                    font-size: $title-font-size-big;
                }
            }
        }
    }
}
 
.x-toolbar.x-container > .x-body {
    // This ensures that the default minimum height of a toolbar is identical to the height 
    // it would have if it contained a default-styled button 
    min-height: calc(#{vertical($button-padding)} + #{vertical($button-border-width)} + #{$button-line-height});
 
    @if $enable-big {
        .x-big & {
            min-height: calc(#{vertical($button-padding-big)} + #{vertical($button-border-width)} + #{$button-line-height-big});
        }
    }
}
 
@include toolbar-ui( 
    $background-color: $toolbar-background-color, 
    $background-gradient: $toolbar-background-gradient, 
 
    $border-color: $toolbar-border-color, 
    $border-width: $toolbar-border-width, 
    $border-style: $toolbar-border-style, 
 
    $padding: $toolbar-padding, 
    $padding-big: $toolbar-padding-big, 
    $horizontal-spacing: $toolbar-horizontal-spacing, 
    $horizontal-spacing-big: $toolbar-horizontal-spacing-big, 
    $vertical-spacing: $toolbar-vertical-spacing, 
    $vertical-spacing-big: $toolbar-vertical-spacing-big, 
 
    $title-color: $toolbar-title-color, 
    $title-font-weight: $toolbar-title-font-weight, 
    $title-font-size: $toolbar-title-font-size, 
    $title-font-size-big: $toolbar-title-font-size-big, 
    $title-font-family: $toolbar-title-font-family 
);
 
/**
 * 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 
    );
}
 
 
// TODO: the following styling should be handled by field uis and a defaultFieldUI config 
.x-toolbar,
.x-msgbox {
    .x-field {
        width: 15em;
    }
 
    .x-input-text,
    .x-input-search,
    .x-input-number,
    .x-input-select {
        border: 1px solid $field-border-color;
    }
 
    .x-form-label {
        background: transparent;
        > span {
            font-weight: $font-weight-normal;
        }
    }
}
 
///** 
// * @var {color} $toolbar-input-bg 
// * Background-color for toolbar form fields. 
// */ 
//$toolbar-input-bg: #fff !default; 
 
///** 
// * @var {color} $toolbar-input-color 
// * Text color for toolbar form fields. 
// */ 
//$toolbar-input-color: #000 !default; 
 
///** 
// * @var {measurement} $toolbar-input-height 
// * Text color for toolbar form fields. 
// */ 
//$toolbar-input-height: 1.6em !default; 
 
///** 
// * @var {color} $toolbar-input-border-color 
// * Border color for toolbar form fields. 
// */ 
//$toolbar-input-border-color: rgba(#000, .5) !default; 
 
// Private 
//$toolbar-select-overflow-mask-width: 3em; 
//$toolbar-search-left-padding: 1.67em; 
// 
//// Includes default toolbar form field styles. 
// 
////so disabled fields are still dark 
//.x-spinner .x-input-el, 
//.x-field-select .x-input-el { 
//    -webkit-text-fill-color: #000; 
//    -webkit-opacity: 1; 
//} 
// 
//.x-spinner.x-item-disabled .x-input-el, 
//.x-field-select.x-item-disabled .x-input-el { 
//    -webkit-text-fill-color: currentcolor; 
//} 
// 
////and inside toolbars 
//.x-toolbar .x-field-select .x-input-el { 
//    -webkit-text-fill-color: #fff; 
//} 
// 
//.x-toolbar .x-field-select.x-item-disabled .x-input-el { 
//    -webkit-text-fill-color: rgba(255,255,255,.6); 
//} 
// 
//.x-toolbar { 
//    .x-form-field-container { 
//        @if $include-border-radius { 
//            padding: 0 .3em; 
//        } 
//    } 
// 
//    .x-slider-field, 
//    .x-toggle-field { 
//        .x-component-outer { 
//            padding: 0em .3em; 
//        } 
//    } 
// 
//    .x-field { 
//        width: 13em; 
//        padding: .5em; 
//        min-height: 0; 
//        border-bottom: 0; 
//        background: transparent; 
// 
//        .x-clear-icon { 
//            background-size: 50% 50%; 
//            right: -0.8em; 
//            margin-top: -1.06em; 
//        } 
//    } 
// 
//    .x-field-input { 
//        padding-right: 1.6em !important; 
//    } 
// 
//    .x-field-textarea, 
//    .x-field-text, 
//    .x-field-number, 
//    .x-field-search { 
//        .x-component-outer { 
//            background-color: $toolbar-input-bg; 
// 
//            @if $include-border-radius { 
//                @include border-radius(.3em); 
//            } 
// 
//            @if $include-highlights { 
//              @include box-shadow($toolbar-input-border-color 0 .1em 0 inset, $toolbar-input-border-color 0 -.1em 0 inset, $toolbar-input-border-color .1em 0 0 inset, $toolbar-input-border-color -.1em 0 0 inset, rgba(#000, .5) 0 .15em .4em inset); 
//            } 
//        } 
//    } 
// 
//    .x-form-label { 
//        background: transparent; 
//        border: 0; 
//        padding: 0; 
//        line-height: 1.4em; 
//    } 
// 
//    .x-form-field { 
//        height: $toolbar-input-height; 
//        color: lighten($toolbar-input-color, 43%); 
//        background: transparent; 
//        min-height: 0; 
//        -webkit-appearance: none; 
//        padding: 0em .3em; 
//        margin: 0; 
// 
//        &:focus { 
//            color: $toolbar-input-color; 
//        } 
//    } 
// 
//    .x-field-select, 
//    .x-field-search { 
//        .x-component-outer { 
//            @if $include-border-radius { 
//                @include border-radius($toolbar-input-height/2); 
//            } 
//        } 
//    } 
// 
//    .x-field-search { 
//        .x-field-input { 
//            background-position: .5em 50%; 
//        } 
//    } 
// 
//    .x-field-select { 
//        -webkit-box-shadow: none; 
// 
//        .x-form-field { 
//            height: 1.4em; 
//        } 
//    } 
// 
//    .x-field-select { 
//        background: transparent; 
// 
//        .x-component-outer { 
//            &:after { 
//                right: .4em; 
//            } 
//        } 
// 
//        &.x-item-disabled { 
//            .x-component-outer:after { 
//                opacity: .6; 
//            } 
//        } 
// 
//        // Background is set in _toolbar file 
//        .x-component-outer:before { 
//            width: $toolbar-select-overflow-mask-width; 
//            border-left: none; 
// 
//            @if $include-border-radius { 
//                @include border-right-radius($toolbar-input-height/2); 
//            } 
//            @if $include-highlights { 
//                -webkit-mask: get-image-url('select_mask'); 
//                -webkit-mask-position: right top; 
//                -webkit-mask-repeat: repeat-y; 
//                -webkit-mask-size: $toolbar-select-overflow-mask-width .05em; 
//            } 
//            @else { 
//                width: 0.5em !important; 
//            } 
//        } 
// 
//        .x-input-text { 
//            color: #fff; 
//        } 
//    } 
//} 
// 
//.x-android .x-field-search .x-field-input { 
//    padding-left: .2em !important; 
//    padding-right: 2.2em !important; 
//}