/**
 * @class Ext.dataview.DataItem
 */
 
/**
 * @var {color}
 * DataItem text color
 */
$dataitem-color: dynamic($dataview-item-color);
 
/**
 * @var {color}
 * DataItem text color when hovered
 */
$dataitem-hovered-color: dynamic($dataview-item-hovered-color);
 
/**
 * @var {color}
 * DataItem text color when selected
 */
$dataitem-selected-color: dynamic($dataview-item-selected-color);
 
/**
 * @var {color}
 * DataItem text color when pressed
 */
$dataitem-pressed-color: dynamic($dataview-item-pressed-color);
 
/**
 * @var {color}
 * DataItem background-color
 */
$dataitem-background-color: dynamic($dataview-item-background-color);
 
/**
 * @var {color}
 * background-color for `striped` DataItems
 */
$dataitem-alt-background-color: dynamic($dataview-item-alt-background-color);
 
/**
 * @var {color}
 * DataItem background-color when hovered
 */
$dataitem-hovered-background-color: dynamic($dataview-item-hovered-background-color);
 
/**
 * @var {color}
 * DataItem background-color when selected
 */
$dataitem-selected-background-color: dynamic($dataview-item-selected-background-color);
 
/**
 * @var {color}
 * DataItem background-color when pressed
 */
$dataitem-pressed-background-color: dynamic($dataview-item-pressed-background-color);
 
/**
 * @var {number}
 * DataItem border-width
 */
$dataitem-border-width: dynamic($dataview-item-border-width);
 
/**
 * @var {string}
 * DataItem border-style
 */
$dataitem-border-style: dynamic($dataview-item-border-style);
 
/**
 * @var {color}
 * DataItem border-color
 */
$dataitem-border-color: dynamic($dataview-item-border-color);
 
/**
 * @var {color}
 * DataItem border-color when hovered
 */
$dataitem-hovered-border-color: dynamic($dataview-item-hovered-border-color);
 
/**
 * @var {color}
 * DataItem border-color when selected
 */
$dataitem-selected-border-color: dynamic($dataview-item-selected-border-color);
 
/**
 * @var {color}
 * DataItem border-color when pressed
 */
$dataitem-pressed-border-color: dynamic($dataview-item-pressed-border-color);
 
/**
 * @var {number}
 * DataItem outline-width when focused
 */
$dataitem-focused-outline-width: dynamic($dataview-item-focused-outline-width);
 
/**
 * @var {string}
 * DataItem outline-style when focused
 */
$dataitem-focused-outline-style: dynamic($dataview-item-focused-outline-style);
 
/**
 * @var {color}
 * DataItem outline-color when focused
 */
$dataitem-focused-outline-color: dynamic($dataview-item-focused-outline-color);
 
/**
 * @var {number}
 * DataItem outline-offset when focused
 */
$dataitem-focused-outline-offset: dynamic($dataview-item-focused-outline-offset);
 
/**
 * @var {string/number}
 * DataItem font-weight
 */
$dataitem-font-weight: dynamic($dataview-item-font-weight);
 
/**
 * @var {number}
 * DataItem font-size
 */
$dataitem-font-size: dynamic($dataview-item-font-size);
 
/**
 * @var {number}
 * DataItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dataitem-font-size-big: dynamic($dataview-item-font-size-big);
 
/**
 * @var {number}
 * DataItem line-height
 */
$dataitem-line-height: dynamic($dataview-item-line-height);
 
/**
 * @var {number}
 * DataItem line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dataitem-line-height-big: dynamic($dataview-item-line-height-big);
 
/**
 * @var {string}
 * DataItem font-family
 */
$dataitem-font-family: dynamic($dataview-item-font-family);
 
/**
 * @var {number/list}
 * DataItem padding
 */
$dataitem-padding: dynamic($dataview-item-padding);
 
