/**
 * @class Ext.panel.Date
 */

/**
 * @var {number/list}
 * DatePanel pane margin.
 */
$datepanel-pane-margin: dynamic(null);

/**
 * @var {number/list}
 * DatePanel caption padding.
 */
$datepanel-caption-padding: dynamic(null);

/**
 * @var {number/list}
 * DatePanel caption padding in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-caption-padding-big: dynamic(null);

/**
 * @var {color}
 * DatePanel caption color.
 */
$datepanel-caption-color: dynamic(null);

/**
 * @var {color}
 * DatePanel caption background color.
 */
$datepanel-caption-background-color: dynamic(null);

/**
 * @var {string}
 * DatePanel caption text-align.
 */
$datepanel-caption-text-align: dynamic(center);

/**
 * @var {string}
 * DatePanel caption font family.
 */
$datepanel-caption-font-family: dynamic(null);

/**
 * @var {number}
 * DatePanel caption font size.
 */
$datepanel-caption-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel caption font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-caption-font-size-big: dynamic(null);

/**
 * @var {number/string}
 * DatePanel caption font weight.
 */
$datepanel-caption-font-weight: dynamic(null);

/**
 * @var {number}
 * DatePanel cell width.
 */
$datepanel-cell-width: dynamic(28px);

/**
 * @var {number}
 * DatePanel cell width in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-cell-width-big: dynamic(null);

/**
 * @var {number}
 * DatePanel cell height.
 */
$datepanel-cell-height: dynamic(28px);

/**
 * @var {number}
 * DatePanel cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-cell-height-big: dynamic(null);

/**
 * @var {number}
 * DatePanel spacing between cells.
 */
$datepanel-cell-spacing: dynamic(4px);

/**
 * @var {number}
 * DatePanel spacing between cells in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-cell-spacing-big: dynamic(null);

/**
 * @var {number/list}
 * DatePanel cell border radius.
 */
$datepanel-cell-border-radius: dynamic(null);

/**
 * @var {number/list}
 * DatePanel cell border radius in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-cell-border-radius-big: dynamic(null);

/**
 * @var {color}
 * DatePanel cell color.
 */
$datepanel-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel cell background color.
 */
$datepanel-cell-background-color: dynamic(null);

/**
 * @var {string}
 * DatePanel cell font family.
 */
$datepanel-cell-font-family: dynamic(null);

/**
 * @var {number}
 * DatePanel cell font size.
 */
$datepanel-cell-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel cell font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-cell-font-size-big: dynamic(null);

/**
 * @var {number/string}
 * DatePanel cell font weight.
 */
$datepanel-cell-font-weight: dynamic(null);

/**
 * @var {number}
 * DatePanel day header cell height.
 */
$datepanel-day-cell-height: dynamic(null);

/**
 * @var {number}
 * DatePanel day header cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-day-cell-height-big: dynamic(null);

/**
 * @var {color}
 * DatePanel day header cell color.
 */
$datepanel-day-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel day header cell background color.
 */
