/**
 * Creates a visual theme for a Panel
 *
 * @param {boolean} $ui-include-border-management-rules
 * True to include neptune style border management rules.
 *
 * @param {color} $ui-wrap-border-color
 * The color to apply to the border that wraps the body and docked items in a framed
 * panel. The presence of the wrap border in a framed panel is controlled by the
 * {@link Ext.panel.Panel#border border} config. Only applicable when
 * $ui-include-border-management-rules is true.
 *
 * @param {color} $ui-wrap-border-width
 * The width to apply to the border that wraps the body and docked items in a framed
 * panel. The presence of the wrap border in a framed panel is controlled by the
 * {@link Ext.panel.Panel#border border} config. Only applicable when
 * $ui-include-border-management-rules is true.
 *
 * @member Ext.panel.Panel
 */
@mixin extjs-panel-ui(
    $ui-label,

    $ui-border-color: $panel-border-color,
    $ui-border-radius: $panel-border-radius,
    $ui-border-width: $panel-border-width,
    $ui-padding: 0,

    $ui-header-color: $panel-header-color,
    $ui-header-font-family: $panel-header-font-family,
    $ui-header-font-size: $panel-header-font-size,
    $ui-header-font-weight: $panel-header-font-weight,
    $ui-header-line-height: $panel-header-line-height,
    $ui-header-border-color: $panel-header-border-color,
    $ui-header-border-width: $panel-header-border-width,
    $ui-header-border-style: $panel-header-border-style,
    $ui-header-background-color: $panel-header-background-color,
    $ui-header-background-gradient: $panel-header-background-gradient,
    $ui-header-inner-border-color: $panel-header-inner-border-color,
    $ui-header-inner-border-width: $panel-header-inner-border-width,
    $ui-header-text-padding: $panel-header-text-padding,
    $ui-header-text-transform: $panel-header-text-transform,
    $ui-header-padding: $panel-header-padding,
    $ui-header-icon-width: $panel-header-icon-width,
    $ui-header-icon-height: $panel-header-icon-height,
    $ui-header-icon-spacing: $panel-header-icon-spacing,
    $ui-header-icon-background-position: $panel-header-icon-background-position,
    $ui-header-glyph-color: $panel-header-glyph-color,
    $ui-header-glyph-opacity: $panel-header-glyph-opacity,

    $ui-tool-spacing: $panel-tool-spacing,
    $ui-tool-background-image: $panel-tool-background-image,

    $ui-body-color: $panel-body-color,
    $ui-body-border-color: $panel-body-border-color,
    $ui-body-border-width: $panel-body-border-width,
    $ui-body-border-style: $panel-body-border-style,
    $ui-body-background-color: $panel-body-background-color,
    $ui-body-font-size: $panel-body-font-size,
    $ui-body-font-weight: $panel-body-font-weight,

    $ui-background-stretch-top: $panel-background-stretch-top,
    $ui-background-stretch-bottom: $panel-background-stretch-bottom,
    $ui-background-stretch-right: $panel-background-stretch-right,
    $ui-background-stretch-left: $panel-background-stretch-left,

    // See the docs above
    $ui-include-border-management-rules: $panel-include-border-management-rules,
    $ui-wrap-border-color: $panel-wrap-border-color,
    $ui-wrap-border-width: $panel-wrap-border-width
){
    @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
        $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
    }

    $ui-header-padding-noborder:
        top($ui-header-padding) + top($ui-header-border-width)
        right($ui-header-padding) + right($ui-header-border-width)
        // don't add bottom border since bottom border always gets removed by dock layout
        bottom($ui-header-padding)
        left($ui-header-padding) + left($ui-header-border-width);

    .#{$prefix}panel-#{$ui-label} {
        @if $ui-border-color != null { border-color: $ui-border-color; }
        padding: $ui-padding;
    }

    // header
    .#{$prefix}panel-header-#{$ui-label} {
        @if $ui-header-font-size != null { font-size: $ui-header-font-size; }

        @if $ui-header-border-width != 0 {
            border: $ui-header-border-width $ui-header-border-style $ui-header-border-color;
        }

        .#{$prefix}tool-img {
            @if $ui-tool-background-image != $tool-background-image {
                background-image: theme-background-image($ui-tool-background-image);
            }
            @if $ui-header-background-gradient == null {
                // EXTJSIV-8846: partially transparent png images do not display correctly
                // in winXP/IE8m when the image element has a transparent background.
                // to fix this, we give the element the same background-color as the header.
                background-color: $ui-header-background-color;
            }
        }
    }

    .#{$prefix}panel-header-#{$ui-label}-horizontal {
        padding: $ui-header-padding;
    }

    .#{$prefix}panel-header-#{$ui-label}-horizontal-noborder {
        padding: $ui-header-padding-noborder;
    }

    .#{$prefix}panel-header-#{$ui-label}-vertical {
        padding: rotate90($ui-header-padding);
    }

    .#{$prefix}panel-header-#{$ui-label}-vertical-noborder {
        padding: rotate90($ui-header-padding-noborder);
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical {
            padding: rotate270($ui-header-padding);
        }

        .#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical-noborder {
            padding: rotate270($ui-header-padding-noborder);
        }
    }


    // header text
    .#{$prefix}panel-header-text-container-#{$ui-label} {
        @if $ui-header-color != null { color: $ui-header-color; }

        @if $ui-header-font-size != null {   font-size: $ui-header-font-size; }
        @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
        @if $ui-header-font-family != null { font-family: $ui-header-font-family; }
        @if $ui-header-line-height != null { line-height: $ui-header-line-height; }
        padding: $ui-header-text-padding;
        text-transform: $ui-header-text-transform;
    }

    // body
    .#{$prefix}panel-body-#{$ui-label} {
        @if $ui-body-background-color != null { background: $ui-body-background-color; }
        @if $ui-body-border-color != null {     border-color: $ui-body-border-color; }
        @if $ui-body-color != null {            color: $ui-body-color; }
        @if $ui-body-font-size != null {        font-size: $ui-body-font-size; }
        @if $ui-body-font-weight != null {      font-size: $ui-body-font-weight; }

        @if $ui-body-border-width != null {
            border-width: $ui-body-border-width;
            @if $ui-body-border-style != null { border-style: $ui-body-border-style; }
        }
    }

    @if $ui-border-radius != null {
        @include x-frame(
            $cls: 'panel',
            $ui: '#{$ui-label}',
            $border-radius   : $ui-border-radius,
            $border-width    : $ui-border-width,
            $padding         : $ui-padding,
            $background-color: $ui-body-background-color
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-top',
            $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
            $border-width: top($ui-header-border-width) right($ui-header-border-width) 0 left($ui-header-border-width),
            $padding: $ui-header-padding,
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-stretch: $ui-background-stretch-top
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-right',
            $border-radius: 0 right($ui-border-radius) bottom($ui-border-radius) 0,
            $border-width: top($ui-header-border-width) right($ui-header-border-width) bottom($ui-header-border-width) 0,
            $padding: rotate90($ui-header-padding),
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-direction: right,
            $include-frame-rtl: $include-rtl,
            $background-stretch: $ui-background-stretch-right
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-bottom',
            $border-radius: 0 0 bottom($ui-border-radius) left($ui-border-radius),
            $border-width: 0 right($ui-header-border-width) bottom($ui-header-border-width) left($ui-header-border-width),
            $padding: $ui-header-padding,
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-stretch: $ui-background-stretch-bottom
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-left',
            $border-radius: top($ui-border-radius) 0 0 left($ui-border-radius),
            $border-width: top($ui-header-border-width) 0 bottom($ui-header-border-width) left($ui-header-border-width),
            $padding: rotate90($ui-header-padding),
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-direction: right,
            $include-frame-rtl: $include-rtl,
            $background-stretch: $ui-background-stretch-left
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-collapsed-top',
            $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),
            $border-width: $ui-header-border-width,
            $padding: $ui-header-padding,
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-stretch: $ui-background-stretch-top
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-collapsed-right',
            $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),
            $border-width: $ui-header-border-width,
            $padding: rotate90($ui-header-padding),
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-direction: right,
            $include-frame-rtl: $include-rtl,
            $background-stretch: $ui-background-stretch-right
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-collapsed-bottom',
            $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),
            $border-width: $ui-header-border-width,
            $padding: $ui-header-padding,
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-stretch: $ui-background-stretch-bottom
        );

        @include x-frame(
            $cls: 'panel-header',
            $ui: '#{$ui-label}-collapsed-left',
            $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),
            $border-width: $ui-header-border-width,
            $padding: rotate90($ui-header-padding),
            $background-color: $ui-header-background-color,
            $background-gradient: $ui-header-background-gradient,
            $background-direction: right,
            $include-frame-rtl: $include-rtl,
            $background-stretch: $ui-background-stretch-left
        );

        // !important is needed in the following rules to override dock layout's border
        // management rules. the x-panel ancestor selector is used to increase the
        // specificity over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by
        // x-frame
        .#{$prefix}panel {
            .#{$prefix}panel-header-#{$ui-label}-top {
                border-bottom-width: bottom($ui-header-border-width) !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-right {
                border-left-width: bottom($ui-header-border-width) !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-bottom {
                border-top-width: bottom($ui-header-border-width) !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-left {
                border-right-width: bottom($ui-header-border-width) !important;
            }
        }

        .#{$prefix}nbr {
            .#{$prefix}panel-header-#{$ui-label}-collapsed-top {
                border-bottom-width: 0 !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-right {
                border-left-width: 0 !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-bottom {
                border-top-width: 0 !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-left {
                border-right-width: 0 !important;
            }
        }
    } @else {
        @if $ui-header-background-color != null and ($supports-gradients or $compile-all) {
            .#{$prefix}panel-header-#{$ui-label} {
                @include background-gradient($ui-header-background-color, $ui-header-background-gradient);
            }

            .#{$prefix}panel-header-#{$ui-label}-vertical {
                @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical {
                    @include background-gradient($ui-header-background-color, $ui-header-background-gradient, left);
                }
            }
        }

        // header background images
        $panel-header-ui: 'panel-header-#{$ui-label}';
        $panel-header-path: 'panel-header/panel-header-#{$ui-label}';

        @if $ui-header-background-color != null and $ui-header-background-gradient != null {
            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg {
                    .#{$prefix}#{$panel-header-ui}-top {
                        background: slicer-background-image($panel-header-ui + '-top',
                                            '#{$panel-header-path}-top-bg');
                    }

                    .#{$prefix}#{$panel-header-ui}-bottom {
                        background: slicer-background-image($panel-header-ui + '-bottom',
                                            '#{$panel-header-path}-bottom-bg');
                    }

                    .#{$prefix}#{$panel-header-ui}-left {
                        background: slicer-background-image($panel-header-ui + '-left',
                                            '#{$panel-header-path}-left-bg') top right;
                    }

                    .#{$prefix}#{$panel-header-ui}-right {
                        background: slicer-background-image($panel-header-ui + '-right',
                                            '#{$panel-header-path}-right-bg') top right;
                    }

                    @if $include-rtl {
                        .#{$prefix}rtl {
                            &.#{$prefix}#{$panel-header-ui}-left {
                                background: slicer-background-image-rtl($panel-header-ui + '-left',
                                            '#{$panel-header-path}-left-bg-rtl');
                            }
                            &.#{$prefix}#{$panel-header-ui}-right {
                                background: slicer-background-image-rtl($panel-header-ui + '-right',
                                            '#{$panel-header-path}-right-bg-rtl');
                            }
                        }
                    }
                }
            }
        }

        .#{$prefix}panel {
            // !important is needed here to override dock layout's border management
            // rules. the x-panel ancestor selector is used to increase the specificity
            // over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by x-frame
            .#{$prefix}panel-header-#{$ui-label}-collapsed-border-top {
                border-bottom-width: $ui-header-border-width !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-border-right {
                border-left-width: $ui-header-border-width !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-border-bottom {
                border-top-width: $ui-header-border-width !important;
            }

            .#{$prefix}panel-header-#{$ui-label}-collapsed-border-left {
                border-right-width: $ui-header-border-width !important;
            }
        }

        $stretch: slicer-background-stretch($panel-header-ui + '-left', right);
        $stretch: slicer-background-stretch($panel-header-ui + '-bottom', top);

        @include x-slicer($panel-header-ui + '-top');
        @include x-slicer($panel-header-ui + '-bottom');
        @include x-slicer($panel-header-ui + '-left');
        @include x-slicer($panel-header-ui + '-right');
    }

    .#{$prefix}panel-header-#{$ui-label}-vertical .#{$prefix}panel-header-text-container {
        @include rotate-element($angle: 90, $background-color: $ui-header-background-color);
    }

    @if $include-rtl {
        .#{$prefix}panel-header-#{$ui-label}-vertical .#{$prefix}rtl.#{$prefix}panel-header-text-container {
            @include rotate-element($angle: 270, $background-color: $ui-header-background-color);
        }
    }

    @if $ui-header-inner-border-width != 0 {
        .#{$prefix}panel-header-#{$ui-label}-top {
            @include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color);
        }

        .#{$prefix}panel-header-#{$ui-label}-right {
            @include inner-border(rotate90($ui-header-inner-border-width), $ui-header-inner-border-color);
        }

        .#{$prefix}panel-header-#{$ui-label}-bottom {
            @include inner-border(rotate180($ui-header-inner-border-width), $ui-header-inner-border-color);
        }

        .#{$prefix}panel-header-#{$ui-label}-left {
            @include inner-border(rotate270($ui-header-inner-border-width), $ui-header-inner-border-color);
        }
    }

    .#{$prefix}panel-header-#{$ui-label} {
        .#{$prefix}panel-header-icon {
            width: $ui-header-icon-width;
            height: $ui-header-icon-height;
            background-position: $ui-header-icon-background-position;
        }
        .#{$prefix}panel-header-glyph {
            color: $ui-header-glyph-color;
            font-size: $ui-header-icon-height;
            line-height: $ui-header-icon-height;

            @if $ui-header-glyph-opacity != 1 {
                // do not use the opacity mixin because we do not want IE's filter version of
                // opacity to be included.  We emulate the opacity setting in IE8m by mixing
                // the icon color into the background color. (see below)
                opacity: $ui-header-glyph-opacity;
            }
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render
            // the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the header's background-color.
            .#{$prefix}ie8m & {
                color: mix($ui-header-glyph-color, $ui-header-background-color, $ui-header-glyph-opacity * 100);
            }
        }
    }

    $ui-header-icon-margin: 0 $panel-header-icon-spacing 0 0;
    .#{$prefix}panel-header-#{$ui-label}-horizontal {
        .#{$prefix}panel-header-icon-before-title {
            margin: $ui-header-icon-margin;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}panel-header-icon-before-title {
                margin: rtl($ui-header-icon-margin);
            }
        }

        .#{$prefix}panel-header-icon-after-title {
            margin: rtl($ui-header-icon-margin);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}panel-header-icon-after-title {
                margin: $ui-header-icon-margin;
            }
        }
    }

    .#{$prefix}panel-header-#{$ui-label}-vertical {
        .#{$prefix}panel-header-icon-before-title {
            margin: rotate90($ui-header-icon-margin);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}panel-header-icon-before-title {
                margin: rotate270(rtl($ui-header-icon-margin));
            }
        }

        .#{$prefix}panel-header-icon-after-title {
            margin: rotate90(rtl($ui-header-icon-margin));
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}panel-header-icon-after-title {
                margin: rotate270($ui-header-icon-margin);
            }
        }
    }

    $ui-tool-margin: 0 0 0 $ui-tool-spacing;
    .#{$prefix}panel-header-#{$ui-label}-horizontal {
        .#{$prefix}tool-after-title {
            margin: $ui-tool-margin;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-after-title {
                margin: rtl($ui-tool-margin);
            }
        }

        .#{$prefix}tool-before-title {
            margin: rtl($ui-tool-margin);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-before-title {
                margin: $ui-tool-margin;
            }
        }
    }

    .#{$prefix}panel-header-#{$ui-label}-vertical {
        .#{$prefix}tool-after-title {
            margin: rotate90($ui-tool-margin);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-after-title {
                margin: rotate270(rtl($ui-tool-margin));
            }
        }

        .#{$prefix}tool-before-title {
            margin: rotate90(rtl($ui-tool-margin));
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-before-title {
                margin: rotate270($ui-tool-margin);
            }
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl {
            &.#{$prefix}panel-header-#{$ui-label}-collapsed-border-right {
                border-right-width: $ui-header-border-width !important;
            }
            &.#{$prefix}panel-header-#{$ui-label}-collapsed-border-left {
                border-left-width: $ui-header-border-width !important;
            }
        }
    }

    // Panel resizing.
    // If there's a border that's wider than the specified threshold (Sencha default is 2) then
    // embed the handles in the borders using -ve position and make resizable windows show overflow.
    // The dock layout should ensure that all constituent elements fit within the element.
    // The only exception is during animated resizing. Overflow inline style is set hidden during animation (AbstractComponent.animate)
    .#{$prefix}panel-#{$ui-label}-resizable {

        // Panel resize handles are invisible
        .#{$prefix}panel-handle {
            @include opacity(0);
        }

        // If there's a border width, embed the handles in that border
        @if $ui-border-width > $border-width-threshold {
            // Resizable Panel element overflow must be visible for embedded handles to accept mouseovers.
            overflow: visible;

            .#{$prefix}panel-handle-north-br {
                top: -($ui-border-width);
            }
            .#{$prefix}panel-handle-south-br {
                bottom: -($ui-border-width);
            }
            .#{$prefix}panel-handle-east-br {
                right: -($ui-border-width);
            }
            .#{$prefix}panel-handle-west-br {
                left: -($ui-border-width);
            }
            .#{$prefix}panel-handle-northwest-br {
                left: -($ui-border-width);
                top: -($ui-border-width);
            }
            .#{$prefix}panel-handle-northeast-br {
                right: -($ui-border-width);
                top: -($ui-border-width);
            }
            .#{$prefix}panel-handle-southeast-br {
                right: -($ui-border-width);
                bottom: -($ui-border-width);
            }
            .#{$prefix}panel-handle-southwest-br {
                left: -($ui-border-width);
                bottom: -($ui-border-width);
            }
        }
    }

    @if $ui-include-border-management-rules {
        @include border-management(
            $parent-cls: panel-#{$ui-label},
            $border-width: $ui-wrap-border-width,
            $border-color: $ui-wrap-border-color
        );
    }
}

.#{$prefix}panel-ghost {
    @include opacity($panel-ghost-opacity);
}

@if $include-panel-uis == true {
    @include extjs-panel-ui(
        $ui-label: 'default'
    );

    @include extjs-panel-ui(
        $ui-label: 'default-framed',

        $ui-border-color: $panel-frame-border-color,
        $ui-border-width: $panel-frame-border-width,
        $ui-border-radius: $panel-frame-border-radius,
        $ui-padding: $panel-frame-padding,

        $ui-header-border-color: $panel-frame-border-color,
        $ui-header-border-width: $panel-frame-header-border-width,
        $ui-header-inner-border-color: $panel-frame-header-inner-border-color,
        $ui-header-inner-border-width: $panel-frame-header-inner-border-width,
        $ui-header-padding: $panel-frame-header-padding,

        $ui-body-border-width: $panel-frame-body-border-width,
        $ui-body-background-color: $panel-frame-background-color
    );
}