    /**
     * @class Global_CSS
     */

    /**
     * @var {string} $prefix
     * The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your
     * JavaScript application.
     */
    $prefix: 'x-' !default;

    /**
     * @var {boolean/string} $relative-image-path-for-uis
     * True to use a relative image path for all new UIs. If true, the path will be "../images/".
     * It can also be a string of the path value.
     * It defaults to false, which means it will look for the images in the ExtJS SDK folder.
     */
    $relative-image-path-for-uis: false !default;

    /**
     * @var {boolean} $include-not-found-images
     * True to include files which are not found when compiling your SASS
     */
    $include-missing-images: true !default;

    /**
     * @var {boolean} $include-ie
     * True to include Internet Explorer specific rules for IE9 and lower.  IE10 and up are
     * considered to be "modern" browsers, and as such do not need any of the CSS hacks required
     * for IE9 and below.  Setting this property to false will result in a significantly smaller
     * CSS file size, and may also result in a slight performance improvement, because the
     * browser will have fewer rules to process.
     */
    $include-ie: true !default;

    /**
     * @var {boolean} $include-content-box
     * True to include rules for browsers that do not support the border-box model
     * (IE6 strict and IE7 strict)
     */
    $include-content-box: $include-ie !default;

    /**
     * @var {boolean} $include-ff
     * True to include Firefox specific rules
     */
    $include-ff: true !default;

    /**
     * @var {boolean} $include-opera
     * True to include Opera specific rules
     */
    $include-opera: true !default;

    /**
     * @var {boolean} $include-webkit
     * True to include Webkit specific rules
     */
    $include-webkit: true !default;

    /**
     * @var {boolean} $include-safari
     * True to include Safari specific rules
     */
    $include-safari: $include-webkit !default;

    /**
     * @var {boolean} $include-chrome
     * True to include Chrome specific rules
     */
    $include-chrome: $include-webkit !default;

    /**
     * @var {boolean} $include-slicer-border-radius
     * True to include rules for rounded corners produced by the slicer.  Enables emulation
     * of CSS3 border-radius in browsers that do not support it.
     */
    $include-slicer-border-radius: $include-ie !default;

    /**
     * @var {boolean} $include-slicer-gradient
     * True to include rules for background gradients produced by the slicer.  Enables emulation
     * of CSS3 background-gradient in browsers that do not support it.
     */
    $include-slicer-gradient: $include-ie !default;

    /**
     * @var {number} $css-shadow-border-radius
     * The border radius for CSS shadows
     */
    $css-shadow-border-radius: 5px !default;

    // documented in rtl/util/Renderable
    $include-rtl: false !default;

    /**
     * @var {string} $image-extension
     * default file extension to use for images (defaults to 'png').
     */
    $image-extension: 'png' !default;

    /**
     * @var {string} $slicer-image-extension
     * default file extension to use for slicer images (defaults to 'gif').
     */
    $slicer-image-extension: 'gif' !default;

    /**
     * Default search path for images
     */
    $image-search-path: '.' !default;

    /**
     * @var {boolean}
     * True to include the default UI for each component.
     */
    $include-default-uis: true !default;

    /**
     * @var {string}
     * The base path relative to the CSS output directory to use for theme resources.  For example
     * if the theme's images live one directory up from the generated CSS output in a directory
     * named 'foo/images/', you would need to set this variable to '../foo/' in order for the image
     * paths in the CSS output to be generated correctly. By default this is the same as the
     * CSS output directory.
     */
    $theme-resource-path: '' !default;