$datepanel-day-cell-background-color: dynamic(#F5F5F5);

/**
 * @var {string}
 * DatePanel day header cell font size.
 */
$datepanel-day-cell-font-family: dynamic(null);

/**
 * @var {number}
 * DatePanel day header font size.
 */
$datepanel-day-cell-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel day header font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-day-cell-font-size-big: dynamic(null);

/**
 * @var {number/string}
 * DatePanel day header font weight.
 */
$datepanel-day-cell-font-weight: dynamic(bold);

/**
 * @var {number}
 * DatePanel date body cell height.
 */
$datepanel-date-cell-height: dynamic(null);

/**
 * @var {number}
 * DatePanel date body cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-date-cell-height-big: dynamic(null);

/**
 * @var {color}
 * DatePanel date body cell color.
 */
$datepanel-date-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel date body cell background color.
 */
$datepanel-date-cell-background-color: dynamic(null);

/**
 * @var {string}
 * DatePanel date body cell font family.
 */
$datepanel-date-cell-font-family: dynamic(null);

/**
 * @var {number}
 * DatePanel date body cell font size.
 */
$datepanel-date-cell-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel date body cell font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-date-cell-font-size-big: dynamic(null);

/**
 * @var {number/string}
 * DatePanel date body cell font weight.
 */
$datepanel-date-cell-font-weight: dynamic(null);

/**
 * @var {color/list}
 * DatePanel date body cell border color.
 */
$datepanel-date-cell-border-color: dynamic(null);

/**
 * @var {string/list}
 * DatePanel date body cell border style.
 */
$datepanel-date-cell-border-style: dynamic(null);

/**
 * @var {number/list}
 * DatePanel date body cell border width.
 */
$datepanel-date-cell-border-width: dynamic(null);

/**
 * @var {color}
 * DatePanel outside the current month cell color.
 */
$datepanel-outside-cell-color: dynamic(#d0d0d0);

/**
 * @var {color}
 * DatePanel outside the current month cell background color.
 */
$datepanel-outside-cell-background-color: dynamic(null);

/**
 * @var {number/string}
 * DatePanel outside the current month cell font weight.
 */
$datepanel-outside-cell-font-weight: dynamic(null);

/**
 * @var {color}
 * DatePanel today cell color.
 */
$datepanel-today-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel today cell background color.
 */
$datepanel-today-cell-background-color: dynamic($base-highlight-color);

/**
 * @var {number/string}
 * DatePanel today cell font weight.
 */
$datepanel-today-cell-font-weight: dynamic(null);

/**
 * @var {color}
 * DatePanel special cell color.
 */
$datepanel-special-cell-color: dynamic($base-light-color);

/**
 * @var {color}
 * DatePanel special cell background color.
 */
$datepanel-special-cell-background-color: dynamic(null);

/**
 * @var {number/string}
 * DatePanel special cell font weight.
 */
$datepanel-special-cell-font-weight: dynamic(null);

/**
 * @var {color}
 * DatePanel weekend cell color.
 */
$datepanel-weekend-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel weekend cell background color.
 */
$datepanel-weekend-cell-background-color: dynamic(null);

/**
 * @var {number/string}
 * DatePanel weekend cell font weight.
 */
$datepanel-weekend-cell-font-weight: dynamic(null);

/**
 * @var {number}
 * DatePanel weekend column width.
 */
$datepanel-weekend-column-width: dynamic(80%);

/**
 * @var {number}
 * DatePanel weekend column background color.
 */
$datepanel-weekend-column-background-color: dynamic(null);

/**
 * @var {number}
 * DatePanel weekend column vertical spacing.
 */
$datepanel-weekend-column-spacing: dynamic(6px);

/**
 * @var {color/list}
 * DatePanel weekend column border color.
 */
$datepanel-weekend-column-border-color: dynamic($datepanel-weekend-column-background-color);

/**
 * @var {string/list}
 * DatePanel weekend column border style.
 */
$datepanel-weekend-column-border-style: dynamic(solid);

/**
 * @var {number/list}
 * DatePanel weekend column border width.
 */
$datepanel-weekend-column-border-width: dynamic(1px);

/**
 * @var {number/list}
 * DatePanel weekend column border radius.
 */
$datepanel-weekend-column-border-radius: dynamic(null);

/**
 * @var {color}
 * DatePanel disabled cell color.
 */
$datepanel-disabled-cell-color: dynamic(null);

/**
 * @var {color}
 * DatePanel disabled cell background color.
 */
$datepanel-disabled-cell-background-color: dynamic(#aaa);

/**
 * @var {string/number}
 * DatePanel disabled cell font weight.
 */
$datepanel-disabled-cell-font-weight: dynamic(null);

/**
 * @var {color}
 * DatePanel selected cell color.
 */
$datepanel-selected-cell-color: dynamic($light-color);

/**
 * @var {color}
 * DatePanel selected cell background color.
 */
$datepanel-selected-cell-background-color: dynamic($base-color);

/**
 * @var {number/string}
 * DatePanel selected cell font weight.
 */
$datepanel-selected-cell-font-weight: dynamic(null);

/**
 * @var {color}
 * DatePanel focused cell outline color.
 */
$datepanel-focused-cell-outline-color: dynamic(darken($base-color, 35%));

/**
 * @var {string}
 * DatePanel focused cell outline style.
 */
$datepanel-focused-cell-outline-style: dynamic(solid);

/**
 * @var {number}
 * DatePanel focused cell outline width.
 */
$datepanel-focused-cell-outline-width: dynamic(1px);

/**
 * @var {number}
 * DatePanel focused cell outline offset.
 */
$datepanel-focused-cell-outline-offset: dynamic(-1px);

/**
 * @var {color}
 * DatePanel selected focused cell outline color.
 */
$datepanel-selected-focused-cell-outline-color: dynamic(#fff);

/**
 * @var {number/list}
 * DatePanel split title header padding.
 */
$datepanel-split-title-header-padding: dynamic(null);

/**
 * @var {number/list}
 * DatePanel split title header padding in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-split-title-header-padding-big: dynamic(null);

/**
 * @var {color}
 * DatePanel year (with split titles) color.
 */
$datepanel-header-year-color: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) opacity.
 */
$datepanel-header-year-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) font size.
 */
$datepanel-header-year-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-header-year-font-size-big: dynamic(null);

/**
 * @var {string}
 * DatePanel year (with split titles) font family.
 */
$datepanel-header-year-font-family: dynamic(null);

/**
 * @var {string/number}
 * DatePanel year (with split titles) font weight.
 */
$datepanel-header-year-font-weight: dynamic(500);

/**
 * @var {number}
 * DatePanel year (with split titles) line height.
 */
$datepanel-header-year-line-height: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) line height in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-header-year-line-height-big: dynamic(null);

/**
 * @var {color}
 * DatePanel year (with split titles) inactive year color.
 */
$datepanel-header-year-inactive-color: dynamic(null);

/**
 * @var {color}
 * DatePanel year (with split titles) inactive year opacity.
 */
$datepanel-header-year-inactive-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) inactive year font size.
 */
$datepanel-header-year-inactive-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel year (with split titles) inactive year font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-header-year-inactive-font-size-big: dynamic(null);

/**
 * @var {color}
 * DatePanel title (with split titles) inactive color.
 */
$datepanel-header-title-inactive-color: dynamic(null);

/**
 * @var {number}
 * DatePanel title (with split titles) inactive opacity.
 */
$datepanel-header-title-inactive-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel title (with split titles) inactive font size.
 */
$datepanel-header-title-inactive-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel title (with split titles) inactive font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$datepanel-header-title-inactive-font-size-big: dynamic(null);

/**
 * @var {list}
 * DatePanel title (with split titles) inactive transition.
 */
$datepanel-header-inactive-transition: dynamic(null);

// Inherited panel styles

/**
 * @var {color/list}
 * DatePanel border-color
 */
$datepanel-border-color: dynamic(null);

/**
 * @var {number/list}
 * DatePanel border-width
 */
$datepanel-border-width: dynamic(null);

/**
 * @var {string/list}
 * DatePanel border-style
 */
$datepanel-border-style: dynamic(null);

/**
 * @var {number/list}
 * DatePanel border-radius
 */
$datepanel-border-radius: dynamic(null);

/**
 * @var {number/list}
 * DatePanel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-border-radius-big: dynamic($datepanel-border-radius);

/**
 * @var {color}
 * DatePanel body background-color
 */
$datepanel-body-background-color: dynamic(null);

/**
 * @var {color}
 * DatePanel body text color
 */
$datepanel-body-color: dynamic(null);

/**
 * @var {color}
 * DatePanel body border-color
 */
$datepanel-body-border-color: dynamic($datepanel-border-color);

/**
 * @var {number/list}
 * DatePanel body border-width
 */
$datepanel-body-border-width: dynamic(null);

/**
 * @var {number/list}
 * DatePanel body border-style
 */
$datepanel-body-border-style: dynamic(null);

/**
 * @var {string/number}
 * DatePanel body font-weight
 */
$datepanel-body-font-weight: dynamic(null);

