/**
 * @class Ext.resizer.Splitter
 */

/**
 * @var {number}
 * The size of the Splitter
 */
$splitter-size: dynamic(5px);

/**
 * @var {color}
 * The background-color of the active Splitter (the Splitter currently being dragged)
 */
$splitter-active-background-color: dynamic(#b4b4b4);

/**
 * @var {number}
 * The opacity of the active Splitter (the Splitter currently being dragged)
 */
$splitter-active-opacity: dynamic(.8);

/**
 * @var {number}
 * The opacity of the collapse tool on the active Splitter (the Splitter currently being dragged)
 */
$splitter-active-collapse-tool-opacity: dynamic(.3);

/**
 * @var {color}
 * The color of the outline around the splitter when it is focused
 */
$splitter-focus-outline-color: dynamic($base-color);

/**
 * @var {string}
 * The outline-style of the splitter when it is focused
 */
$splitter-focus-outline-style: dynamic(solid);

/**
 * @var {number}
 * The outline-width of the splitter when it is focused
 */
$splitter-focus-outline-width: dynamic(1px);

/**
 * @var {number}
 * The outline-offset of the splitter when it is focused
 */
$splitter-focus-outline-offset: dynamic(-$splitter-focus-outline-width);

/**
 * @var {string}
 * The the type of cursor to display when the cursor is over the collapse tool
 */
$collapse-tool-cursor: dynamic(pointer);

/**
 * @var {number}
 * The size of the collapse tool. This becomes the width of the collapse tool for
 * horizontal splitters, and the height for vertical splitters.
 */
$collapse-tool-size: dynamic(35px);

/**
 * @var {number}
 * The opacity of the collapse tool.
 */
$collapse-tool-opacity: dynamic(1);

/**
 * @var {string/list}
 * The border-color of the collapse tool.
 */
$splitter-collapse-tool-border-color: dynamic(#fff);

/**
 * @var {string/list}
 * The background-color of the collapse tool.
 */
$splitter-collapse-tool-background-color: dynamic(transparent);

/**
 * @var {number}
 * The border-width of the collapse tool.
 */
$splitter-collapse-tool-border-width: dynamic(0);

/**
 * @var {number}
 * The border-style of the collapse tool.
 */
$splitter-collapse-tool-border-style: dynamic(solid);

/**
 * @var {color}
 * The color to use for the collapse tool when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$splitter-collapse-tool-glyph-color: dynamic($neutral-color);

/**
 * @var {number}
 * The font size to use the collapse tool when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$splitter-collapse-tool-glyph-font-size: dynamic(16px);

/**
 * @var {string/list}
 * Glyph for the "top" collapse tool when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$splitter-collapse-tool-top-glyph: dynamic($fa-var-caret-up $splitter-collapse-tool-glyph-font-size $font-icon-font-family);

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

/**
 * @var {string/list}
 * Glyph for the "bottom" collapse tool when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$splitter-collapse-tool-bottom-glyph: dynamic($fa-var-caret-down $splitter-collapse-tool-glyph-font-size $font-icon-font-family);

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

/**
 * @var {number/list}
 * The padding of the "top" collapse tool's glyph element when {@link Global_CSS#$enable-font-icons} is `true`.
 * Use to achieve precise alignment of the collapse tool.
 */
$splitter-collapse-tool-top-glyph-padding: dynamic(0);

/**
 * @var {number/list}
 * The padding of the "right" collapse tool's glyph element when {@link Global_CSS#$enable-font-icons} is `true`.
 * Use to achieve precise alignment of the collapse tool.
 */
$splitter-collapse-tool-right-glyph-padding: dynamic(0);

/**
 * @var {number/list}
 * The padding of the "bottom" collapse tool's glyph element when {@link Global_CSS#$enable-font-icons} is `true`.
 * Use to achieve precise alignment of the collapse tool.
 */
$splitter-collapse-tool-bottom-glyph-padding: dynamic(0);

/**
 * @var {number/list}
 * The padding of the "left" collapse tool's glyph element when {@link Global_CSS#$enable-font-icons} is `true`.
 * Use to achieve precise alignment of the collapse tool.
 */
$splitter-collapse-tool-left-glyph-padding: dynamic(0);