/**
 * @class Ext.menu.Item
 */
 
/**
 * @var {color}
 * Menu Item text color
 */
$menuitem-color: dynamic($color);
 
/**
 * @var {color}
 * Menu Item text color when active
 */
$menuitem-active-color: dynamic(null);
 
/**
 * @var {color}
 * Menu Item text color when disabled
 */
$menuitem-disabled-color: dynamic(null);
 
/**
 * @var {color}
 * Menu Item background-color
 */
$menuitem-background-color: dynamic(null);
 
/**
 * @var {color}
 * Menu Item background-color when active
 */
$menuitem-active-background-color: dynamic(mix(#fff, $base-light-color, 50%));
 
/**
 * @var {color}
 * Menu Item background-color when disabled
 */
$menuitem-disabled-background-color: dynamic(null);
 
/**
 * @var {string/number}
 * Menu Item font-weight
 */
$menuitem-font-weight: dynamic($font-weight);
 
/**
 * @var {number}
 * Menu Item font-size
 */
$menuitem-font-size: dynamic($font-size);
 
/**
 * @var {number}
 * Menu Item font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-font-size-big: dynamic($font-size-big);
 
/**
 * @var {string}
 * Menu Item font-family
 */
$menuitem-font-family: dynamic($font-family);
 
/**
 * @var {number}
 * Menu Item height
 */
$menuitem-height: dynamic(24px);
 
/**
 * @var {number}
 * Menu Item height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-height-big: dynamic(32px);
 
/**
 * @var {string}
 * Menu Item cursor
 */
$menuitem-cursor: dynamic(pointer);
 
/**
 * @var {string}
 * Menu Item cursor when disabled
 */
$menuitem-disabled-cursor: dynamic(default);
 
/**
 * @var {number}
 * Menu item outline-width when focused
 */
$menuitem-focused-outline-width: dynamic(1px);
 
/**
 * @var {string}
 * Menu item outline-style when focused
 */
$menuitem-focused-outline-style: dynamic(solid);
 
/**
 * @var {color}
 * Menu item outline-color when focused
 */
$menuitem-focused-outline-color: dynamic($base-color);
 
/**
 * @var {color}
 * Menu item outline-offset when focused
 */
$menuitem-focused-outline-offset: dynamic(-$menuitem-focused-outline-width);
 
/**
 * @var {number}
 * The opacity of disabled {@link Ext.menu.Item Menu Items}
 */
$menuitem-disabled-opacity: dynamic(.5);
 
/**
 * @var {color}
 * Menu Item icon color
 */
$menuitem-icon-color: dynamic(#808080);
 
/**
 * @var {color}
 * Menu Item icon color when active
 */
$menuitem-active-icon-color: dynamic($menuitem-active-color);
 
/**
 * @var {color}
 * Menu Item icon color when disabled
 */
$menuitem-disabled-icon-color: dynamic(null);
 
/**
 * @var {number}
 * Menu Item icon size
 */
$menuitem-icon-size: dynamic(16px);
 
/**
 * @var {number}
 * Menu Item icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-icon-size-big: dynamic(20px);
 
/**
 * @var {number}
 * Menu Item icon font-size
 */
$menuitem-icon-font-size: dynamic(null);
 
/**
 * @var {number}
 * Menu Item icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-icon-font-size-big: dynamic(null);
 
/**
 * @var {string}
 * Menu Item arrow icon
 */
$menuitem-arrow-icon: dynamic($fa-var-caret-right);
 
/**
 * @var {color}
 * Menu Item arrow icon color
 */
$menuitem-arrow-icon-color: dynamic($menuitem-icon-color);
 
/**
 * @var {color}
 * Menu Item arrow icon color when active
 */
$menuitem-active-arrow-icon-color: dynamic($menuitem-active-icon-color);
 
/**
 * @var {color}
 * Menu Item arrow icon color when disabled
 */
$menuitem-disabled-arrow-icon-color: dynamic($menuitem-disabled-icon-color);
 
/**
 * @var {number}
 * Menu Item arrow icon size
 */
$menuitem-arrow-icon-size: dynamic($menuitem-icon-size);
 
/**
 * @var {number}
 * Menu Item arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-arrow-icon-size-big: dynamic($menuitem-icon-size-big);
 
/**
 * @var {number}
 * Menu Item arrow icon font-size
 */
$menuitem-arrow-icon-font-size: dynamic(null);
 
/**
 * @var {number}
 * Menu Item arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-arrow-icon-font-size-big: dynamic(null);
 
/**
 * @var {number/list}
 * Menu Item arrow icon margin
 */
$menuitem-arrow-icon-margin: dynamic(0 7px);
 
/**
 * @var {number/list}
 * Menu Item arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menuitem-arrow-icon-margin-big: dynamic(0 10px);
 
/**
 * Creates a visual theme for a Menu Item.
 *
 * @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=menuitem] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Menu Item text color
 *
 * @param {color} $active-color
 * Menu Item text color when active
 *
 * @param {color} $disabled-color
 * Menu Item text color when disabled
 *
 * @param {color} $background-color
 * Menu Item background-color
 *
 * @param {color} $active-background-color
 * Menu Item background-color when active
 *
 * @param {color} $disabled-background-color
 * Menu Item background-color when disabled
 *
 * @param {string/number} $font-weight
 * Menu Item font-weight
 *
 * @param {number} $font-size
 * Menu Item font-size
 *
 * @param {number} $font-size-big
 * Menu Item font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Menu Item font-family
 *
 * @param {number} $height
 * Menu Item height
 *
 * @param {number} $height-big
 * Menu Item height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $cursor
 * Menu Item cursor
 *
 * @param {string} $disabled-cursor
 * Menu Item cursor when disabled
 *
 * @param {number} $focused-outline-width
 * Menu item outline-width when focused
 *
 * @param {string} $focused-outline-style
 * Menu item outline-style when focused
 *
 * @param {color} $focused-outline-color
 * Menu item outline-color when focused
 *
 * @param {color} $focused-outline-offset
 * Menu item outline-offset when focused
 *
 * @param {number} $disabled-opacity
 * The opacity of disabled {@link Ext.menu.Item Menu Items}
 *
 * @param {color} $icon-color
 * Menu Item icon color
 *
 * @param {color} $active-icon-color
 * Menu Item icon color when active
 *
 * @param {color} $disabled-icon-color
 * Menu Item icon color when disabled
 *
 * @param {number} $icon-size
 * Menu Item icon size
 *
 * @param {number} $icon-size-big
 * Menu Item icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Menu Item icon font-size
 *
 * @param {number} $icon-font-size-big
 * Menu Item icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $arrow-icon
 * Menu Item arrow icon
 *
 * @param {color} $arrow-icon-color
 * Menu Item arrow icon color
 *
 * @param {color} $active-arrow-icon-color
 * Menu Item arrow icon color when active
 *
 * @param {color} $disabled-arrow-icon-color
 * Menu Item arrow icon color when disabled
 *
 * @param {number} $arrow-icon-size
 * Menu Item arrow icon size
 *
 * @param {number} $arrow-icon-size-big
 * Menu Item arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $arrow-icon-font-size
 * Menu Item arrow icon font-size
 *
 * @param {number} $arrow-icon-font-size-big
 * Menu Item arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $arrow-icon-margin
 * Menu Item arrow icon margin
 *
 * @param {number/list} $arrow-icon-margin-big
 * Menu Item arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin menuitem-ui(
    $ui: null,
    $xtype: menuitem,
    $color: null,
    $active-color: null,
    $disabled-color: null,
    $background-color: null,
    $active-background-color: null,
    $disabled-background-color: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $font-family: null,
    $height: null,
    $height-big: null,
    $cursor: null,
    $disabled-cursor: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $disabled-opacity: null,
    $icon-color: null,
    $active-icon-color: null,
    $disabled-icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $arrow-icon: null,
    $arrow-icon-color: null,
    $active-arrow-icon-color: null,
    $disabled-arrow-icon-color: null,
    $arrow-icon-size: null,
    $arrow-icon-size-big: null,
    $arrow-icon-font-size: null,
    $arrow-icon-font-size-big: null,
    $arrow-icon-margin: null,
    $arrow-icon-margin-big: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}body-el {
            // These properties go on the body el so as to not affect the menu item's 
            // "separator" 
            color: $color;
            @include font($font-weight: $font-weight, $font-size: $font-size, $font-family: $font-family);
            background-color: $background-color;
            height: $height;
            cursor: $cursor;
 
            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $font-size-big;
                    height: $height-big;
                }
            }
        }
 
        .#{$prefix}icon-el {
            @include icon( 
                $color: $icon-color, 
                $size: $icon-size, 
                $size-big: $icon-size-big, 
                $font-size: $icon-font-size, 
                $font-size-big: $icon-font-size-big 
            );
        }
 
        .#{$prefix}arrow-el {
            margin: $arrow-icon-margin;
 
            @include icon( 
                $icon: $arrow-icon, 
                $color: $arrow-icon-color, 
                $size: $arrow-icon-size, 
                $size-big: $arrow-icon-size-big, 
                $font-size: $arrow-icon-font-size, 
                $font-size-big: $arrow-icon-font-size-big 
            );
 
            @if $enable-big {
                .#{$prefix}big & {
                    margin: $arrow-icon-margin-big;
                }
            }
        }
 
        &.#{$prefix}active {
            .#{$prefix}body-el {
                color: $active-color;
                background-color: $active-background-color;
            }
 
            .#{$prefix}icon-el {
                color: $active-icon-color;
            }
 
            .#{$prefix}arrow-el {
                color: $active-arrow-icon-color;
            }
        }
 
        &.#{$prefix}disabled {
            .#{$prefix}body-el {
                color: $disabled-color;
                background-color: $disabled-background-color;
                cursor: $disabled-cursor;
            }
 
            // disabled opacity is applied to the individual child els of the body to 
            // avoid affecting the focus outline pseudo el 
            .#{$prefix}text-el {
                opacity: $disabled-opacity;
            }
 
            .#{$prefix}icon-el {
                color: $disabled-icon-color;
                opacity: $disabled-opacity;
            }
 
            .#{$prefix}arrow-el {
                color: $disabled-arrow-icon-color;
                opacity: $disabled-opacity;
            }
        }
 
        &.#{$prefix}focused .#{$prefix}body-el {
            .#{$prefix}keyboard-mode & {
                @include outline($focused-outline-width, $focused-outline-style, $focused-outline-color, $focused-outline-offset);
            }
        }
    }
}