/**
 * @var {number}
 * DatePanel body font-size
 */
$datepanel-body-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-body-font-size-big: dynamic(null);

/**
 * @var {number}
 * DatePanel body line-height
 */
$datepanel-body-line-height: dynamic(null);

/**
 * @var {number}
 * DatePanel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-body-line-height-big: dynamic(null);

/**
 * @var {string}
 * DatePanel body font-family
 */
$datepanel-body-font-family: dynamic(null);

/**
 * @var {number/list}
 * DatePanel body padding
 */
$datepanel-body-padding: dynamic(null);

/**
 * @var {number/list}
 * DatePanel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-body-padding-big: dynamic(null);

/**
 * @var {color}
 * DatePanel Header background-color
 */
$datepanel-header-background-color: dynamic(null);

/**
 * @var {string/list}
 * DatePanel Header background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$datepanel-header-background-gradient: dynamic(null);

/**
 * @var {color}
 * DatePanel Header text color
 */
$datepanel-header-color: dynamic(null);

/**
 * @var {color/list}
 * DatePanel Header border-color
 */
$datepanel-header-border-color: dynamic($datepanel-border-color);

/**
 * @var {number/list}
 * DatePanel Header border-width
 */
$datepanel-header-border-width: dynamic(null);

/**
 * @var {string/list}
 * DatePanel Header border-style
 */
$datepanel-header-border-style: dynamic(null);

/**
 * @var {string/number}
 * DatePanel Header font-weight
 */
$datepanel-header-font-weight: dynamic(null);

/**
 * @var {number}
 * DatePanel Header font-size
 */
$datepanel-header-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-font-size-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Header line-height
 */
$datepanel-header-line-height: dynamic(null);

/**
 * @var {number}
 * DatePanel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-line-height-big: dynamic(null);

/**
 * @var {string}
 * DatePanel Header font-family
 */
$datepanel-header-font-family: dynamic(null);

/**
 * @var {number/list}
 * DatePanel Header padding
 */
$datepanel-header-padding: dynamic(null);

/**
 * @var {number/list}
 * DatePanel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-padding-big: dynamic(null);

/**
 * @var {number/list}
 * DatePanel Header Title padding
 */
$datepanel-header-title-padding: dynamic(null);

/**
 * @var {number/list}
 * DatePanel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-title-padding-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Header Title opacity
 */
$datepanel-header-title-opacity: dynamic(null);

/**
 * @var {shadow}
 * DatePanel Header Shadow
 */
$datepanel-header-shadow: dynamic(null);

/**
 * @var {number}
 * Z-Index for the DatePanel Header, should be used with shadows to raise header above content
 */
$datepanel-header-z-index: dynamic(null);

/**
 * @var {number}
 * DatePanel Header min-height
 */
$datepanel-header-min-height: dynamic(null);

/**
 * @var {number}
 * DatePanel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-min-height-big: dynamic(null);

/**
 * @var {color}
 * DatePanel Header icon color.
 */
$datepanel-header-icon-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Header icon size
 */
$datepanel-header-icon-size: dynamic(null);

/**
 * @var {number}
 * DatePanel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-icon-size-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Header icon font-size.  Used for configuring the size of font icons
 */
$datepanel-header-icon-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-icon-font-size-big: dynamic(null);

/**
 * @var {number}
 * The space between the DatePanel Header icon and text when the icon is horizontally aligned
 */
$datepanel-header-icon-horizontal-spacing: dynamic(null);

/**
 * @var {number}
 * The space between the DatePanel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-icon-horizontal-spacing-big: dynamic(null);

/**
 * @var {number}
 * The space between the DatePanel Header icon and text when the icon is vertically aligned
 */
$datepanel-header-icon-vertical-spacing: dynamic(null);

/**
 * @var {number}
 * The space between the DatePanel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-header-icon-vertical-spacing-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Header icon opacity
 */
$datepanel-header-icon-opacity: dynamic(null);

/**
 * @var {color}
 * DatePanel Tool color
 */
$datepanel-tool-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool color when hovered
 */
$datepanel-tool-hovered-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool color when pressed
 */
$datepanel-tool-pressed-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool color when disabled
 */
$datepanel-tool-disabled-color: dynamic(null);

/**
 * @var {color}
 * DatePanel Tool background-color
 */
$datepanel-tool-background-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool background-color when hovered
 */
$datepanel-tool-hovered-background-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool background-color when pressed
 */
$datepanel-tool-pressed-background-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool background-color when disabled
 */
$datepanel-tool-disabled-background-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool opacity
 */
$datepanel-tool-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool opacity when hovered
 */
$datepanel-tool-hovered-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool opacity when pressed
 */
$datepanel-tool-pressed-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool opacity when disabled
 */
$datepanel-tool-disabled-opacity: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool border radius
 */
$datepanel-tool-border-radius: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-tool-border-radius-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool size
 */
$datepanel-tool-size: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-tool-size-big: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool font-size
 */
$datepanel-tool-font-size: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-tool-font-size-big: dynamic(null);

/**
 * @var {number}
 * The space between DatePanel Tools
 */
$datepanel-tool-spacing: dynamic(null);

/**
 * @var {number}
 * The space between DatePanel Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$datepanel-tool-spacing-big: dynamic(null);

/**
 * @var {string}
 * DatePanel Tool cursor
 */
$datepanel-tool-cursor: dynamic(null);

/**
 * @var {string}
 * DatePanel Tool cursor when disabled
 */
$datepanel-tool-disabled-cursor: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool outline width when focused
 */
$datepanel-tool-focused-outline-width: dynamic(null);

/**
 * @var {string}
 * DatePanel Tool outline style when focused
 */
$datepanel-tool-focused-outline-style: dynamic(null);

/**
 * @var {color}
 * DatePanel Tool outline color when focused
 */
$datepanel-tool-focused-outline-color: dynamic(null);

/**
 * @var {number}
 * DatePanel Tool outline offset when focused
 */
$datepanel-tool-focused-outline-offset: dynamic(null);

