/**
 * @class Ext.Panel
 */
 
/**
 * @var {color/list}
 * Panel border-color
 */
$panel-border-color: dynamic($base-color);
 
/**
 * @var {number/list}
 * Panel border-width
 */
$panel-border-width: dynamic(1px);
 
/**
 * @var {string/list}
 * Panel border-style
 */
$panel-border-style: dynamic(solid);
 
/**
 * @var {color}
 * Panel body background-color
 */
$panel-body-background-color: dynamic($background-color);
 
/**
 * @var {color}
 * Panel body text color
 */
$panel-body-color: dynamic($color);
 
/**
 * @var {color}
 * Panel body border-color
 */
$panel-body-border-color: dynamic($neutral-medium-dark-color);
 
/**
 * @var {number/list}
 * Panel body border-width
 */
$panel-body-border-width: dynamic(1px);
 
/**
 * @var {number/list}
 * Panel body border-style
 */
$panel-body-border-style: dynamic(solid);
 
/**
 * @var {string/number}
 * Panel body font-weight
 */
$panel-body-font-weight: dynamic($font-weight-normal);
 
/**
 * @var {number}
 * Panel body font-size
 */
$panel-body-font-size: dynamic(1rem);
 
/**
 * @var {number}
 * Panel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-font-size-big: dynamic($panel-body-font-size);
 
/**
 * @var {number}
 * Panel body line-height
 */
$panel-body-line-height: dynamic($line-height);
 
/**
 * @var {number}
 * Panel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-line-height-big: dynamic($panel-body-line-height);
 
/**
 * @var {string}
 * Panel body font-family
 */
$panel-body-font-family: dynamic($font-family);
 
 
/**
 * @var {number/list}
 * Panel body padding
 */
$panel-body-padding: dynamic(null);
 
/**
 * @var {number/list}
 * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-padding-big: dynamic(null);
 
/**
 * @var {color}
 * Panel Header background-color
 */
$panel-header-background-color: dynamic($base-color);
 
/**
 * @var {string/list}
 * Panel Header background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$panel-header-background-gradient: dynamic(null);
 
/**
 * @var {color}
 * Panel Header text color
 */
