    /**
     * Create the base structure of an Ext.Panel
     * @member Ext.panel.Panel
     */
    @mixin extjs-panel {
        .#{$prefix}panel,
        .#{$prefix}plain {
            overflow: hidden;
            position: relative;
        }

         @if $include-ie {
            // Workaround for disappearing right edge in IE6
            .#{$prefix}ie {
                .#{$prefix}panel-header,
                .#{$prefix}panel-header-tl,
                .#{$prefix}panel-header-tc,
                .#{$prefix}panel-header-tr,
                .#{$prefix}panel-header-ml,
                .#{$prefix}panel-header-mc,
                .#{$prefix}panel-header-mr,
                .#{$prefix}panel-header-bl,
                .#{$prefix}panel-header-bc,
                .#{$prefix}panel-header-br {
                    zoom: 1;
                }
            }
            // Fix for IE8 clipping. EXTJSIV-1553
            .#{$prefix}ie8 {
                td.#{$prefix}frame-mc {
                    vertical-align: top;
                }
            }
        }

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

        .#{$prefix}panel-header-icon,
        .#{$prefix}window-header-icon {
            width: $panel-header-icon-width;
            height: $panel-header-icon-height;
            background-repeat:no-repeat;
            background-position:0 0;
            vertical-align:middle;
            margin: $panel-header-icon-margin;
        }

        @if $include-rtl {
            .#{$prefix}rtl {
                &.#{$prefix}panel-header-icon,
                &.#{$prefix}window-header-icon {
                    margin: rtl($panel-header-icon-margin);
                }
            }
        }

        .#{$prefix}vertical {
            .#{$prefix}panel-header-icon,
            .#{$prefix}window-header-icon {
                margin: rotate90($panel-header-icon-margin);
            }

            @if $include-rtl {
                .#{$prefix}rtl {
                    &.#{$prefix}panel-header-icon,
                    &.#{$prefix}window-header-icon {
                        margin: rtl(rotate90($panel-header-icon-margin));
                    }
                }
            }
        }

        .#{$prefix}panel-header-draggable,
        .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
        .#{$prefix}window-header-draggable,
        .#{$prefix}window-header-draggable .#{$prefix}window-header-text{
            cursor: move;
        }

        // A ghost is just a Panel. The only extra it needs is opacity.
        // TODO: Make opacity a variable
        .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
            @include opacity(0.65);
            cursor: move;
        }

        .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
            .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
                width: 100%;
            }
        }

        .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
            .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
                height: 100%;
            }
        }

        .#{$prefix}panel-header-horizontal,
        .#{$prefix}window-header-horizontal {
            .#{$prefix}tool {
                margin: $panel-tool-margin;
                padding: $panel-tool-padding;
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tool {
                    padding: rtl($panel-tool-padding);
                    margin: rtl($panel-tool-margin);
                }
            }
        }

        .#{$prefix}panel-header-vertical,
        .#{$prefix}window-header-vertical {
            .#{$prefix}tool {
                margin: rotate90($panel-tool-margin);
                padding: rotate90($panel-tool-padding);
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tool {
                    margin: rtl(rotate90($panel-tool-margin));
                    padding: rtl(rotate90($panel-tool-padding));
                }
            }
        }

        .#{$prefix}panel-header-vertical,
        .#{$prefix}window-header-vertical {
            // this assumes that there will only ever be one tool that shows at the top of a vertical header (the collapse tool)
            // we should revisit this if it is decided that we want to support multiple tools at the top
            .#{$prefix}tool-top {
                margin: $panel-tool-top-margin;
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tool-top {
                    margin: rtl($panel-tool-top-margin);
                }
            }
        }

        .#{$prefix}panel-header-text-container,
        .#{$prefix}window-header-text-container {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            padding: $panel-header-text-padding;
        }

        @if $include-rtl {
            .#{$prefix}rtl {
                &.#{$prefix}panel-header-text-container,
                &.#{$prefix}window-header-text-container {
                    -o-text-overflow: clip;
                    text-overflow: clip;
                }
            }
        }

        .#{$prefix}panel-header-vertical .#{$prefix}panel-header-text-container,
        .#{$prefix}window-header-vertical .#{$prefix}window-header-text-container {
            -webkit-transform: rotate(90deg);
            -webkit-transform-origin: 0 0;
            -moz-transform: rotate(90deg);
            -moz-transform-origin: 0 0;
            -o-transform: rotate(90deg);
            -o-transform-origin: 0 0;
            transform: rotate(90deg);
            transform-origin: 0 0;
        }

        @if $include-rtl {
            .#{$prefix}panel-header-vertical .#{$prefix}rtl.#{$prefix}panel-header-text-container,
            .#{$prefix}window-header-vertical .#{$prefix}rtl.#{$prefix}window-header-text-container {
                -webkit-transform: rotate(270deg);
                -webkit-transform-origin: 100% 0;
                -moz-transform: rotate(270deg);
                -moz-transform-origin: 100% 0;
                -o-transform: rotate(270deg);
                -o-transform-origin: 100% 0;
                transform: rotate(270deg);
                transform-origin: 100% 0;
            }
        }

        // In IE9 and below we have to use a BasicImage filter to achieve 90 or 270 degree
        // rotation of the text container. Text rotated using this methodology does
        // not display using ClearType font unless the element has a background. To
        // work around this, we apply a background color to the text container element
        // and then use a Chroma filter to display all pixels of that color as transparent.
        .#{$prefix}ie9m {
            .#{$prefix}panel-header-vertical .#{$prefix}panel-header-text-container {
                background: $panel-header-background-color;
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1),
                        progid:DXImageTransform.Microsoft.Chroma(color='#{$panel-header-background-color}');
            }
            .#{$prefix}window-header-vertical .#{$prefix}window-header-text-container {
                background: $window-background-color;
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1),
                        progid:DXImageTransform.Microsoft.Chroma(color='#{$window-background-color}');
            }

            @if $include-rtl {
                .#{$prefix}panel-header-vertical .#{$prefix}rtl.#{$prefix}panel-header-text-container {
                    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3),
                            progid:DXImageTransform.Microsoft.Chroma(color='#{$panel-header-background-color}');
                }
                .#{$prefix}window-header-vertical .#{$prefix}rtl.#{$prefix}window-header-text-container {
                    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3),
                            progid:DXImageTransform.Microsoft.Chroma(color='#{$window-background-color}');
                }
            }
        }

        .#{$prefix}panel-header-text,
        .#{$prefix}window-header-text {
            white-space: nowrap;
        }

        .#{$prefix}panel-header-left,
        .#{$prefix}panel-header-right {
            .#{$prefix}vml-base {
                left: -3px !important;
            }
        }

        //panel body
        .#{$prefix}panel-body {
            overflow: hidden;
            position: relative;

            font-size: $panel-body-font-size;
        }

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

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

        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg .#{$prefix}panel-header-vertical {
                .#{$prefix}frame-mc {
                    background-repeat: repeat-y;
                }
            }
        }

        @if $include-panel-uis == true {
            @include extjs-panel-ui(
                'default',

                $ui-base-color: $panel-base-color,
                $ui-border-width: $panel-border-width,
                $ui-border-color: $panel-border-color,
                $ui-border-radius: $panel-border-radius,

                $ui-header-color: $panel-header-color,
                $ui-header-font-size: $panel-header-font-size,
                $ui-header-font-weight: $panel-header-font-weight,
                $ui-header-border-color: $panel-header-border-color,
                $ui-header-background-color: $panel-header-background-color,
                $ui-header-background-gradient: $panel-header-background-gradient,

                $ui-body-color: $panel-body-color,
                $ui-body-border-color: $panel-body-border-color,
                $ui-body-border-width: 1px,
                $ui-body-background-color: $panel-body-background-color
            );

            @include extjs-panel-ui(
                'default-framed',

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

                $ui-header-color: $panel-header-color,
                $ui-header-font-size: $panel-header-font-size,
                $ui-header-font-weight: $panel-header-font-weight,
                $ui-header-border-color: $panel-frame-border-color,
                $ui-header-background-color: $panel-header-background-color,
                $ui-header-background-gradient: $panel-header-background-gradient,

                $ui-body-color: $panel-body-color,
                $ui-body-border-color: $panel-body-border-color,
                $ui-body-border-width: 0,
                $ui-body-background-color: $panel-frame-background-color,
                $ui-image-label-with-border-radius: 'default'
            );
        }

        .#{$prefix}panel-header-plain,
        .#{$prefix}panel-body-plain {
            border: 0;
            padding: 0;
        }
    }

    /**
     * Creates a visual theme for an Ext.Panel
     * @member Ext.panel.Panel
     */
    @mixin extjs-panel-ui(
        $ui-label,

        $ui-base-color: null,

        $ui-border-color: null,
        $ui-border-radius: null,
        $ui-border-width: 0,

        $ui-header-color: null,
        $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: $ui-border-color,
        $ui-header-background-color: null,
        $ui-header-background-gradient: matte,
        $ui-header-inner-border-color: null,

        $ui-body-color: null,
        $ui-body-border-color: null,
        $ui-body-border-width: null,
        $ui-body-border-style: solid,
        $ui-body-background-color: null,
        $ui-body-font-size: null,
        $ui-body-font-weight: null,
        // optional image label to use when background header images are required (no linear-gradient),
        // but border-radius is supported (no framing els) e.g. IE9.
        $ui-image-label-with-border-radius: null
    ){
        @if $ui-base-color != null {
            @if $ui-border-color == null { $ui-border-color: $ui-base-color; }

            @if $ui-header-color == null { $ui-header-color: #fff; }
            @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
        }

        @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
            $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
        }

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

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

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

            @if $supports-gradients or $compile-all {
                @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); }

                @if $panel-header-inner-border and $ui-header-inner-border-color != null {
                    @include inner-border(
                        $width: $panel-header-inner-border-width,
                        $color: $ui-header-inner-border-color
                    );
                }
            }
        }

        @if $ui-base-color != null {
            @if $supports-gradients or $compile-all {
                .#{$prefix}panel-header-#{$ui-label}-left,
                .#{$prefix}panel-header-#{$ui-label}-right {
                    @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
                }
                @if $include-rtl {
                    .#{$prefix}rtl {
                        &.#{$prefix}panel-header-#{$ui-label}-left,
                        &.#{$prefix}panel-header-#{$ui-label}-right {
                            @include background-gradient($ui-header-background-color, $ui-header-background-gradient, left);
                        }
                    }
                }
            }
        }

        // header background images
        @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-label}-top {
                        background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
                    }

                    .#{$prefix}panel-header-#{$ui-label}-bottom {
                        background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
                    }

                    .#{$prefix}panel-header-#{$ui-label}-left {
                        background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
                    }

                    .#{$prefix}panel-header-#{$ui-label}-right {
                        background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
                    }

                    .#{$prefix}panel-header-#{$ui-label}-right {
                        background-position: top right;
                    }

                    .#{$prefix}panel-header-#{$ui-label}-bottom {
                        background-position: bottom left;
                    }

                    @if $include-rtl {
                        .#{$prefix}rtl {
                            &.#{$prefix}panel-header-#{$ui-label}-left {
                                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg-rtl.gif');
                            }
                            &.#{$prefix}panel-header-#{$ui-label}-right {
                                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg-rtl.gif');
                            }
                        }
                    }
                }

                @if $ui-border-radius != null {
                    .#{$prefix}nbr {
                        // If framing elements are used to achieve rounded corners remove the background image from the header element since the framing elements
                        // already have the background image, and a background image on the main header element bleeds through the corner framing elements.
                        .#{$prefix}panel-header-#{$ui-label} {
                            background-image: none !important;
                        }
                    }
                }

                @if $ui-image-label-with-border-radius != null {
                    // IE9 strict, Opera < 11.10, and Safari 3 are the only currently supported browsers that support border-radius, but do not support linear-gradient.
                    .#{$prefix}strict .#{$prefix}ie9,
                    .#{$prefix}nlg.#{$prefix}opera,
                    .#{$prefix}nlg.#{$prefix}safari {
                        .#{$prefix}panel-header-#{$ui-label}-top {
                            background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-top-bg.gif');
                        }

                        .#{$prefix}panel-header-#{$ui-label}-bottom {
                            background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-bottom-bg.gif');
                        }

                        .#{$prefix}panel-header-#{$ui-label}-left {
                            background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-left-bg.gif');
                        }

                        .#{$prefix}panel-header-#{$ui-label}-right {
                            background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-right-bg.gif');
                        }
                    }
                }
            }
        }

        // header text
        .#{$prefix}panel-header-text-#{$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; }
        }

        // 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; }
            }
        }

        .#{$prefix}panel-collapsed {
            .#{$prefix}window-header-#{$ui-label},
            .#{$prefix}panel-header-#{$ui-label} {
                @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
            }
        }

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

        @if $ui-border-radius != null {
            @include x-frame(
                'panel',
                $ui: '#{$ui-label}',

                /* Radius, width, padding and background-color */
                $border-radius   : $ui-border-radius,
                $border-width    : $ui-border-width,
                $padding         : $panel-frame-padding,
                $background-color: $ui-body-background-color
            );

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

            .#{$prefix}panel-header-#{$ui-label}-top {
                @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
            }

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

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

            .#{$prefix}panel-header-#{$ui-label}-left {
                @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
            }
        } @else {
            .#{$prefix}panel-collapsed {
                .#{$prefix}panel-header-#{$ui-label}-top {
                    @include border-bottom-radius($ui-border-radius);
                }

                .#{$prefix}panel-header-#{$ui-label}-right {
                    @include border-left-radius($ui-border-radius);
                }

                .#{$prefix}panel-header-#{$ui-label}-bottom {
                    @include border-top-radius($ui-border-radius);
                }

                .#{$prefix}panel-header-#{$ui-label}-left {
                    @include border-right-radius($ui-border-radius);
                }
            }

            .#{$prefix}panel-header-#{$ui-label}-top {
                @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
            }

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

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

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

        @if $ui-border-radius != null {
            .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
                border-bottom-width: 1px !important;
            }

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

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

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

            .#{$prefix}panel-header-#{$ui-label}-collapsed {
                @include border-radius($ui-border-radius);
            }

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

        //background positioning of images
        .#{$prefix}panel-header-#{$ui-label}-right-tc,
        .#{$prefix}panel-header-#{$ui-label}-right-mc,
        .#{$prefix}panel-header-#{$ui-label}-right-bc {
            background-position: right 0;
        }

        .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
        .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
        .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
            background-position: 0 bottom;
        }
    }