/**
 * @var {color}
 * DatePanel anchor border-color
 */
$datepanel-anchor-border-color: dynamic(null);

/**
 * @var {color}
 * DatePanel anchor background-color
 */
$datepanel-anchor-background-color: dynamic(null);

/**
 * @var {number}
 * The height (in all orientations) of the anchor arrow
 */
$datepanel-anchor-height: dynamic(null);

/**
 * @var {number}
 * The width (in all orientations) of the anchor arrow.
 */
$datepanel-anchor-width: dynamic(null);

/**
 * @var {number}
 * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching
 * the target;
 */
$datepanel-anchor-margin: dynamic(null);

/**
 * @var {string}
 * `true` to include {@link #manageBorders border management} rules
 */
$datepanel-manage-borders: dynamic($panel-manage-borders);

/**
 * Creates a visual theme for a DatePanel.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=datepanel] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {String} [$header-xtype=dateheader] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for the header component.  For use by UI mixins of derived classes.
 *
 * @param {String} [$title-xtype=datetitle] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for the title component.  For use by UI mixins of derived classes.
 *
 * @param {String} [$tool-xtype=datepaneltool] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for tools.  For use by UI mixins of derived classes.
 *
 * @param {number/list} $pane-margin
 * DatePanel pane margin.
 *
 * @param {number/list} $caption-padding
 * DatePanel caption padding.
 *
 * @param {number/list} $caption-padding-big
 * DatePanel caption padding in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $caption-color
 * DatePanel caption color.
 *
 * @param {color} $caption-background-color
 * DatePanel caption background color.
 *
 * @param {string} $caption-text-align
 * DatePanel caption text-align.
 *
 * @param {string} $caption-font-family
 * DatePanel caption font family.
 *
 * @param {number} $caption-font-size
 * DatePanel caption font size.
 *
 * @param {number} $caption-font-size-big
 * DatePanel caption font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number/string} $caption-font-weight
 * DatePanel caption font weight.
 *
 * @param {number} $cell-width
 * DatePanel cell width.
 *
 * @param {number} $cell-width-big
 * DatePanel cell width in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number} $cell-height
 * DatePanel cell height.
 *
 * @param {number} $cell-height-big
 * DatePanel cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number} $cell-spacing
 * DatePanel spacing between cells.
 *
 * @param {number} $cell-spacing-big
 * DatePanel spacing between cells in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number/list} $cell-border-radius
 * DatePanel cell border radius.
 *
 * @param {number/list} $cell-border-radius-big
 * DatePanel cell border radius in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $cell-color
 * DatePanel cell color.
 *
 * @param {color} $cell-background-color
 * DatePanel cell background color.
 *
 * @param {string} $cell-font-family
 * DatePanel cell font family.
 *
 * @param {number} $cell-font-size
 * DatePanel cell font size.
 *
 * @param {number} $cell-font-size-big
 * DatePanel cell font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number/string} $cell-font-weight
 * DatePanel cell font weight.
 *
 * @param {number} $day-cell-height
 * DatePanel day header cell height.
 *
 * @param {number} $day-cell-height-big
 * DatePanel day header cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $day-cell-color
 * DatePanel day header cell color.
 *
 * @param {color} $day-cell-background-color
 * DatePanel day header cell background color.
 *
 * @param {string} $day-cell-font-family
 * DatePanel day header cell font size.
 *
 * @param {number} $day-cell-font-size
 * DatePanel day header font size.
 *
 * @param {number} $day-cell-font-size-big
 * DatePanel day header font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number/string} $day-cell-font-weight
 * DatePanel day header font weight.
 *
 * @param {number} $date-cell-height
 * DatePanel date body cell height.
 *
 * @param {number} $date-cell-height-big
 * DatePanel date body cell height in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $date-cell-color
 * DatePanel date body cell color.
 *
 * @param {color} $date-cell-background-color
 * DatePanel date body cell background color.
 *
 * @param {string} $date-cell-font-family
 * DatePanel date body cell font family.
 *
 * @param {number} $date-cell-font-size
 * DatePanel date body cell font size.
 *
 * @param {number} $date-cell-font-size-big
 * DatePanel date body cell font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {number/string} $date-cell-font-weight
 * DatePanel date body cell font weight.
 *
 * @param {color/list} $date-cell-border-color
 * DatePanel date body cell border color.
 *
 * @param {string/list} $date-cell-border-style
 * DatePanel date body cell border style.
 *
 * @param {number/list} $date-cell-border-width
 * DatePanel date body cell border width.
 *
 * @param {color} $outside-cell-color
 * DatePanel outside the current month cell color.
 *
 * @param {color} $outside-cell-background-color
 * DatePanel outside the current month cell background color.
 *
 * @param {number/string} $outside-cell-font-weight
 * DatePanel outside the current month cell font weight.
 *
 * @param {color} $today-cell-color
 * DatePanel today cell color.
 *
 * @param {color} $today-cell-background-color
 * DatePanel today cell background color.
 *
 * @param {number/string} $today-cell-font-weight
 * DatePanel today cell font weight.
 *
 * @param {color} $special-cell-color
 * DatePanel special cell color.
 *
 * @param {color} $special-cell-background-color
 * DatePanel special cell background color.
 *
 * @param {number/string} $special-cell-font-weight
 * DatePanel special cell font weight.
 *
 * @param {color} $weekend-cell-color
 * DatePanel weekend cell color.
 *
 * @param {color} $weekend-cell-background-color
 * DatePanel weekend cell background color.
 *
 * @param {number/string} $weekend-cell-font-weight
 * DatePanel weekend cell font weight.
 *
 * @param {number} $weekend-column-width
 * DatePanel weekend column width.
 *
 * @param {number} $weekend-column-background-color
 * DatePanel weekend column background color.
 *
 * @param {number} $weekend-column-spacing
 * DatePanel weekend column vertical spacing.
 *
 * @param {color/list} $weekend-column-border-color
 * DatePanel weekend column border color.
 *
 * @param {string/list} $weekend-column-border-style
 * DatePanel weekend column border style.
 *
 * @param {number/list} $weekend-column-border-width
 * DatePanel weekend column border width.
 *
 * @param {number/list} $weekend-column-border-radius
 * DatePanel weekend column border radius.
 *
 * @param {color} $disabled-cell-color
 * DatePanel disabled cell color.
 *
 * @param {color} $disabled-cell-background-color
 * DatePanel disabled cell background color.
 *
 * @param {string/number} $disabled-cell-font-weight
 * DatePanel disabled cell font weight.
 *
 * @param {color} $selected-cell-color
 * DatePanel selected cell color.
 *
 * @param {color} $selected-cell-background-color
 * DatePanel selected cell background color.
 *
 * @param {number/string} $selected-cell-font-weight
 * DatePanel selected cell font weight.
 *
 * @param {color} $focused-cell-outline-color
 * DatePanel focused cell outline color.
 *
 * @param {string} $focused-cell-outline-style
 * DatePanel focused cell outline style.
 *
 * @param {number} $focused-cell-outline-width
 * DatePanel focused cell outline width.
 *
 * @param {number} $focused-cell-outline-offset
 * DatePanel focused cell outline offset.
 *
 * @param {color} $selected-focused-cell-outline-color
 * DatePanel selected focused cell outline color.
 *
 * @param {number/list} $split-title-header-padding
 * DatePanel split title header padding.
 *
 * @param {number/list} $split-title-header-padding-big
 * DatePanel split title header padding in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $header-year-color
 * DatePanel year (with split titles) color.
 *
 * @param {number} $header-year-opacity
 * DatePanel year (with split titles) opacity.
 *
 * @param {number} $header-year-font-size
 * DatePanel year (with split titles) font size.
 *
 * @param {number} $header-year-font-size-big
 * DatePanel year (with split titles) font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {string} $header-year-font-family
 * DatePanel year (with split titles) font family.
 *
 * @param {string/number} $header-year-font-weight
 * DatePanel year (with split titles) font weight.
 *
 * @param {number} $header-year-line-height
 * DatePanel year (with split titles) line height.
 *
 * @param {number} $header-year-line-height-big
 * DatePanel year (with split titles) line height in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $header-year-inactive-color
 * DatePanel year (with split titles) inactive year color.
 *
 * @param {color} $header-year-inactive-opacity
 * DatePanel year (with split titles) inactive year opacity.
 *
 * @param {number} $header-year-inactive-font-size
 * DatePanel year (with split titles) inactive year font size.
 *
 * @param {number} $header-year-inactive-font-size-big
 * DatePanel year (with split titles) inactive year font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $header-title-inactive-color
 * DatePanel title (with split titles) inactive color.
 *
 * @param {number} $header-title-inactive-opacity
 * DatePanel title (with split titles) inactive opacity.
 *
 * @param {number} $header-title-inactive-font-size
 * DatePanel title (with split titles) inactive font size.
 *
 * @param {number} $header-title-inactive-font-size-big
 * DatePanel title (with split titles) inactive font size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {list} $header-inactive-transition
 * DatePanel title (with split titles) inactive transition.
 *
 *
 * @param {color} $background-color
 * DatePanel background-color
 *
 * @param {color/list} $border-color
 * DatePanel border-color
 *
 * @param {number/list} $border-width
 * DatePanel border-width
 *
 * @param {string/list} $border-style
 * DatePanel border-style
 *
 * @param {number/list} $border-radius
 * DatePanel border-radius
 *
 * @param {number/list} $border-radius-big
 * DatePanel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $body-background-color
 * DatePanel body background-color
 *
 * @param {color} $body-color
 * DatePanel body text color
 *
 * @param {color} $body-border-color
 * DatePanel body border-color
 *
 * @param {number/list} $body-border-width
 * DatePanel body border-width
 *
 * @param {number/list} $body-border-style
 * DatePanel body border-style
 *
 * @param {string/number} $body-font-weight
 * DatePanel body font-weight
 *
 * @param {number} $body-font-size
 * DatePanel body font-size
 *
 * @param {number} $body-font-size-big
 * DatePanel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $body-line-height
 * DatePanel body line-height
 *
 * @param {number} $body-line-height-big
 * DatePanel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * DatePanel body font-family
 *
 * @param {number/list} $body-padding
 * DatePanel body padding
 *
 * @param {number/list} $body-padding-big
 * DatePanel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-background-color
 * DatePanel Header background-color
 *
 * @param {string/list} $header-background-gradient
 * DatePanel Header background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $header-color
 * DatePanel Header text color
 *
 * @param {color/list} $header-border-color
 * DatePanel Header border-color
 *
 * @param {number/list} $header-border-width
 * DatePanel Header border-width
 *
 * @param {string/list} $header-border-style
 * DatePanel Header border-style
 *
 * @param {string/number} $header-font-weight
 * DatePanel Header font-weight
 *
 * @param {number} $header-font-size
 * DatePanel Header font-size
 *
 * @param {number} $header-font-size-big
 * DatePanel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-line-height
 * DatePanel Header line-height
 *
 * @param {number} $header-line-height-big
 * DatePanel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $header-font-family
 * DatePanel Header font-family
 *
 * @param {number/list} $header-padding
 * DatePanel Header padding
 *
 * @param {number/list} $header-padding-big
 * DatePanel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $header-title-padding
 * DatePanel Header Title padding
 *
 * @param {number/list} $header-title-padding-big
 * DatePanel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-title-opacity
 * DatePanel Header Title opacity
 *
 * @param {shadow} $header-shadow
 * DatePanel Header Shadow
 *
 * @param {number} $header-z-index
 * Z-Index for the DatePanel Header, should be used with shadows to raise header above content
 *
 * @param {number} $header-min-height
 * DatePanel Header min-height
 *
 * @param {number} $header-min-height-big
 * DatePanel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-icon-color
 * DatePanel Header icon color.
 *
 * @param {number} $header-icon-size
 * DatePanel Header icon size
 *
 * @param {number} $header-icon-size-big
 * DatePanel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-font-size
 * DatePanel Header icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $header-icon-font-size-big
 * DatePanel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-horizontal-spacing
 * The space between the DatePanel Header icon and text when the icon is horizontally aligned
 *
 * @param {number} $header-icon-horizontal-spacing-big
 * The space between the DatePanel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-vertical-spacing
 * The space between the DatePanel Header icon and text when the icon is vertically aligned
 *
 * @param {number} $header-icon-vertical-spacing-big
 * The space between the DatePanel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-opacity
 * DatePanel Header icon opacity
 *
 * @param {color} $tool-color
 * DatePanel Tool color
 *
 * @param {number} $tool-hovered-color
 * DatePanel Tool color when hovered
 *
 * @param {number} $tool-pressed-color
 * DatePanel Tool color when pressed
 *
 * @param {number} $tool-disabled-color
 * DatePanel Tool color when disabled
 *
 * @param {color} $tool-background-color
 * DatePanel Tool background-color
 *
 * @param {number} $tool-hovered-background-color
 * DatePanel Tool background-color when hovered
 *
 * @param {number} $tool-pressed-background-color
 * DatePanel Tool background-color when pressed
 *
 * @param {number} $tool-disabled-background-color
 * DatePanel Tool background-color when disabled
 *
 * @param {number} $tool-opacity
 * DatePanel Tool opacity
 *
 * @param {number} $tool-hovered-opacity
 * DatePanel Tool opacity when hovered
 *
 * @param {number} $tool-pressed-opacity
 * DatePanel Tool opacity when pressed
 *
 * @param {number} $tool-disabled-opacity
 * DatePanel Tool opacity when disabled
 *
 * @param {number} $tool-border-radius
 * DatePanel Tool border radius
 *
 * @param {number} $tool-border-radius-big
 * DatePanel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-size
 * DatePanel Tool size
 *
 * @param {number} $tool-size-big
 * DatePanel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-font-size
 * DatePanel Tool font-size
 *
 * @param {number} $tool-font-size-big
 * DatePanel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-spacing
 * The space between DatePanel Tools
 *
 * @param {number} $tool-spacing-big
 * The space between DatePanel Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $tool-cursor
 * DatePanel Tool cursor
 *
 * @param {string} $tool-disabled-cursor
 * DatePanel Tool cursor when disabled
 *
 * @param {number} $tool-focused-outline-width
 * DatePanel Tool outline width when focused
 *
 * @param {string} $tool-focused-outline-style
 * DatePanel Tool outline style when focused
 *
 * @param {color} $tool-focused-outline-color
 * DatePanel Tool outline color when focused
 *
 * @param {number} $tool-focused-outline-offset
 * DatePanel Tool outline offset when focused
 *
 * @param {color} $anchor-border-color
 * DatePanel anchor border-color
 *
 * @param {color} $anchor-background-color
 * DatePanel anchor background-color
 *
 * @param {number} $anchor-height
 * The height (in all orientations) of the anchor arrow
 *
 * @param {number} $anchor-width
 * The width (in all orientations) of the anchor arrow.
 *
 * @param {number} $anchor-margin
 * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching
 * the target;
 *
 * @param {string} $manage-borders
 * `true` to include {@link #manageBorders border management} rules
 */