/**
 * @var {number/list}
 * DataItem padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dataitem-padding-big: dynamic($dataview-item-padding-big);
 
/**
 * @var {map}
 * Parameters for the "default" DataItem UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$dataitem-default-ui: dynamic((
    color: $dataitem-color,
    hovered-color: $dataitem-hovered-color,
    selected-color: $dataitem-selected-color,
    pressed-color: $dataitem-pressed-color,
    background-color: $dataitem-background-color,
    alt-background-color: $dataitem-alt-background-color,
    hovered-background-color: $dataitem-hovered-background-color,
    selected-background-color: $dataitem-selected-background-color,
    pressed-background-color: $dataitem-pressed-background-color,
    border-width: $dataitem-border-width,
    border-style: $dataitem-border-style,
    border-color: $dataitem-border-color,
    hovered-border-color: $dataitem-hovered-border-color,
    selected-border-color: $dataitem-selected-border-color,
    pressed-border-color: $dataitem-pressed-border-color,
    focused-outline-width: $dataitem-focused-outline-width,
    focused-outline-style: $dataitem-focused-outline-style,
    focused-outline-color: $dataitem-focused-outline-color,
    focused-outline-offset: $dataitem-focused-outline-offset,
    font-weight: $dataitem-font-weight,
    font-size: $dataitem-font-size,
    font-size-big: $dataitem-font-size-big,
    line-height: $dataitem-line-height,
    line-height-big: $dataitem-line-height-big,
    font-family: $dataitem-font-family,
    padding: $dataitem-padding,
    padding-big: $dataitem-padding-big
));
 
/**
 * Creates a visual theme for a DataItem.
 *
 * @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=dataitem] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * DataItem Item text color
 *
 * @param {color} $hovered-color
 * DataItem Item text color when hovered
 *
 * @param {color} $selected-color
 * DataItem Item text color when selected
 *
 * @param {color} $pressed-color
 * DataItem Item text color when pressed
 *
 * @param {color} $background-color
 * DataItem Item background-color
 *
 * @param {color} $alt-background-color
 * background-color for `striped` DataItems
 *
 * @param {color} $hovered-background-color
 * DataItem Item background-color when hovered
 *
 * @param {color} $selected-background-color
 * DataItem Item background-color when selected
 *
 * @param {color} $pressed-background-color
 * DataItem Item background-color when pressed
 *
 * @param {number} $border-width
 * DataItem Item border-width
 *
 * @param {string} $border-style
 * DataItem Item border-style
 *
 * @param {color} $border-color
 * DataItem Item border-color
 *
 * @param {color} $hovered-border-color
 * DataItem Item border-color when hovered
 *
 * @param {color} $selected-border-color
 * DataItem Item border-color when selected
 *
 * @param {color} $pressed-border-color
 * DataItem Item border-color when pressed
 *
 * @param {number} $focused-outline-width
 * DataItem outline-width when focused
 *
 * @param {string} $focused-outline-style
 * DataItem outline-style when focused
 *
 * @param {color} $focused-outline-color
 * DataItem outline-color when focused
 *
 * @param {number} $focused-outline-offset
 * DataItem outline-offset when focused
 *
 * @param {string/number} $font-weight
 * DataItem Item font-weight
 *
 * @param {number} $font-size
 * DataItem Item font-size
 *
 * @param {number} $font-size-big
 * DataItem Item font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * DataItem Item line-height
 *
 * @param {number} $line-height-big
 * DataItem Item line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * DataItem Item font-family
 *
 * @param {number/list} $padding
 * DataItem Item padding
 *
 * @param {number/list} $padding-big
 * DataItem Item padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin dataitem-ui(
    $ui: null,
    $xtype: dataitem,
    $color: null,
    $hovered-color: null,
    $selected-color: null,
    $pressed-color: null,
    $background-color: null,
    $alt-background-color: null,
    $hovered-background-color: null,
    $selected-background-color: null,
    $pressed-background-color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $hovered-border-color: null,
    $selected-border-color: null,
    $pressed-border-color: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        color: $color;
        background-color: $background-color;
        @include border($border-width, $border-style, $border-color);
        @include font($font-weight, $font-size, $line-height, $font-family);
        padding: $padding;
 
        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
                line-height: $line-height-big;
                padding: $padding-big;
            }
        }
 
        &.#{$prefix}odd {
            background-color: $alt-background-color;
        }
 
        &.#{$prefix}hovered {
            color: $hovered-color;
            background-color: $hovered-background-color;
            border-color: $hovered-border-color;
        }
 
        &.#{$prefix}selected {
            .#{$prefix}show-selection > & {
                color: $selected-color;
                background-color: $selected-background-color;
                border-color: $selected-border-color;
            }
        }
 
        &.#{$prefix}pressed {
            color: $pressed-color;
            background-color: $pressed-background-color;
            border-color: $pressed-border-color;
        }
 
        &.#{$prefix}focused {
            .#{$prefix}keyboard-mode & {
                @include outline(
                    $width: $focused-outline-width,
                    $style: $focused-outline-style,
                    $color: $focused-outline-color,
                    $offset: $focused-outline-offset,
                    $border-width: $border-width
                );
            }
        }
    }
}