/**
 * @class Global_CSS
 * Global CSS variables and mixins.
 */

/**
 * @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: dynamic('x-');

/**
 * @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-missing-images
 * True to include files which are not found when compiling your SASS
 */
$include-missing-images: dynamic(true);

/**
 * @var {boolean} $enable-missing-image-warnings
 * True to show a warning while including files which are not found when compiling your SASS
 */
$enable-missing-image-warnings: dynamic($include-missing-images);

/**
 * @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: dynamic(true);

/**
 * @var {boolean} $include-ff
 * True to include Firefox specific rules
 */
$include-ff: dynamic(true);

/**
 * @var {boolean} $include-opera
 * True to include Opera specific rules
 */
$include-opera: dynamic(true);

/**
 * @var {boolean} $include-webkit
 * True to include Webkit specific rules
 */
$include-webkit: dynamic(true);

/**
 * @var {boolean} $include-safari
 * True to include Safari specific rules
 */
$include-safari: dynamic($include-webkit);

/**
 * @var {boolean} $include-chrome
 * True to include Chrome specific rules
 */
$include-chrome: dynamic($include-webkit);

/**
 * @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: dynamic($include-ie);

/**
 * @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: dynamic($include-ie);

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

// 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: dynamic('png');

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

/**
 * @var {string} $image-search-path
 * Default search path for images
 */
$image-search-path: '.' !default;

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

/**
 * @var {boolean}
 * True to add font-smoothing styles to all components
 */
$enable-font-smoothing: dynamic(true);

/**
 * @var {string} $theme-resource-path
 * 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: dynamic('');

/**
 * @var {boolean} [$grid-cell-field-src-included=false]
 * @private
 * Flag to ensure GridField rules only get set once
 */
$grid-cell-field-src-included: false;