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