$panel-header-color: dynamic(#fff);
 
/**
 * @var {color/list}
 * Panel Header border-color
 */
$panel-header-border-color: dynamic($panel-border-color);
 
/**
 * @var {number/list}
 * Panel Header border-width
 */
$panel-header-border-width: dynamic($panel-border-width);
 
/**
 * @var {string/list}
 * Panel Header border-style
 */
$panel-header-border-style: dynamic(solid);
 
/**
 * @var {string/number}
 * Panel Header font-weight
 */
$panel-header-font-weight: dynamic($font-weight-bold);
 
/**
 * @var {number}
 * Panel Header font-size
 */
$panel-header-font-size: dynamic(1rem);
 
/**
 * @var {number}
 * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-font-size-big: dynamic($panel-header-font-size);
 
/**
 * @var {number}
 * Panel Header line-height
 */
$panel-header-line-height: dynamic(1.23em);
 
/**
 * @var {number}
 * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-line-height-big: dynamic(1.6em);
 
/**
 * @var {string}
 * Panel Header font-family
 */
$panel-header-font-family: dynamic($font-family);
 
/**
 * @var {number/list}
 * Panel Header padding
 */
$panel-header-padding: dynamic(.77em);
 
/**
 * @var {number/list}
 * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-padding-big: dynamic(.67em);
 
/**
 * @var {shadow}
 * Panel Header Shadow
 */
$panel-header-shadow: dynamic(null);
 
/**
 * @var {number}
 * Z-Index for the PanelHeader, should be used with shadows to raise header above content
 */
$panel-header-z-index: dynamic(null);
 
/**
 * @var {number}
 * Panel Header icon size.  If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$panel-header-icon-font-size}.
 */
$panel-header-icon-size: dynamic(1em);
 
/**
 * @var {number}
 * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 * If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$panel-header-icon-font-size-big}.
 */
$panel-header-icon-size-big: dynamic(1em);
 
/**
 * @var {number}
 * Panel Header icon font-size.  Used for configuring the size of font icons
 */
$panel-header-icon-font-size: dynamic($panel-header-line-height);
 
/**
 * @var {number}
 * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-font-size-big: dynamic($panel-header-line-height-big);
 
/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 */
$panel-header-icon-horizontal-spacing: dynamic(.46em);
 
/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-horizontal-spacing-big: dynamic($panel-header-icon-horizontal-spacing);
 
/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is vertically aligned
 */
$panel-header-icon-vertical-spacing: dynamic(.2em);
 
/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-vertical-spacing-big: dynamic($panel-header-icon-vertical-spacing);
 
/**
 * @var {number}
 * Panel Header icon opacity
 */
$panel-header-icon-opacity: dynamic(.5);
 
/**
 * @var {string}
 * `true` to include {@link #manageBorders border management} rules
 */
$panel-manage-borders: dynamic(true);
 
/**
 * @var {boolean}
 * `true` to include the "light" panel UI
 */
$panel-light-ui: dynamic($enable-default-uis);
 
/**
 * @var {number}
 * The height (in all orientations) of the anchor arrow
 */
$panel-anchor-height: dynamic(0.7em);
 
/**
 * @var {number}
 * The width (in all orientations) of the anchor arrow.
 */
$panel-anchor-width: dynamic($panel-anchor-height * 2.33);
 
/**
 * 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 Global_CSS#$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 Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * Panel body font-family
 *
 * @param {number/list} $body-padding
 * Panel body padding
 *
 * @param {number/list} $body-padding-big
 * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-background-color
 * Panel Header background-color
 *
 * @param {string/list} $header-background-gradient
 * Panel Header 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} $header-color
 * Panel Header text color
 *
 * @param {color/list} $header-border-color
 * Panel Header border-color
 *
 * @param {number/list} $header-border-width
 * Panel Header border-width
 *
 * @param {string/list} $header-border-style
 * Panel Header border-style
 *
 * @param {string/number} $header-font-weight
 * Panel Header font-weight
 *
 * @param {number} $header-font-size
 * Panel Header font-size
 *
 * @param {number} $header-font-size-big
 * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-line-height
 * Panel Header line-height
 *
 * @param {number} $header-line-height-big
 * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $header-font-family
 * Panel Header font-family
 *
 * @param {number/list} $header-padding
 * Panel Header padding
 *
 * @param {number/list} $header-padding-big
 * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-size
 * Panel Header icon size.  If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$header-icon-font-size}.
 *
 * @param {number} $header-icon-size-big
 * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 * If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$header-icon-font-size-big}.
 *
 * @param {number} $header-icon-font-size
 * Panel Header icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $header-icon-font-size-big
 * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-horizontal-spacing
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 *
 * @param {number} $header-icon-horizontal-spacing-big
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-vertical-spacing
 * The space between the Panel Header icon and text when the icon is vertically aligned
 *
 * @param {number} $header-icon-vertical-spacing-big
 * The space between the Panel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-opacity
 * Panel Header icon opacity
 *
 * @param {color} $tool-color
 * Tool icon color
 *
 * @param {number} $tool-size
 * Tool icon size.  If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$tool-font-size}.
 *
 * @param {number} $tool-size-big
 * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 * If specified in terms of `em` units, the icon will be sized
 * relative to {@link #$tool-font-size-big}.
 *
 * @param {number} $tool-font-size
 * Tool icon font-size
 *
 * @param {number} $tool-font-size-big
 * Tool icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-spacing
 * The space between Panel Tools
 *
 * @param {number} $tool-spacing-big
 * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $tool-cursor
 * The cursor to display when the mouse cursor is over a Tool
 *
 * @param {number} $tool-opacity
 * Tool opacity
 *
 * @param {number} $tool-opacity-over
 * Tool opacity when hovered
 *
 * @param {number} $tool-opacity-pressed
 * Tool opacity when pressed
 *
 * @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,
    $body-padding: null,
    $body-padding-big: null,
 
    $header-background-color: null,
    $header-background-gradient: null,
    $header-color: null,
    $header-border-color: null,
    $header-border-width: null,
    $header-border-style: null,
    $header-font-weight: null,
    $header-font-size: null,
    $header-font-size-big: null,
    $header-line-height: null,
    $header-line-height-big: null,
    $header-font-family: null,
    $header-padding: null,
    $header-padding-big: null,
    $header-shadow: null,
    $header-z-index: null,
    $header-icon-size: null,
    $header-icon-size-big: null,
    $header-icon-font-size: null,
    $header-icon-font-size-big: null,
    $header-icon-horizontal-spacing: null,
    $header-icon-horizontal-spacing-big: null,
    $header-icon-vertical-spacing: null,
    $header-icon-vertical-spacing-big: null,
    $header-icon-opacity: null,
 
    $tool-color: null,
    $tool-size: null,
    $tool-size-big: null,
    $tool-font-size: null,
    $tool-font-size-big: null,
    $tool-spacing: null,
    $tool-spacing-big: null,
    $tool-cursor: null,
    $tool-opacity: null,
    $tool-opacity-over: null,
    $tool-opacity-pressed: null,
 
    $manage-borders: $panel-manage-borders,
 
    $anchor-height: null,
    $anchor-width: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .x-panel#{$ui-suffix} {
        @if not $manage-borders {
            @include border($border-width, $border-style, $border-color) 
        }
 
        // Only emit anchor rules if the anchor has valid dimensions 
        @if not is-null($anchor-height) and not is-null($anchor-width) {
 
            @if is-null($border-width) {
                $border-width: 0;
            }
 
            // The width of adjoining borders to the "arrow" border which is $anchor-height wide. 
            // The opposite border is zero width. 
            $anchor-border-width: $anchor-width / 2;
 
            .#{$prefix}anchor {
                border: $anchor-border-width solid transparent;
            }
 
            .#{$prefix}anchor-top {
                border-top-width: 0;
                border-bottom: $anchor-height solid darken($border-color, 5%);
                @if ($border-width != 0) {
                    top: calc(-#{$anchor-height or $default-calc-value} + #{$border-width or $panel-border-width or $default-calc-value});
                } @else {
                    top: -$anchor-height;
                }
            }
 
            .#{$prefix}anchor-bottom {
                border-bottom-width: 0;
                border-top: $anchor-height solid darken($border-color, 5%);
                @if ($border-width != 0) {
                    bottom: calc(-#{$anchor-height or $default-calc-value} + #{$border-width or $panel-border-width or $default-calc-value});
                } @else {
                    bottom: -$anchor-height;
                }
            }
 
            .#{$prefix}anchor-left {
                border-left-width: 0;
                border-right: $anchor-height solid darken($border-color, 5%);
                @if ($border-width != 0) {
                    left: calc(-#{$anchor-height or $default-calc-value} + #{$border-width or $panel-border-width or $default-calc-value});
                } @else {
                    left: -$anchor-height;
                }
            }
 
            .#{$prefix}anchor-right {
                border-right-width: 0;
                border-left: $anchor-height solid darken($border-color, 5%);
                @if ($border-width != 0) {
                    right: calc(-#{$anchor-height or $default-calc-value} + #{$border-width or $panel-border-width or $default-calc-value});
                } @else {
                    right: -$anchor-height;
                }
            }
 
            // If background is a different color, create the overlay triangle. 
            @if $body-background-color != $border-color and $border-width != 0 {
                .#{$prefix}anchor:after {
                    border: $anchor-border-width solid transparent;
                }
 
                .#{$prefix}anchor-top:after {
                    border-top-width: 0;
                    border-bottom: $anchor-height solid $body-background-color;
                    left: calc(-#{$anchor-border-width or $default-calc-value} + #{$border-width or $default-calc-value});
                    top: $border-width;
                }
 
                .#{$prefix}anchor-bottom:after {
                    border-bottom-width: 0;
                    border-top: $anchor-height solid $body-background-color;
                    left: calc(-#{$anchor-border-width or $default-calc-value} + #{$border-width or $default-calc-value});
                    bottom: $border-width;
                }
 
                .#{$prefix}anchor-left:after {
                    border-left-width: 0;
                    border-right: $anchor-height solid $body-background-color;
                    top: calc(-#{$anchor-border-width or $default-calc-value} + #{$border-width or $default-calc-value});
                    left: $border-width;
                }
 
                .#{$prefix}anchor-right:after {
                    border-right-width: 0;
                    border-left: $anchor-height solid $body-background-color;
                    top: calc(-#{$anchor-border-width or $default-calc-value} + #{$border-width or $default-calc-value});
                    right: $border-width;
                }
            }
        }
    }
 
    .x-panel-inner#{$ui-suffix} {
        padding: $body-padding;
        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;
                }
 
                padding: $body-padding-big;
            }
        }
    }
 
    .x-panel-header#{$ui-suffix} {
        @include background-gradient($header-background-color, $header-background-gradient);
 
        color: $header-color;
        padding: $header-padding;
        @include font($header-font-weight, $header-font-size, $header-line-height, $header-font-family);
        @include border($header-border-width, $header-border-style, $header-border-color);
        box-shadow: $header-shadow;
        z-index: $header-z-index;
        @if $header-shadow != null {
            position: relative;
        }
 
        @if $enable-big {
            .x-big & {
                padding: $header-padding-big;
                font-size: $header-font-size-big;
                line-height: $header-line-height-big;
            }
        }
 
        .x-tool {
            width: $tool-size;
            height: $tool-size;
            line-height: $tool-size;
            font-size: $tool-font-size;
            opacity: $tool-opacity;
            cursor: $tool-cursor;
            margin-left: $tool-spacing;
 
            color: $tool-color;
 
            &:hover {
                opacity: $tool-opacity-over;
            }
 
            &:active {
                opacity: $tool-opacity-pressed;
            }
 
            @if $enable-big {
                .x-big & {
                    width: $tool-size-big;
                    height: $tool-size-big;
                    line-height: $tool-size-big;
                    font-size: $tool-font-size-big;
                }
            }
        }
    }
 
    .x-panel-title#{$ui-suffix} {
        .x-panel-title-icon {
            width: $header-icon-size;
            height: $header-icon-size;
            line-height: $header-icon-size;
            font-size: $header-icon-font-size;
            opacity: $header-icon-opacity;
 
            @if $enable-big {
                .x-big & {
                    width: $header-icon-size-big;
                    height: $header-icon-size-big;
                    line-height: $header-icon-size-big;
                    font-size: $header-icon-font-size-big;
                }
            }
 
            &.x-panel-title-icon-top {
                margin-bottom: $header-icon-vertical-spacing;
 
                @if $enable-big {
                    .x-big & {
                        margin-bottom: $header-icon-vertical-spacing-big;
                    }
                }
            }
 
            &.x-panel-title-icon-right {
                margin-left: $header-icon-horizontal-spacing;
 
                @if $enable-big {
                    .x-big & {
                        margin-left: $header-icon-horizontal-spacing-big;
                    }
                }
            }
 
            &.x-panel-title-icon-bottom {
                margin-top: $header-icon-vertical-spacing;
 
                @if $enable-big {
                    .x-big & {
                        margin-top: $header-icon-vertical-spacing-big;
                    }
                }
            }
 
            &.x-panel-title-icon-left {
                margin-right: $header-icon-horizontal-spacing;
 
                @if $enable-big {
                    .x-big & {
                        margin-right: $header-icon-horizontal-spacing-big;
                    }
                }
            }
        }
    }
 
    @if $manage-borders {
        @include border-management( 
            $parent-cls: panel#{$ui-suffix}, 
            $border-width: 1px, 
            $border-color: $border-color 
        );
    }
}
 
/**
 * Generates style rules for the "light" panel UI. This mixin is invoked automatically
 * when {@link #$panel-light-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "light" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin panel-light-ui {
    $header-bg: mix($base-light-color, $neutral-light-color, 30%);
    @include panel-ui( 
        $ui: 'light', 
        $header-color: #666, 
        $header-background-color: $header-bg, 
        $border-color: $header-bg, 
        $header-border-color: $header-bg, 
        $body-border-color: $header-bg, 
        $tool-color: #666, 
        $anchor-width: $panel-anchor-width, 
        $anchor-height: $panel-anchor-height 
    );
}