@mixin datepanel-ui(
    $ui: null,
    $xtype: datepanel,
    $header-xtype: datepanelheader,
    $title-xtype: datetitle,
    $tool-xtype: datepaneltool,

    //DateView styles
    $pane-margin: null,

    $caption-padding: null,
    $caption-padding-big: null,
    $caption-color: null,
    $caption-background-color: null,
    $caption-text-align: null,
    $caption-font-family: null,
    $caption-font-size: null,
    $caption-font-size-big: null,
    $caption-font-weight: null,

    $cell-width: null,
    $cell-width-big: null,
    $cell-height: null,
    $cell-height-big: null,
    $cell-spacing: null,
    $cell-spacing-big: null,
    $cell-border-radius: null,
    $cell-border-radius-big: null,
    $cell-color: null,
    $cell-background-color: null,
    $cell-font-family: null,
    $cell-font-size: null,
    $cell-font-size-big: null,
    $cell-font-weight: null,

    $day-cell-height: null,
    $day-cell-height-big: null,
    $day-cell-color: null,
    $day-cell-background-color: null,
    $day-cell-font-family: null,
    $day-cell-font-size: null,
    $day-cell-font-size-big: null,
    $day-cell-font-weight: null,

    $date-cell-height: null,
    $date-cell-height-big: null,
    $date-cell-color: null,
    $date-cell-background-color: null,
    $date-cell-font-family: null,
    $date-cell-font-size: null,
    $date-cell-font-size-big: null,
    $date-cell-font-weight: null,
    $date-cell-border-color: null,
    $date-cell-border-style: null,
    $date-cell-border-width: null,

    $outside-cell-color: null,
    $outside-cell-background-color: null,
    $outside-cell-font-weight: null,

    $today-cell-color: null,
    $today-cell-background-color: null,
    $today-cell-font-weight: null,

    $special-cell-color: null,
    $special-cell-background-color: null,
    $special-cell-font-weight: null,

    $weekend-cell-color: null,
    $weekend-cell-background-color: null,
    $weekend-cell-font-weight: null,

    $weekend-column-width: null,
    $weekend-column-background-color: null,
    $weekend-column-spacing: null,
    $weekend-column-border-color: null,
    $weekend-column-border-style: null,
    $weekend-column-border-width: null,
    $weekend-column-border-radius: null,

    $disabled-cell-color: null,
    $disabled-cell-background-color: null,
    $disabled-cell-font-weight: null,

    $selected-cell-color: null,
    $selected-cell-background-color: null,
    $selected-cell-font-weight: null,

    $focused-cell-outline-color: null,
    $focused-cell-outline-style: null,
    $focused-cell-outline-width: null,
    $focused-cell-outline-offset: null,

    $selected-focused-cell-outline-color: null,


    // DatePanel styles
    $split-title-header-padding: null,
    $split-title-header-padding-big: null,

    $header-year-color: null,
    $header-year-opacity: null,
    $header-year-font-size: null,
    $header-year-font-size-big: null,
    $header-year-font-family: null,
    $header-year-font-weight: null,
    $header-year-line-height: null,
    $header-year-line-height-big: null,

    $header-year-inactive-color: null,
    $header-year-inactive-opacity: null,
    $header-year-inactive-font-size: null,
    $header-year-inactive-font-size-big: null,

    $header-title-inactive-color: null,
    $header-title-inactive-opacity: null,
    $header-title-inactive-font-size: null,
    $header-title-inactive-font-size-big: null,

    $header-inactive-transition: null,

    // Inherited panel styles
    $background-color: null,
    $border-color: null,
    $border-width: null,
    $border-style: null,
    $border-radius: null,
    $border-radius-big: null,
    $body-background-color: null,
    $body-color: null,
    $body-border-color: null,
    $body-border-width: null,
    $body-border-style: null,
    $body-font-weight: null,
    $body-font-size: null,
    $body-font-size-big: null,
    $body-line-height: null,
    $body-line-height-big: null,
    $body-font-family: null,
    $body-padding: null,
    $body-padding-big: null,
    $header-background-color: null,
    $header-background-gradient: null,
    $header-color: null,
    $header-border-color: null,
    $header-border-width: null,
    $header-border-style: null,
    $header-font-weight: null,
    $header-font-size: null,
    $header-font-size-big: null,
    $header-line-height: null,
    $header-line-height-big: null,
    $header-font-family: null,
    $header-padding: null,
    $header-padding-big: null,
    $header-title-padding: null,
    $header-title-padding-big: null,
    $header-title-opacity: null,
    $header-shadow: null,
    $header-z-index: null,
    $header-min-height: null,
    $header-min-height-big: null,
    $header-icon-color: null,
    $header-icon-size: null,
    $header-icon-size-big: null,
    $header-icon-font-size: null,
    $header-icon-font-size-big: null,
    $header-icon-horizontal-spacing: null,
    $header-icon-horizontal-spacing-big: null,
    $header-icon-vertical-spacing: null,
    $header-icon-vertical-spacing-big: null,
    $header-icon-opacity: null,
    $tool-color: null,
    $tool-hovered-color: null,
    $tool-pressed-color: null,
    $tool-disabled-color: null,
    $tool-background-color: null,
    $tool-hovered-background-color: null,
    $tool-pressed-background-color: null,
    $tool-disabled-background-color: null,
    $tool-opacity: null,
    $tool-hovered-opacity: null,
    $tool-pressed-opacity: null,
    $tool-disabled-opacity: null,
    $tool-border-radius: null,
    $tool-border-radius-big: null,
    $tool-size: null,
    $tool-size-big: null,
    $tool-font-size: null,
    $tool-font-size-big: null,
    $tool-spacing: null,
    $tool-spacing-big: null,
    $tool-cursor: null,
    $tool-disabled-cursor: null,
    $tool-focused-outline-width: null,
    $tool-focused-outline-style: null,
    $tool-focused-outline-color: null,
    $tool-focused-outline-offset: null,
    $anchor-border-color: null,
    $anchor-background-color: null,
    $anchor-height: null,
    $anchor-width: null,
    $anchor-margin: null,
    $manage-borders: $datepanel-manage-borders
) {
    $ui-suffix: ui-suffix($ui);
    $arguments: intersect-arguments(datepanel-ui, panel-ui);

    @include panel-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}navigation-tools {
            @function calcPos($margin) {
                $sum: ceil($cell-width / 2) + $margin;

                @if $sum != null {
                    @return calc(#{$sum} - 1em);
                } @else {
                    @return 1em;
                }
            }
            top: top($pane-margin);
            right: calcPos(right($pane-margin));
            left: calcPos(left($pane-margin));
        }

        .#{$prefix}split {
            @include padding($split-title-header-padding);

            @if $enable-big {
                .#{$prefix}big & {
                    @include padding($split-title-header-padding-big);
                }
            }
        }

        .#{$prefix}year-el {
            color: $header-year-color;
            opacity: $header-year-opacity;
            @include font(
                $font-weight: $header-year-font-weight,
                $font-size: $header-year-font-size,
                $font-family: $header-year-font-family,
                $line-height: $header-year-line-height
            );

            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $header-year-font-size;
                    $line-height: $header-year-line-height-big;
                }
            }

            &.#{$prefix}inactive {
                color: $header-year-inactive-color;
                opacity: $header-year-inactive-opacity;
                font-size: $header-year-inactive-font-size;

                transition: $header-inactive-transition;

                @if $enable-big {
                    .#{$prefix}big & {
                        font-size: $header-year-inactive-font-size-big;
                    }
                }
            }
        }

        .#{$prefix}text-el {
            &.#{$prefix}inactive {
                color: $header-title-inactive-color;
                opacity: $header-title-inactive-opacity;
                font-size: $header-title-inactive-font-size;

                transition: $header-inactive-transition;

                @if $enable-big {
                    .#{$prefix}big & {
                        font-size: $header-title-inactive-font-size-big;
                    }
                }
            }
        }

        .#{$prefix}dateview {
            table {
                margin: $pane-margin;
            }

            caption {
                padding: $caption-padding;
                color: $caption-color;
                background-color: $caption-background-color;
                text-align: $caption-text-align;

                @include font(
                    $font-weight: $caption-font-weight,
                    $font-size: $caption-font-size,
                    $font-family: $caption-font-family
                );

                @if $enable-big {
                    .#{$prefix}big & {
                        padding: $caption-padding-big;
                        font-size: $caption-font-size-big;
                    }
                }
            }

            .#{$prefix}cell {
                padding: $cell-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        padding: cell-spacing-big;
                    }
                }

                .#{$prefix}inner {
                    width: $cell-width;
                    height: $cell-height;
                    color: $cell-color;
                    background-color: $cell-background-color;
                    @include border-radius($cell-border-radius);

                    @include font(
                        $font-weight: $cell-font-weight,
                        $font-size: $cell-font-size,
                        $font-family: $cell-font-family
                    );

                    @if $enable-big {
                        .#{$prefix}big & {
                            width: $cell-width-big;
                            font-size: $cell-font-size-big;
                            @include border-radius($cell-border-radius-big);
                        }
                    }
                }
            }

            thead .#{$prefix}cell {
                background-color: $day-cell-background-color;

                .#{$prefix}inner {
                    height: coalesce($day-cell-height, $cell-height);
                    color: $day-cell-color;

                    @include font(
                        $font-weight: $day-cell-font-weight,
                        $font-size: $day-cell-font-size,
                        $font-family: $day-cell-font-family
                    );

                    @if $enable-big {
                        .#{$prefix}big & {
                            height: $day-cell-height-big;
                            font-size: $day-cell-font-size-big;
                        }
                    }
                }
            }

            tbody .#{$prefix}cell {
                .#{$prefix}inner {
                    height: $date-cell-height;
                    color: $date-cell-color;
                    background-color: $date-cell-background-color;

                    @include font(
                        $font-weight: $date-cell-font-weight,
                        $font-size: $date-cell-font-size,
                        $font-family: $date-cell-font-family
                    );

                     @include border(
                        $date-cell-border-width,
                        $date-cell-border-style,
                        $date-cell-border-color
                    );

                    @if $enable-big {
                        .#{$prefix}big & {
                            height: $date-cell-height-big;
                            font-size: $date-cell-font-size-big;
                        }
                    }
                }

                &.#{$prefix}outside {
                    .#{$prefix}inner {
                        color: $outside-cell-color;
                        background-color: $outside-cell-background-color;
                        font-weight: $outside-cell-font-weight;
                    }
                }

                &.#{$prefix}weekend {
                    .#{$prefix}inner {
                        color: $weekend-cell-color;
                        background-color: $weekend-cell-background-color;
                        font-weight: $weekend-cell-font-weight;
                    }
                }

                &.#{$prefix}today {
                    .#{$prefix}inner {
                        color: $today-cell-color;
                        background-color: $today-cell-background-color;
                        font-weight: $today-cell-font-weight;
                    }
                }

                &.#{$prefix}special {
                    .#{$prefix}inner {
                        color: $special-cell-color;
                        background-color: $special-cell-background-color;
                        font-weight: $special-cell-font-weight;
                    }
                }

                &.#{$prefix}disabled {
                    .#{$prefix}inner {
                        color: $disabled-cell-color;
                        background-color: $disabled-cell-background-color;
                        font-weight: $disabled-cell-font-weight;
                    }
                }

                &.#{$prefix}selected {
                    .#{$prefix}inner {
                        color: $selected-cell-color;
                        background-color: $selected-cell-background-color;
                        font-weight: $selected-cell-font-weight;
                    }
                }


                @function calcOffset($padding) {
                    $ret: 0;
                    $offset: $focused-cell-outline-offset;

                    @if $offset != null {
                        @if $padding == null {
                            $padding: 0;
                        }
                        $ret: (-$padding - 1) + $offset;
                    }
                    @return $ret;
                }

                &:focus:not(.#{$prefix}hide-focus) {
                    .#{$prefix}inner {
                        //.#{$prefix}keyboard-mode & {
                            @include outline(
                                $width: $focused-cell-outline-width,
                                $style: $focused-cell-outline-style,
                                $color: $focused-cell-outline-color,
                                $offset: calcOffset($cell-spacing),
                                $border-radius: $cell-border-radius
                            );

                            .#{$prefix}big & {
                                @include outline(
                                    $width: $focused-cell-outline-width,
                                    $style: $focused-cell-outline-style,
                                    $color: $focused-cell-outline-color,
                                    $offset: calcOffset($cell-spacing-big),
                                    $border-radius: $cell-border-radius-big
                                );
                            }
                        //}
                    }
                }

                &:focus.#{$prefix}selected:not(.#{$prefix}hide-focus) {
                    .#{$prefix}inner {
                        //.#{$prefix}keyboard-mode & {
                            @include outline(
                                $width: $focused-cell-outline-width,
                                $style: $focused-cell-outline-style,
                                $color: $selected-focused-cell-outline-color,
                                $offset: calcOffset($cell-spacing),
                                $border-radius: $cell-border-radius
                            );

                            .#{$prefix}big & {
                                @include outline(
                                    $width: $focused-cell-outline-width,
                                    $style: $focused-cell-outline-style,
                                    $color: $selected-focused-cell-outline-color,
                                    $offset: calcOffset($cell-spacing-big),
                                    $border-radius: $cell-border-radius-big
                                );
                            }
                        //}
                    }
                }
            }

            @if $weekend-column-background-color != null {
                tbody .#{$prefix}weekend {
                    z-index: 0;
                    position: relative;
                    .#{$prefix}inner {
                        z-index: 1;
                        &:before {
                            width: $weekend-column-width;
                            background-color: $weekend-column-background-color;
                            border-color: $weekend-column-border-color;
                            border-style: $weekend-column-border-style;
                            border-left-width: left($weekend-column-border-width);
                            border-right-width: right($weekend-column-border-width);

                            // These are structural styles, but they are controlled by
                            // the theme, which is why they are included here
                            z-index: -1;
                            position: absolute;
                            content: '';
                            top: 0;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                }

                tbody {
                    tr:first-child .#{$prefix}weekend {
                        .#{$prefix}inner {
                            &:before {
                                top: $weekend-column-spacing;
                                border-top-width: top($weekend-column-border-width);
                                border-top-left-radius: $weekend-column-border-radius;
                                border-top-right-radius: $weekend-column-border-radius;
                            }
                        }
                    }

                    tr:last-child .#{$prefix}weekend {
                        .#{$prefix}inner {
                            &:before {
                                bottom: $weekend-column-spacing;
                                border-bottom-width: bottom($weekend-column-border-width);
                                border-bottom-left-radius: $weekend-column-border-radius;
                                border-bottom-right-radius: $weekend-column-border-radius;
                            }
                        }
                    }
                }
            }
        }
    }
}