    // private
    $menu-icon-separator-indent: before($menu-item-icon-horizontal-spacing) + $menu-item-icon-size + after($menu-item-icon-horizontal-spacing);
    // private
    $menu-item-indent: $menu-icon-separator-indent + $menu-separator-size + before($menu-item-text-horizontal-spacing);
    // private
    $menu-item-indent-no-separator: before($menu-item-icon-horizontal-spacing) + $menu-item-icon-size + max(after($menu-item-icon-horizontal-spacing), before($menu-item-text-horizontal-spacing));
    // private
    $menu-item-indent-right-icon: $menu-icon-separator-indent + before($menu-item-text-horizontal-spacing);
    // private
    $menu-item-indent-right-arrow: $menu-item-arrow-width + before($menu-item-arrow-horizontal-spacing) + after($menu-item-arrow-horizontal-spacing) + after($menu-item-text-horizontal-spacing);
    // private
    $menu-item-icon-top: round(($menu-item-height - vertical($menu-item-border-width) - $menu-item-icon-size) / 2) + $menu-item-icon-vertical-offset !default;

    @if not is-null($menu-border-width) and $menu-border-width != 0 {
        .#{$prefix}menu {
            // if $menu-border-width is null, we will inherit body border from Panel
            border-style: $menu-border-style;
            border-width: $menu-border-width;
            border-color: $menu-border-color;
        }
    }
    .#{$prefix}menu-body {
        background: $menu-background-color;
        padding: $menu-padding;
    }

    .#{$prefix}menu-icon-separator {
        left: $menu-icon-separator-indent;
        border-left: solid 1px $menu-separator-border-color;
        background-color: $menu-separator-background-color;
        width: $menu-separator-size;
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}menu .#{$prefix}menu-icon-separator {
            left: auto;
            right: $menu-icon-separator-indent;
        }
    }

    .#{$prefix}menu-item {
        // Inactive menu items have padding in place of the active border width.
        // When active, they get their border added, but padding set to zero.
        // So that there's no border occluding the Menu when an item is inactive.
        // TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
        @if $menu-item-border-width != 0 {
            padding: $menu-item-border-width;
        }
        cursor: $menu-item-cursor;
    }

    .#{$prefix}menu-item-link,
    .#{$prefix}menu-item-cmp {
        margin: 0 after($menu-item-text-horizontal-spacing) 0 before($menu-item-text-horizontal-spacing);
    }

    .#{$prefix}menu-item-indent {
        margin-left: $menu-item-indent;
    }

    .#{$prefix}menu-item-indent-no-separator {
        margin-left: $menu-item-indent-no-separator;
    }

    .#{$prefix}menu-item-indent-right-icon {
        margin-right: $menu-item-indent-right-icon;
    }

    .#{$prefix}menu-item-indent-right-arrow {
        margin-right: $menu-item-indent-right-arrow;
    }

    @if $include-rtl {
        .#{$prefix}rtl {
            &.#{$prefix}menu-item-link,
            &.#{$prefix}menu-item-cmp {
                margin: 0 before($menu-item-text-horizontal-spacing) 0 after($menu-item-text-horizontal-spacing);
            }

            &.#{$prefix}menu-item-indent {
                margin-right: $menu-item-indent;
            }

            &.#{$prefix}menu-item-indent-no-separator {
                margin-right: $menu-item-indent-no-separator;
            }

            &.#{$prefix}menu-item-indent-right-icon {
                margin-left: $menu-item-indent-right-icon;
            }

            &.#{$prefix}menu-item-indent-right-arrow {
                margin-left: $menu-item-indent-right-arrow;
            }
        }
    }

    .#{$prefix}menu-item-active {
        @include background-gradient($menu-item-active-background-color, $menu-item-background-gradient);
        @if $menu-item-active-border-radius != 0 {
            @include border-radius($menu-item-active-border-radius);
        }

        @if $menu-item-border-width != 0 {
            border: $menu-item-border-width solid $menu-item-active-border-color;
            padding: 0;
        }

        // Background linear gradient
        @if $include-slicer-gradient {
            .#{$prefix}nlg & {
                background: $menu-item-active-background-color repeat-x left top;
                background-image: slicer-background-image(menu-item-link, 'menu/menu-item-active-bg');
            }
        }
    }

    $stretch: slicer-background-stretch(menu-item-link, bottom);

    .#{$prefix}menu-item-icon {
        width: $menu-item-icon-size;
        height: $menu-item-icon-size;
        top: $menu-item-icon-top;
        left: before($menu-item-icon-horizontal-spacing);
        background-position: $menu-item-icon-background-position;

        .#{$prefix}menu-item-active & {
            top: $menu-item-icon-top - top($menu-item-border-width);
            left: before($menu-item-icon-horizontal-spacing) - left($menu-item-border-width);
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}menu-item-icon {
            left: auto;
            right: before($menu-item-icon-horizontal-spacing);

            .#{$prefix}menu-item-active & {
                right: before($menu-item-icon-horizontal-spacing) - left($menu-item-border-width);
            }
        }
    }

    .#{$prefix}menu-item-glyph {
        font-size: $menu-item-icon-size;
        line-height: $menu-item-icon-size;
        color: $menu-glyph-color;

        @if $menu-glyph-opacity != 1 {
            // do not use the opacity mixin because we do not want IE's filter version of
            // opacity to be included.  We emulate the opacity setting in IE8m by mixing
            // the icon color into the background color. (see below)
            opacity: $menu-glyph-opacity;
        }
        @if $include-ie {
            // In IE8 and below when a glyph contains partially transparent pixels, we
            // can't apply an opacity filter to the glyph element, because IE8m will render
            // the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the menus's background-color.
            .#{$prefix}ie8m & {
                color: mix($menu-glyph-color, $menu-background-color, $menu-glyph-opacity * 100);
            }
        }
    }

    // For when an icon needs to be used in the right position where a submenu arrow usually goes.
    // eg: When a CheckItem needs an icon. The left icon position is a checkbox, so the icon is moved to the right.
    .#{$prefix}menu-item-icon-right {
        width: $menu-item-icon-size;
        height: $menu-item-icon-size;
        top: $menu-item-icon-top;
        right: after($menu-item-icon-horizontal-spacing);
        background-position: $menu-item-icon-background-position;

        .#{$prefix}menu-item-active & {
            top: $menu-item-icon-top - top($menu-item-border-width);
            right: after($menu-item-icon-horizontal-spacing) - right($menu-item-border-width);
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}menu-item-icon-right {
            right: auto;
            left: after($menu-item-icon-horizontal-spacing);

            .#{$prefix}menu-item-active & {
                left: after($menu-item-icon-horizontal-spacing) - right($menu-item-border-width);
            }
        }
    }

    .#{$prefix}menu-item-text {
        font: $menu-item-font-weight $menu-item-font-size $menu-item-font-family;
        line-height: $menu-item-height - vertical($menu-item-border-width) - abs($menu-item-text-vertical-offset);
        @if $menu-item-text-vertical-offset > 0 {
            padding-top: $menu-item-text-vertical-offset;
        } @else if $menu-item-text-vertical-offset < 0 {
            padding-bottom: $menu-item-text-vertical-offset;
        }
        color: $menu-text-color;
        cursor: $menu-item-cursor; // needed to override cursor:default set by x-unselectable
    }

    .#{$prefix}menu-item-checked {
        .#{$prefix}menu-item-checkbox {
            background-image: theme-background-image('menu/checked');
        }
        .#{$prefix}menu-group-icon {
            background-image: theme-background-image('menu/group-checked');
        }
    }

    .#{$prefix}menu-item-unchecked {
        .#{$prefix}menu-item-checkbox {
            background-image: theme-background-image('menu/unchecked');
        }
        .#{$prefix}menu-group-icon {
            background-image: none;
        }
    }

    .#{$prefix}menu-item-separator {
        height: $menu-separator-size;
        border-top: solid 1px $menu-separator-border-color;
        background-color: $menu-separator-background-color;
        margin: $menu-item-separator-margin;
        padding: 0;
    }

    .#{$prefix}menu-item-arrow {
        width: $menu-item-arrow-width;
        height: $menu-item-arrow-height;
        top: $menu-item-arrow-top;
        right: after($menu-item-arrow-horizontal-spacing);
        background-image: theme-background-image('menu/menu-parent');

        .#{$prefix}menu-item-active & {
            top: $menu-item-arrow-top - top($menu-item-border-width);
            right: after($menu-item-arrow-horizontal-spacing) - right($menu-item-border-width);
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}menu-item-arrow {
            left: after($menu-item-arrow-horizontal-spacing);
            right: auto;
            background-image: theme-background-image('menu/menu-parent-left');

            .#{$prefix}menu-item-active & {
                left: after($menu-item-arrow-horizontal-spacing) - right($menu-item-border-width);
                right: auto;
            }
        }
    }

    .#{$prefix}menu-item-disabled {
        @include opacity($menu-item-disabled-opacity);
    }

    @if $include-content-box {
      .#{$prefix}content-box {
            .#{$prefix}menu-icon-separator {
                width: $menu-separator-size - 1;
            }

            .#{$prefix}menu-item-separator {
                height: $menu-separator-size - 1;
            }
        }
    }

    @if $include-ie {
        .#{$prefix}ie {
            .#{$prefix}menu-item-disabled {
                .#{$prefix}menu-item-icon {
                    @include opacity($menu-item-disabled-opacity);
                }

                .#{$prefix}menu-item-text {
                    // IE opacity/cleartype bug workaround
                    background-color: transparent;
                }
            }
        }
    }

    @if $include-ext-form-labelable {
        // When Fields are added to Menus...
        .#{$prefix}menu-item .#{$prefix}form-item-label {
            font-size: $menu-item-font-size;
            color: $menu-text-color;
        }
    }

    .#{$prefix}menu-scroll-top {
        height: $menu-scroller-height;
        background-image: theme-background-image('menu/scroll-top');
    }
    .#{$prefix}menu-scroll-bottom {
        height: $menu-scroller-height;
        background-image: theme-background-image('menu/scroll-bottom');
    }

    .#{$prefix}menu-scroll-top, .#{$prefix}menu-scroll-bottom {
        @if $menu-scroller-opacity != 1 {
            @include opacity($menu-scroller-opacity);
        }
        @if $menu-scroller-opacity != 1 $menu-scroller-opacity-over != 1 $menu-scroller-opacity-pressed != 1 {
            // EXTJSIV-8846: partially transparent png images do not display correctly
            // in winXP/IE8m when the image element has a transparent background.
            // to fix this, we give the element the same background-color as the menu.
            background-color: $menu-background-color;
        }
    }

    @if $menu-scroller-opacity-over != 1 or $menu-scroller-opacity != 1 {
        .#{$prefix}menu-scroll-top-hover, .#{$prefix}menu-scroll-bottom-hover {
            @include opacity($menu-scroller-opacity-over);
        }
    }

    @if $menu-scroller-opacity-pressed != 1 or $menu-scroller-opacity != 1 {
        .#{$prefix}menu-scroll-top-pressed, .#{$prefix}menu-scroll-bottom-pressed {
            @include opacity($menu-scroller-opacity-pressed);
        }
    }

    @include x-slicer(menu-item-link);