/**
 * @class Ext.form.field.HtmlEditor
 */

/**
 * @var {number}
 * The border-width of the HtmlEditor
 */
$html-editor-border-width: dynamic(1px);

/**
 * @var {color}
 * The border-color of the HtmlEditor
 */
$html-editor-border-color: dynamic($form-field-border-color);

/**
 * @var {color}
 * The background-color of the HtmlEditor
 */
$html-editor-background-color: dynamic($form-field-background-color);

/**
 * @var {number}
 * The size of the HtmlEditor toolbar icons
 */
$html-editor-toolbar-icon-size: dynamic(16px);

/**
 * @var {number}
 * The font-size of the HtmlEditor's font selection control
 */
$html-editor-font-select-font-size: dynamic($form-field-font-size);

/**
 * @var {number}
 * The font-family of the HtmlEditor's font selection control
 */
$html-editor-font-select-font-family: dynamic(inherit);

/**
 * @var {color}
 * The color to use for the HtmlEditor's icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-glyph-color: dynamic($color);

/**
 * @var {number}
 * The font size to use for the HtmlEditor's icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-glyph-font-size: dynamic(16px);

/**
 * @var {string/list}
 * Glyph for the "bold" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-bold-glyph: dynamic($fa-var-bold $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "italic" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-italic-glyph: dynamic($fa-var-italic $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "underline" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-underline-glyph: dynamic($fa-var-underline $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "foreground color" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-forecolor-glyph: dynamic($ext-var-text-color $html-editor-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the "background color" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-backcolor-glyph: dynamic($ext-var-text-background-color $html-editor-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the "align left" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-alignleft-glyph: dynamic($fa-var-align-left $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "align center" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-aligncenter-glyph: dynamic($fa-var-align-center $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "align right" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-alignright-glyph: dynamic($fa-var-align-right $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "numbered list" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-numberedlist-glyph: dynamic($fa-var-list-ol $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "bullet list" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-bulletlist-glyph: dynamic($fa-var-list-ul $html-editor-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "grow text" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-growtext-glyph: dynamic($ext-var-text-increase $html-editor-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the "shrink text" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-shrinktext-glyph: dynamic($ext-var-text-decrease $html-editor-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the "source edit" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-sourceedit-glyph: dynamic($ext-var-edit-html $html-editor-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the "hyperlink" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$html-editor-hyperlink-glyph: dynamic($fa-var-link $html-editor-glyph-font-size $font-icon-font-family);