    /**
     * Creates the base structure of Ext.form.Panel.
     * @member Ext.form.Panel
     */
    @mixin extjs-form {
        /*misc*/
        .#{$prefix}webkit {
            * {
                &:focus {
                    outline:none !important;
                }
            }
        }

        // form items
        .#{$prefix}form-item {
            vertical-align: top;
            table-layout: fixed;
        }

        // form items within auto, anchor, vbox checkboxgroup, and table layouts have bottom margin of 5px
        .#{$prefix}autocontainer-form-item,
        .#{$prefix}anchor-form-item,
        .#{$prefix}vbox-form-item,
        .#{$prefix}checkboxgroup-form-item,
        .#{$prefix}table-form-item {
            margin-bottom: 5px;
        }

        // form items within form layout have 5px margin around them
        .#{$prefix}form-layout-table {
            border-collapse: separate;
            border-spacing: 0 2px;
        }

        // Allow for positioned child elements, e.g. custom icons
        .#{$prefix}form-item-body {
            position: relative;
        }

        .#{$prefix}form-form-item {
            td {
                border-top: 1px solid transparent;
            }
        }

        // IE6 cannot do border-spacing 0 2px;
        // IE6 cannot do border-color: transparent
        // So we revert pack to a pad row for IE6
        .#{$prefix}ie6 {
            .#{$prefix}form-layout-table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            .#{$prefix}form-form-item {
                td {
                    border-top-width: 0;
                }
            }

            // Padding row for IE6 when Labelable Fields are in a form layout
            td.#{$prefix}form-item-pad {
                height: 5px;
            }
        }

        // No padding when inside an Editor
        .#{$prefix}editor .#{$prefix}form-item-body {
            padding-bottom: 0;
        }

        .#{$prefix}form-item-label {
            display: block;
            padding: 3px 0 0;
            font-size: $form-label-font-size;
        }

        .#{$prefix}form-item-label-top {
            display: block;
            zoom: 1;
            padding: 0 0 5px 0;
        }

        .#{$prefix}form-item-label-right {
            text-align: right;
        }

        .#{$prefix}form-invalid-under {
            padding: 2px 2px 2px $form-error-icon-width;

            color: $form-error-msg-color;
            font: $form-error-msg-font;
            line-height: $form-error-msg-line-height;

            background: no-repeat 0 2px;
            background-image: theme-background-image($theme-name, $form-exclamation-icon);
        }

        .#{$prefix}form-invalid-icon {
            width: $form-error-icon-width;
            height: 14px;
            background: no-repeat center center;
            background-image: theme-background-image($theme-name, $form-exclamation-icon);
            overflow: hidden;
            ul {
                display: block;
                width: $form-error-icon-width;
                li {
                    /* prevent inner elements from interfering with QuickTip hovering */
                    display: none;
                }
            }
        }

        // When the label is on top, the right icon cell is taller, so the icon image needs bumping down
        .#{$prefix}lbl-top-err-icon {
            margin-bottom: 4px;
        }
    }