/**
 * Creates the base structure of HtmlEditor field.
 * @member Ext.form.field.HtmlEditor
 */
@mixin extjs-form-htmleditor {
    .#{$prefix}html-editor-wrap {
        border: 1px solid $html-editor-border-color;

        .#{$prefix}toolbar {
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
        }

        textarea {
            background-color: $html-editor-background-color;
        }
    }

    .#{$prefix}html-editor-tb .#{$prefix}btn-text {
        background:transparent no-repeat;
        background-image:theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-bold,
    .#{$prefix}menu-item img.#{$prefix}edit-bold {
        background-position:0 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-italic,
    .#{$prefix}menu-item img.#{$prefix}edit-italic {
        background-position:-16px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-underline,
    .#{$prefix}menu-item img.#{$prefix}edit-underline {
        background-position:-32px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-forecolor,
    .#{$prefix}menu-item img.#{$prefix}edit-forecolor {
        background-position:-160px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-backcolor,
    .#{$prefix}menu-item img.#{$prefix}edit-backcolor {
        background-position:-176px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-justifyleft,
    .#{$prefix}menu-item img.#{$prefix}edit-justifyleft {
        background-position:-112px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-justifycenter,
    .#{$prefix}menu-item img.#{$prefix}edit-justifycenter {
        background-position:-128px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-justifyright,
    .#{$prefix}menu-item img.#{$prefix}edit-justifyright {
        background-position:-144px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-insertorderedlist,
    .#{$prefix}menu-item img.#{$prefix}edit-insertorderedlist {
        background-position:-80px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-insertunorderedlist,
    .#{$prefix}menu-item img.#{$prefix}edit-insertunorderedlist {
        background-position:-96px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-increasefontsize,
    .#{$prefix}menu-item img.#{$prefix}edit-increasefontsize {
        background-position:-48px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-decreasefontsize,
    .#{$prefix}menu-item img.#{$prefix}edit-decreasefontsize {
        background-position:-64px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-sourceedit,
    .#{$prefix}menu-item img.#{$prefix}edit-sourceedit {
        background-position:-192px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tb .#{$prefix}edit-createlink,
    .#{$prefix}menu-item img.#{$prefix}edit-createlink {
        background-position: -208px 0;
        background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
    }

    .#{$prefix}html-editor-tip .#{$prefix}tip-bd .#{$prefix}tip-bd-inner {
        padding: 5px;
        padding-bottom: 1px;
    }

    .#{$prefix}html-editor-tb {
        .#{$prefix}toolbar {
            position: static !important;
        }
        .#{$prefix}font-select {
            font-size: 11px;
        }
    }

    .#{$prefix}html-editor-wrap textarea {
        border: 0;
        padding: 3px 2px;
        overflow: auto;
    }
}