/**
 * Creates a visual theme for a Panel.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {color/list} $border-color
 * Panel border-color
 *
 * @param {number/list} $border-width
 * Panel border-width
 *
 * @param {string/list} $border-style
 * Panel border-style
 *
 * @param {color} $body-background-color
 * Panel body background-color
 *
 * @param {color} $body-color
 * Panel body text color
 *
 * @param {color} $body-border-color
 * Panel body border-color
 *
 * @param {number/list} $body-border-width
 * Panel body border-width
 *
 * @param {number/list} $body-border-style
 * Panel body border-style
 *
 * @param {string/number} $body-font-weight
 * Panel body font-weight
 *
 * @param {number} $body-font-size
 * Panel body font-size
 *
 * @param {number} $body-font-size-big
 * Panel body font-size in the {@link Ext.Component#$enable-big big} sizing scheme
 *
 * @param {number} $body-line-height
 * Panel body line-height
 *
 * @param {number} $body-line-height-big
 * Panel body line-height in the {@link Ext.Component#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * Panel body font-family
 *
 * @param {string} $manage-borders
 * `true` to include {@link #manageBorders border management} rules
 *
 * @member Ext.Panel
 */
@mixin panel-ui(
    $ui: null,
    $border-color: null,
    $border-width: null,
    $border-style: null,
    $body-background-color: null,
    $body-color: null,
    $body-border-color: null,
    $body-border-width: null,
    $body-border-style: null,
    $body-font-weight: null,
    $body-font-size: null,
    $body-font-size-big: null,
    $body-line-height: null,
    $body-line-height-big: null,
    $body-font-family: null,
    $manage-borders: $panel-manage-borders 
) {
    $ui-suffix: ui-suffix($ui);
 
    .x-panel#{$ui-suffix} {
        @if not $manage-borders {
            @include border($border-width, $border-style, $border-color) 
        }
    }
 
    .x-panel-inner#{$ui-suffix} {
        background-color: $body-background-color;
        color: $body-color;
        @include border($body-border-width, $body-border-style, $body-border-color);
        @include font($body-font-weight, $body-font-size, $body-line-height, $body-font-family);
 
        @if $enable-big {
            .x-big & {
                @if $body-font-size-big != $body-font-size {
                    font-size: $body-font-size-big;
                }
                @if $body-line-height-big != $body-line-height {
                    line-height: $body-line-height-big;
                }
            }
        }
    }
 
    @if $manage-borders {
        @include border-management( 
            $parent-cls: panel#{$ui-suffix}, 
            $border-width: 1px, 
            $border-color: $base-color 
        );
    }
}
 
@include panel-ui( 
    $border-color: $panel-border-color, 
    $border-width: $panel-border-width, 
    $border-style: $panel-border-style, 
    $body-background-color: $panel-body-background-color, 
    $body-color: $panel-body-color, 
    $body-border-color: $panel-body-border-color, 
    $body-border-width: $panel-body-border-width, 
    $body-border-style: $panel-body-border-style, 
    $body-font-weight: $panel-body-font-weight, 
    $body-font-size: $panel-body-font-size, 
    $body-font-size-big: $panel-body-font-size-big, 
    $body-line-height: $panel-body-line-height, 
    $body-line-height-big: $panel-body-line-height-big, 
    $body-font-family: $panel-body-font-family 
);
 
 
 
// TODO: UI for floating/anchor styles 
// Private variables 
//$anchor-height: .7em; 
//$anchor-width: $anchor-height*2.33; 
//.x-webkit .x-anchor { 
//    position: absolute; 
//    overflow: hidden; 
// 
//    &.x-anchor-top { 
//        margin-top: -$anchor-height + 0.02em; 
//        margin-left: -$anchor-width / 2; 
//        width: $anchor-width; 
//        height: $anchor-height; 
//        -webkit-mask: 0 0 get-image-url('tip_top') no-repeat; 
//        -webkit-mask-size: $anchor-width $anchor-height; 
//        background-color: darken($base-color, 40%); 
//    } 
// 
//    &.x-anchor-bottom { 
//        margin-left: -$anchor-width / 2; 
//        width: $anchor-width; 
//        height: $anchor-height; 
//        -webkit-mask: 0 0 get-image-url('tip_bottom') no-repeat; 
//        -webkit-mask-size: $anchor-width $anchor-height; 
//        background-color: darken($base-color, 40%); 
//    } 
// 
//    &.x-anchor-left { 
//        margin-left: -$anchor-width / 2 + 0.15em; 
//        margin-top: -$anchor-height / 2; 
//        height: $anchor-width; 
//        width: $anchor-height; 
//        -webkit-mask: 0 0 get-image-url('tip_left') no-repeat; 
//        -webkit-mask-size: $anchor-height $anchor-width; 
//        background-color: darken($base-color, 40%); 
//    } 
// 
//    &.x-anchor-right { 
//        margin-top: -$anchor-height / 2; 
//        height: $anchor-width; 
//        width: $anchor-height; 
//        -webkit-mask: 0 0 get-image-url('tip_right') no-repeat; 
//        -webkit-mask-size: $anchor-height $anchor-width; 
//        background-color: darken($base-color, 40%); 
//    } 
//}