/**
 * @class Ext.picker.Date
 */

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

/**
 * @var {string}
 * The border-style of the DatePicker
 */
$datepicker-border-style: dynamic(solid);

/**
 * @var {color}
 * The background-color of the DatePicker
 */
$datepicker-background-color: dynamic(#fff);

/**
 * @var {string}
 * The background-image of the DatePicker next arrow
 */
$datepicker-next-image: dynamic('datepicker/arrow-right');

/**
 * @var {list}
 * The background-position of the DatePicker next arrow
 */
$datepicker-next-background-position: dynamic(0 0);

/**
 * @var {string}
 * The background-image of the DatePicker previous arrow
 */
$datepicker-prev-image: dynamic('datepicker/arrow-left');

/**
 * @var {list}
 * The background-position of the DatePicker previous arrow
 */
$datepicker-prev-background-position: dynamic(0 0);

/**
 * @var {color}
 * Color of the Date Picker arrows when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-arrow-glyph-color: dynamic($color);

/**
 * @var {string/list}
 * Glyph for the Date Picker next arrow when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-next-glyph: dynamic($fa-var-angle-double-right 16px $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the Date Picker previous arrow when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-prev-glyph: dynamic($fa-var-angle-double-left 16px $font-icon-font-family);

/**
 * @var {number}
 * The width of DatePicker arrows
 */
$datepicker-arrow-width: dynamic(16px);

/**
 * @var {number}
 * The height of DatePicker arrows
 */
$datepicker-arrow-height: dynamic(16px);

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

/**
 * @var {number}
 * The opacity of the DatePicker arrows
 */
$datepicker-arrow-opacity: dynamic(1);

/**
 * @var {number}
 * The opacity of the DatePicker arrows when hovered
 */
$datepicker-arrow-opacity-over: dynamic(1);

/**
 * @var {color} $datepicker-header-background-color
 * The Date Picker header background color.
 */

/**
 * @var {string/list}
 * The Date Picker header background gradient. Can be either the name of a predefined gradient
 * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
 */
$datepicker-header-background-gradient: dynamic('none');

/**
 * @var {number/list}
 * The padding of the Date Picker header
 */
$datepicker-header-padding: dynamic(4px 6px);

/**
 * @var {color}
 * The color of the Date Picker month button
 */
$datepicker-month-button-color: dynamic(#fff);

/**
 * @var {color}
 * The background-color of the Date Picker month button
 */
$datepicker-month-button-background-color: dynamic(transparent);

/**
 * @var {color}
 * The background-color of the Date Picker month button when hovered
 */
$datepicker-month-button-over-background-color: dynamic($datepicker-month-button-background-color);

/**
 * @var {color}
 * The background-color of the Date Picker month button when pressed
 */
$datepicker-month-button-pressed-background-color: dynamic($datepicker-month-button-over-background-color);

/**
 * @var {number}
 * The font-size of the Date Picker month button
 */
$datepicker-month-button-font-size: dynamic($button-small-font-size);

/**
 * @var {number/list}
 * The padding of the Date Picker month button
 */
$datepicker-month-button-padding: dynamic($button-small-padding);

/**
 * @var {number}
 * The width of the arrow on the Date Picker month button
 */
$datepicker-month-button-arrow-width: dynamic($button-small-arrow-width);

/**
 * @var {string}
 * The background-image of the arrow on the Date Picker month button
 */
$datepicker-month-button-arrow-image: dynamic('datepicker/month-arrow');

/**
 * @var {string/list}
 * Glyph for the arrow on the Date Picker month button when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-month-button-arrow-glyph: dynamic($fa-var-angle-down 16px $font-icon-font-family);

/**
 * @var {color}
 * Color of the arrow on the Date Picker month button when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-month-button-arrow-glyph-color: dynamic($button-toolbar-arrow-glyph-color);

/**
 * @var {string}
 * The text-align of the Date Picker header
 */
$datepicker-header-text-align: dynamic(center);

/**
 * @var {number}
 * The height of Date Picker items
 */
$datepicker-item-height: dynamic(25px);

/**
 * @var {number}
 * The width of Date Picker items
 */
$datepicker-item-width: dynamic(30px);

/**
 * @var {number/list}
 * The padding of Date Picker items
 */
$datepicker-item-padding: dynamic(0 7px 0 0);

/**
 * @var {string}
 * The font-family of Date Picker items
 */
$datepicker-item-font-family: dynamic($font-family);

/**
 * @var {number}
 * The font-size of Date Picker items
 */
$datepicker-item-font-size: dynamic($font-size);

/**
 * @var {string}
 * The font-weight of Date Picker items
 */
$datepicker-item-font-weight: dynamic($font-weight);

/**
 * @var {string}
 * The text-align of Date Picker items
 */
$datepicker-item-text-align: dynamic(right);

/**
 * @var {color}
 * The text color of Date Picker items
 */
$datepicker-item-color: dynamic($color);

/**
 * @var {string}
 * The type of cursor to display when the cursor is over a Date Picker item
 */
$datepicker-item-cursor: dynamic(pointer);

/**
 * @var {string}
 * The font-family of Date Picker column headers
 */
$datepicker-column-header-font-family: dynamic($datepicker-item-font-family);

/**
 * @var {number}
 * The font-size of Date Picker column headers
 */
$datepicker-column-header-font-size: dynamic($datepicker-item-font-size);

/**
 * @var {string}
 * The font-weight of Date Picker column headers
 */
$datepicker-column-header-font-weight: dynamic($datepicker-item-font-weight);

/**
 * @var {string/list}
 * The background-gradient of Date Picker column headers. Can be either the name of a
 * predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 */
$datepicker-column-header-background-gradient: dynamic('none');

/**
 * @var {string}
 * The border-style of Date Picker column headers
 */
$datepicker-column-header-border-style: dynamic(solid);

/**
 * @var {number}
 * The border-width of Date Picker column headers
 */
$datepicker-column-header-border-width: dynamic(0 0 1px);

/**
 * @var {string}
 * The text-align of Date Picker column headers
 */
$datepicker-column-header-text-align: dynamic($datepicker-item-text-align);

/**
 * @var {number}
 * The height of Date Picker column headers
 */
$datepicker-column-header-height: dynamic($datepicker-item-height);

/**
 * @var {number/list}
 * The padding of Date Picker column headers
 */
$datepicker-column-header-item-padding: dynamic(0 9px 0 0);

/**
 * @var {number}
 * The border-width of Date Picker items
 */
$datepicker-item-border-width: dynamic(1px);

/**
 * @var {string}
 * The border-style of Date Picker items
 */
$datepicker-item-border-style: dynamic(solid);

/**
 * @var {color}
 * The border-color of Date Picker items
 */
$datepicker-item-border-color: dynamic($datepicker-background-color);

/**
 * @var {string}
 * The border-style of today's date on the Date Picker
 */
$datepicker-item-today-border-style: dynamic(solid);

/**
 * @var {color}
 * The background-color of today's date on the Date Picker
 */
$datepicker-item-today-background-color: dynamic($datepicker-background-color);

/**
 * @var {color}
 * The background-color of hovered Date Picker items
 */
$datepicker-item-hover-background-color: dynamic($datepicker-background-color);

/**
 * @var {color}
 * The text color of selected Date Picker items
 */
$datepicker-item-selected-color: dynamic($datepicker-item-color);

/**
 * @var {color}
 * The background-color of selected Date Picker items
 */
$datepicker-item-selected-background-color: dynamic($datepicker-background-color);

/**
 * @var {string}
 * The border-style of selected Date Picker itemds
 */
$datepicker-item-selected-border-style: dynamic(solid);

/**
 * @var {color}
 * The border-color of selected Date Picker items
 */
$datepicker-item-selected-border-color: dynamic($datepicker-item-border-color);

/**
 * @var {string}
 * The font-weight of the selected item
 */
$datepicker-item-selected-font-weight: dynamic($font-weight-bold);

/**
 * @var {color}
 * The text color of the items in the previous and next months
 */
$datepicker-item-prev-next-color: dynamic(lighten($datepicker-item-color,  75%));

/**
 * @var {string}
 * The type of cursor to display when the cursor is over a disabled item
 */
$datepicker-item-disabled-cursor: dynamic(default);

/**
 * @var {color}
 * The text color of disabled Date Picker items
 */
$datepicker-item-disabled-color: dynamic(lighten($datepicker-item-color,  50%));

/**
 * @var {color}
 * The background-color of disabled Date Picker items
 */
$datepicker-item-disabled-background-color: dynamic(#eee);

/**
 * @var {color}
 * The background-color of the Date Picker footer
 */
$datepicker-footer-background-color: dynamic($datepicker-column-header-background-color);

/**
 * @var {string/list}
 * The background-gradient of the Date Picker footer. Can be either the name of a
 * predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 */
$datepicker-footer-background-gradient: dynamic('none');

/**
 * @var {number/list}
 * The border-width of the Date Picker footer
 */
$datepicker-footer-border-width: dynamic(1px 0 0);

/**
 * @var {string}
 * The border-style of the Date Picker footer
 */
$datepicker-footer-border-style: dynamic(solid);

/**
 * @var {string}
 * The text-align of the Date Picker footer
 */
$datepicker-footer-text-align: dynamic(center);

/**
 * @var {number/list}
 * The padding of the Date Picker footer
 */
$datepicker-footer-padding: dynamic(3px 0);

/**
 * @var {number}
 * The space between the footer buttons
 */
$datepicker-footer-button-spacing: dynamic(4px);

/**
 * @var {color}
 * The border-color of the Month Picker
 */
$datepicker-monthpicker-border-color: dynamic($datepicker-border-color);

/**
 * @var {number}
 * The border-width of the Month Picker
 */
$datepicker-monthpicker-border-width: dynamic($datepicker-border-width);

/**
 * @var {string}
 * The border-style of the Month Picker
 */
$datepicker-monthpicker-border-style: dynamic($datepicker-border-style);

/**
 * @var {color}
 * The text color of Month Picker items
 */
$datepicker-monthpicker-item-color: dynamic($color);

/**
 * @var {color}
 * The text color of Month Picker items
 */
$datepicker-monthpicker-item-border-width: dynamic($datepicker-item-border-width);

/**
 * @var {color}
 * The border-color of Month Picker items
 */
$datepicker-monthpicker-item-border-color: dynamic($datepicker-item-border-color);

/**
 * @var {string}
 * The border-style of Month Picker items
 */
$datepicker-monthpicker-item-border-style: dynamic($datepicker-item-border-style);

/**
 * @var {string}
 * The font-family of Month Picker items
 */
$datepicker-monthpicker-item-font-family: dynamic($datepicker-item-font-family);

/**
 * @var {number}
 * The font-size of Month Picker items
 */
$datepicker-monthpicker-item-font-size: dynamic($datepicker-item-font-size);

/**
 * @var {string}
 * The font-weight of Month Picker items
 */
$datepicker-monthpicker-item-font-weight: dynamic($datepicker-item-font-weight);

/**
 * @var {number/list}
 * The margin of Month Picker items
 */
$datepicker-monthpicker-item-margin: dynamic(5px);

/**
 * @var {string}
 * The text-align of Month Picker items
 */
$datepicker-monthpicker-item-text-align: dynamic(center);

/**
 * @var {number}
 * The height of Month Picker items
 */
$datepicker-monthpicker-item-height: dynamic(24px);

/**
 * @var {string}
 * The type of cursor to display when the cursor is over a Month Picker item
 */
$datepicker-monthpicker-item-cursor: dynamic(pointer);

/**
 * @var {color}
 * The background-color of hovered Month Picker items
 */
$datepicker-monthpicker-item-hover-background-color: dynamic($datepicker-item-hover-background-color);

/**
 * @var {color}
 * The background-color of selected Month Picker items
 */
$datepicker-monthpicker-item-selected-background-color: dynamic($datepicker-item-selected-background-color);

/**
 * @var {color}
 * The text color of selected Month Picker items
 */
$datepicker-monthpicker-item-selected-color: dynamic($datepicker-item-selected-color);

/**
 * @var {string}
 * The border-style of selected Month Picker items
 */
$datepicker-monthpicker-item-selected-border-style: dynamic($datepicker-item-selected-border-style);

/**
 * @var {color}
 * The border-color of selected Month Picker items
 */
$datepicker-monthpicker-item-selected-border-color: dynamic($datepicker-item-selected-border-color);

/**
 * @var {number}
 * The height of the Month Picker year navigation buttons 
 */
$datepicker-monthpicker-yearnav-button-height: dynamic(16px);

/**
 * @var {number}
 * The width of the Month Picker year navigation buttons 
 */
$datepicker-monthpicker-yearnav-button-width: dynamic(16px);

/**
 * @var {string}
 * The type of cursor to display when the cursor is over a Month Picker year navigation button 
 */
$datepicker-monthpicker-yearnav-button-cursor: dynamic(pointer);

/**
 * @var {number}
 * The opacity of the Month Picker year navigation buttons 
 */
$datepicker-monthpicker-yearnav-button-opacity: dynamic(1);

/**
 * @var {number}
 * The opacity of hovered Month Picker year navigation buttons 
 */
$datepicker-monthpicker-yearnav-button-opacity-over: dynamic(1);

/**
 * @var {string}
 * The background-image of the Month Picker next year navigation button
 */
$datepicker-monthpicker-next-image: dynamic('datepicker/arrow-right');

/**
 * @var {string}
 * The background-image of the Month Picker previous year navigation button
 */
$datepicker-monthpicker-prev-image: dynamic('datepicker/arrow-left');

/**
 * @var {list}
 * The background-poisition of the Month Picker next year navigation button
 */
$datepicker-monthpicker-next-background-position: dynamic(0 0);

/**
 * @var {list}
 * The background-poisition of the hovered Month Picker next year navigation button
 */
$datepicker-monthpicker-next-background-position-over: dynamic(0 0);

/**
 * @var {list}
 * The background-poisition of the Month Picker previous year navigation button
 */
$datepicker-monthpicker-prev-background-position: dynamic(0 0);

/**
 * @var {list}
 * The background-poisition of the hovered Month Picker previous year navigation button
 */
$datepicker-monthpicker-prev-background-position-over: dynamic(0 0);

/**
 * @var {color}
 * Color of the Month Picker arrows when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-monthpicker-arrow-glyph-color: dynamic($datepicker-arrow-glyph-color);

/**
 * @var {string/list}
 * Glyph for the Month Picker next year arrow when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-monthpicker-next-glyph: dynamic($datepicker-next-glyph);

/**
 * @var {string/list}
 * Glyph for the Month Picker previous year arrow when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$datepicker-monthpicker-prev-glyph: dynamic($datepicker-prev-glyph);

/**
 * @var {string}
 * The border-style of the Month Picker separator
 */
$datepicker-monthpicker-separator-border-style: dynamic(solid);

/**
 * @var {number}
 * The border-width of the Month Picker separator
 */
$datepicker-monthpicker-separator-border-width: dynamic(1px);

/**
 * @var {color}
 * The border-color of the Month Picker separator
 */
$datepicker-monthpicker-separator-border-color: dynamic($datepicker-border-color);

/**
 * @var {number/list}
 * The margin of Month Picker items when the datepicker does not have footer buttons
 */
$datepicker-monthpicker-small-item-margin: dynamic(2px 5px);

/**
 * @var {number}
 * The height of Month Picker items when the datepicker does not have footer buttons
 */
$datepicker-monthpicker-small-item-height: dynamic($datepicker-monthpicker-item-height);