/**
 * @class Ext.Chip
 */
 
/**
 * @var {Number}
 * Chip height
 */
$chip-height: dynamic(18px);
 
/**
 * @var {Number}
 * Chip height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-height-big: dynamic(22px);
 
/**
 * @var {color}
 * Chip content color
 */
$chip-color: dynamic($color);
 
/**
 * @var {String}
 * Chip cursor name
 */
$chip-cursor: dynamic(default);
 
/**
 * @var {number}
 * Chip content color when selected
 */
$chip-selected-color: dynamic(#fff);
 
/**
 * @var {number}
 * Chip content color when hovered
 */
$chip-hovered-color: dynamic(null);
 
/**
 * @var {number}
 * Chip content color when disabled
 */
$chip-disabled-color: dynamic(null);
 
/**
 * @var {color}
 * Chip background-color
 */
$chip-background-color: dynamic(mix(#fff, $neutral-color, 15%));
 
/**
 * @var {color}
 * Chip background-color when selected
 */
$chip-selected-background-color: dynamic(#3892d4);
 
/**
 * @var {number}
 * Chip background-color when hovered
 */
$chip-hovered-background-color: dynamic(mix(#000, $chip-background-color, 10%));
 
/**
 * @var {number}
 * Chip background-color when disabled
 */
$chip-disabled-background-color: dynamic(null);
 
/**
 * @var {number}
 * Chip opacity
 */
$chip-opacity: dynamic(null);
 
/**
 * @var {number}
 * Chip opacity when hovered
 */
$chip-hovered-opacity: dynamic(.8);
 
/**
 * @var {number}
 * Chip opacity when disabled
 */
$chip-disabled-opacity: dynamic(.3);
 
/**
 * @var {number}
 * Chip border radius
 */
$chip-border-radius: dynamic(3px);
 
/**
 * @var {number}
 * Chip border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-border-radius-big: dynamic(null);
 
/**
 * @var {number}
 * Chip icon size
 */
$chip-icon-size: dynamic($chip-height);
 
/**
 * @var {number}
 * Chip icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-icon-size-big: dynamic($chip-height-big);
 
/**
 * @var {number}
 * Chip font-size
 */
$chip-font-size: dynamic(null);
 
/**
 * @var {number}
 * Chip font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Padding before the chip's text.
 */
$chip-text-margin: dynamic(4px);
 
/**
 * @var {number}
 * Padding before the chip's text the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-text-margin-big: dynamic(6px);
 
/**
 * @var {number}
 * The line-height for the text element
 */
$chip-text-line-height: dynamic($chip-height);
 
/**
 * @var {number}
 * The line-height-big for the text element in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$chip-text-line-height-big: dynamic($chip-height-big);
 
/**
 * @var {number}
 * The margins of chip items.
 */
$chip-margin: dynamic(0 3px 2px 0);
 
/**
 * @var {number}
 * The margins of chip items in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$chip-margin-big: dynamic(0 4px 4px 0);
 
/**
 * @var {number}
 * Chip outline width when focused
 */
$chip-focused-outline-width: dynamic(1px);
 
/**
 * @var {string}
 * Chip outline style when focused
 */
$chip-focused-outline-style: dynamic(solid);
 
/**
 * @var {color}
 * Chip outline color when focused
 */
$chip-focused-outline-color: dynamic($chip-selected-background-color);
 
/**
 * @var {number}
 * Chip outline offset when focused
 */
$chip-focused-outline-offset: dynamic(-2px);
 
/**
 * @var {string}
 * Chip close icon
 */
$chip-close-icon: dynamic($fa-var-close);
 
/**
 * @var {String}
 * Chip close icon cursor name
 */
$chip-close-icon-cursor: dynamic(pointer);
 
/**
 * @var {color}
 * Chip close icon color
 */
$chip-close-icon-color: dynamic(#444);
 
/**
 * @var {color}
 * Chip close icon color when the chip is hovered
 */
$chip-close-icon-hovered-color: dynamic(#fff);
 
/**
 * @var {color}
 * Chip close icon color when the chip is selected
 */
$chip-close-icon-selected-color: dynamic(#fff);
 
/**
 * @var {color}
 * Chip close icon color when the chip is selected and hovered
 */
$chip-close-icon-selected-hovered-color: dynamic($chip-close-icon-hovered-color);
 
/**
 * @var {color}
 * Chip close icon background-color
 */
$chip-close-icon-background-color: dynamic(null);
 
/**
 * @var {color}
 * Chip close icon background-color when the chip is hovered
 */
$chip-close-icon-hovered-background-color: dynamic(rgba(0, 0, 0, 0.1));
 
/**
 * @var {color}
 * Chip close icon background-color when the chip is selected
 */
$chip-close-icon-selected-background-color: dynamic(rgba(0, 0, 0, 0.2));
 
/**
 * @var {color}
 * Chip close icon background-color when the chip is selected and hovered
 */
$chip-close-icon-selected-hovered-background-color: dynamic(rgba(255, 255, 255, 0.2));
 
/**
 * @var {number/list}
 * Chip close icon border-radius
 */
$chip-close-icon-border-radius: dynamic(3px);
 
/**
 * @var {number/list}
 * Chip close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-close-icon-border-radius-big: dynamic(null);
 
/**
 * @var {number}
 * Chip close icon size
 */
$chip-close-icon-size: dynamic(12px);
 
/**
 * @var {number}
 * Chip close icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-close-icon-size-big: dynamic(18px);
 
/**
 * @var {number}
 * Chip close icon font-size
 */
$chip-close-icon-font-size: dynamic($chip-close-icon-size);
 
/**
 * @var {number}
 * Chip close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-close-icon-font-size-big: dynamic($chip-close-icon-size-big);
 
/**
 * @var {number/list}
 * Chip close icon margin.
 * Used to position the close icon relative to the top right corner of the tab.
 */
$chip-close-icon-margin: dynamic(3px);
 
/**
 * @var {number/list}
 * Chip close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme.
 * Used to position the close icon relative to the top right corner of the tab.
 */
$chip-close-icon-margin-big: dynamic(null);
 
/**
 * @var {number}
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 */
$chip-close-icon-spacing: dynamic(10px);
 
/**
 * @var {number}
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$chip-close-icon-spacing-big: dynamic(20px);
 
/**
 * Creates a visual theme for a chip.
 *
 * @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=chip] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {Number} $height
 * The height of Chip components.
 *
 * @param {Number} $height-big
 * The height of Chip components in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $color
 * The color of chip content
 *
 * @param {String} $cursor
 * The cursor over chips
 *
 * @param {number} $selected-color
 * The color of chip content when hovered
 *
 * @param {number} $hovered-color
 * The color of chip content when hovered
 *
 * @param {number} $disabled-color
 * The color of chip content when disabled
 *
 * @param {color} $background-color
 * Chip background color
 *
 * @param {number} $selected-background-color
 * Chip background color when selected
 *
 * @param {number} $hovered-background-color
 * Chip background color when hovered
 *
 * @param {number} $disabled-background-color
 * Chip background-color when disabled
 *
 * @param {number} $opacity
 * Chip opacity
 *
 * @param {number} $hovered-opacity
 * Chip opacity when hovered
 *
 * @param {number} $disabled-opacity
 * Chip opacity when disabled
 *
 * @param {number} $border-radius
 * Chip border radius
 *
 * @param {number} $border-radius-big
 * Chip border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-size
 * Chip icon size
 *
 * @param {number} $icon-size-big
 * Chip icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $font-size
 * Chip icon font-size
 *
 * @param {number} $font-size-big
 * Chip icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {nunber} $text-margin
 * The margin before the text start.
 *
 * @param {nunber} $text-margin-big
 * The margin before the text start in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {nunber} $text-line-height
 * The line-height for the text element
 *
 * @param {nunber} $text-line-height-big
 * The line-height for the text element in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $margin
 * The margins round Chips
 *
 * @param {number} $margin-big
 * The margins round Chips in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $focused-outline-width
 * Chip outline width when focused
 *
 * @param {string} $focused-outline-style
 * Chip outline style when focused
 *
 * @param {color} $focused-outline-color
 * Chip outline color when focused
 *
 * @param {number} $focused-outline-offset
 * Chip outline offset when focused
 *
 * @param {string} $close-icon
 * Chip close icon
 *
 * @param {string} $close-icon-cursor
 * Chip close icon cursor
 *
 * @param {color} $close-icon-color
 * Chip close icon color
 *
 * @param {color} $close-icon-hovered-color
 * Chip close icon color when the chip is hovered
 *
 * @param {color} $close-icon-selected-color
 * Chip close icon color when the chip is selected
 *
 * @param {color} $close-icon-selected-hovered-color
 * Chip close icon color when the chip is selected and hovered
 *
 * @param {color} $close-icon-background-color
 * Chip close icon background-color
 *
 * @param {color} $close-icon-hovered-background-color
 * Chip close icon background-color when the chip is hovered
 *
 * @param {color} $close-icon-selected-background-color
 * Chip close icon background-color when the chip is selected
 *
 * @param {color} $close-icon-selected-hovered-background-color
 * Chip close icon background-color when the chip is selected and hovered
 *
 * @param {number/list} $close-icon-border-radius
 * Chip close icon border-radius
 *
 * @param {number/list} $close-icon-border-radius-big
 * Chip close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $close-icon-size
 * Chip close icon size
 *
 * @param {number} $close-icon-size-big
 * Chip close icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $close-icon-font-size
 * Chip close icon font-size
 *
 * @param {number} $close-icon-font-size-big
 * Chip close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $close-icon-margin
 * Chip close icon margin.
 * Margin to left and right of close icon.
 *
 * @param {number/list} $close-icon-margin-big
 * Chip close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme.
 * Margin to left and right of close icon.
 *
 * @param {number} $close-icon-spacing
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 *
 * @param {number} $close-icon-spacing-big
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin chip-ui(
    $ui: null,
    $xtype: chip,
    $height: null,
    $height-big: null,
    $color: null,
    $cursor: null,
    $selected-color: null,
    $hovered-color: null,
    $disabled-color: null,
    $background-color: null,
    $selected-background-color: null,
    $hovered-background-color: null,
    $disabled-background-color: null,
    $opacity: null,
    $hovered-opacity: null,
    $disabled-opacity: null,
    $border-radius: null,
    $border-radius-big: null,
    $icon-size: null,
    $icon-size-big: null,
    $font-size: null,
    $font-size-big: null,
    $text-margin: null,
    $text-margin-big: null,
    $text-line-height: null,
    $text-line-height-big: null,
    $margin: null,
    $margin-big: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $close-icon: null,
    $close-icon-cursor: null,
    $close-icon-color: null,
    $close-icon-hovered-color: null,
    $close-icon-selected-color: null,
    $close-icon-selected-hovered-color: null,
    $close-icon-background-color: null,
    $close-icon-hovered-background-color: null,
    $close-icon-selected-background-color: null,
    $close-icon-selected-hovered-background-color: null,
    $close-icon-border-radius: null,
    $close-icon-border-radius-big: null,
    $close-icon-size: null,
    $close-icon-size-big: null,
    $close-icon-font-size: null,
    $close-icon-font-size-big: null,
    $close-icon-margin: null,
    $close-icon-margin-big: null,
    $close-icon-spacing: null,
    $close-icon-spacing-big: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        display: inline-block;
        cursor: $cursor;
        margin: $margin;
        background-color: $background-color;
        @include border-radius($border-radius);
        height: $height;
 
        @if $enable-big {
            .#{$prefix}big & {
                margin: $margin-big;
                @include border-radius($border-radius-big);
                height: $height-big;
            }
        }
 
        .#{$prefix}body-el {
            display: flex;
            align-items: center;
        }
 
        .#{$prefix}icon-el {
            @include border-radius($border-radius);
            opacity: $opacity;
            display: none;
            z-index: 10;
 
            @include icon( 
                $color: $color, 
                $size: $icon-size, 
                $size-big: $icon-size-big, 
                $font-size: $font-size, 
                $font-size-big: $font-size-big 
            );
 
            // If they use a URL, it's set as the background-image, so scale it. 
            background-size: contain;
 
            @if $enable-big {
                .#{$prefix}big & {
                    @include border-radius($border-radius-big);
                }
            }
        }
 
        &.#{$prefix}has-icon .#{$prefix}icon-el {
            display: inline-flex;
        }
 
        .#{$prefix}text-el {
            flex: 1 1 auto;
            margin: 0 $text-margin 0 $text-margin;
            line-height: $text-line-height;
            white-space: nowrap;
            @if $enable-big {
                .#{$prefix}big & {
                    line-height: $text-line-height-big;
                    margin: 0 $text-margin-big 0 $text-margin-big;
                }
            }
        }
 
        .#{$prefix}close-el {
            cursor: $close-icon-cursor;
            color: $close-icon-color;
            width: $close-icon-size;
            height: $close-icon-size;
            background-color: $close-icon-background-color;
            border-radius: $close-icon-border-radius;
            margin: 0 $close-icon-margin 0 $close-icon-margin;
            display: none;
 
            @include icon( 
                $icon: $close-icon, 
                $font-size: $close-icon-font-size, 
                $font-size-big: $close-icon-font-size-big 
            );
 
            @if $enable-big {
                .#{$prefix}big & {
                    width: $close-icon-size-big;
                    height: $close-icon-size-big;
                    border-radius: $close-icon-border-radius-big;
                    margin: 0 $close-icon-margin-big 0 $close-icon-margin-big;
                }
            }
        }
 
        &.#{$prefix}selected .#{$prefix}close-el {
            color: $close-icon-selected-color;
            background-color: $close-icon-selected-background-color;
        }
 
        &:hover .#{$prefix}close-el {
            color: $close-icon-hovered-color;
            background-color: $close-icon-hovered-background-color;
        }
 
        &.#{$prefix}selected:hover .#{$prefix}close-el {
            color: $close-icon-selected-hovered-color;
            background-color: $close-icon-selected-hovered-background-color;
        }
 
        &.#{$prefix}closable {
            .#{$prefix}text-el {
                margin-right: 0;
            }
            .#{$prefix}close-el {
                display: flex;
            }
        }
 
        &.#{$prefix}hovered {
            color: $hovered-color;
            background-color: $hovered-background-color;
 
            .#{$prefix}icon-el {
                opacity: $hovered-opacity;
            }
        }
 
        &.#{$prefix}selected {
            color: $selected-color;
            background-color: $selected-background-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-radius: $border-radius 
                );
 
                @if $enable-big {
                    .#{$prefix}big & {
                        @include outline( 
                            $width: $focused-outline-width, 
                            $style: $focused-outline-style, 
                            $color: $focused-outline-color, 
                            $offset: $focused-outline-offset, 
                            $border-radius: $border-radius-big 
                        );
                    }
                }
            }
        }
 
        &.#{$prefix}selected.#{$prefix}focused {
            .#{$prefix}keyboard-mode & {
                @include outline( 
                    $width: $focused-outline-width, 
                    $style: $focused-outline-style, 
                    $color: $background-color, 
                    $offset: $focused-outline-offset, 
                    $border-radius: $border-radius 
                );
 
                @if $enable-big {
                    .#{$prefix}big & {
                        @include outline( 
                            $width: $focused-outline-width, 
                            $style: $focused-outline-style, 
                            $color: $background-color, 
                            $offset: $focused-outline-offset, 
                            $border-radius: $border-radius-big 
                        );
                    }
                }
            }
        }
    }
 
    // Ensure a SelectField's ChipView is heighted correctly and won't change height when the first chip 
    // is added, or last one removed. Ensure its top margin is consistent with chipd's bottom margin. 
    .#{$prefix}selectfield {
        .#{$prefix}chipview {
            min-height: $height + bottom($margin);
            @if $enable-big {
                .#{$prefix}big & {
                    min-height: $height-big + bottom($margin-big);
                }
            }
 
            margin-top: bottom($margin);
            @if $enable-big {
                .#{$prefix}big & {
                    margin-top: bottom($margin-big);
                }
            }
 
            .#{$prefix}chipview .#{$prefix}body-el {
                // Override ChipView base class style 
                padding: 0;
            }
        }
    }
}