// private
$menu-icon-separator-indent: left($menu-padding) + $menu-item-icon-size + ($menu-item-icon-horizontal-spacing * 2);
// private
$menu-item-indent: ($menu-icon-separator-indent + $menu-separator-size + $menu-item-text-horizontal-spacing);

@if $menu-border-width != null {
    .#{$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;
}

// Components used as menu items configured with "indent:true" are assigned a css class of x-menu-item-indent, unless
// the menu is configured with "plain: true"
.#{$prefix}menu-item-indent {
    margin-left: $menu-item-indent;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}menu-item-indent {
        margin-left: 0;
        margin-right: $menu-item-indent;
    }
}

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

    // When active, the border takes the place of padding so that a border can appear
    // without changing the overall size of the item.
    // TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
    @if $menu-item-border-width != 0 {
        border-width: $menu-item-border-width;
        border-style: solid;
        padding: 0;
    }
}

.#{$prefix}menu-item-link {
    line-height: $menu-item-height - vertical($menu-item-border-width);
    padding: 0 $menu-item-trailing-padding 0 $menu-item-indent;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}menu-item-link {
        padding: 0 $menu-item-indent 0 $menu-item-trailing-padding;
    }
}

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

// Stop the addition of bordering to active items shifting the menu icon in bad IEs (and FF)
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
@if $menu-item-border-width != 0 {
    .#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}menu-item-icon,
    .#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}menu-item-icon,
    .#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}menu-item-icon {
        top: ($menu-item-icon-top - $menu-item-border-width);
        left: ($menu-item-icon-horizontal-spacing - $menu-item-border-width);
    }
}

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

    // Stop the addition of bordering to active items shifting the menu icon in bad IEs (and FF)
    // TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
    @if $menu-item-border-width != 0 {
        .#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon,
        .#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon,
        .#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon {
            left: auto;
            right: ($menu-item-icon-horizontal-spacing - $menu-item-border-width);
        }
    }
}

// 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: round(($menu-item-height - vertical($menu-item-border-width) - $menu-item-icon-size) / 2);
    right: $menu-item-icon-horizontal-spacing;
    background-position: $menu-item-icon-background-position;
}

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

.#{$prefix}menu-item-text {
    font-size: $menu-item-font-size;
    color: $menu-text-color;
    cursor: $menu-item-cursor; // needed to override cursor:default set by x-unselectable
}

.#{$prefix}menu-item-checked {
    .#{$prefix}menu-item-icon, .#{$prefix}menu-item-icon-right {
        background-image: theme-background-image($menu-icon-checked);
    }
    .#{$prefix}menu-group-icon {
        background-image: theme-background-image($menu-icon-group-checked);
    }
}

.#{$prefix}menu-item-unchecked {
    .#{$prefix}menu-item-icon, .#{$prefix}menu-item-icon-right {
        background-image: theme-background-image($menu-icon-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: $menu-item-arrow-horizontal-spacing;
    background-image: theme-background-image($menu-icon-arrow);
}

// Stop the addition of bordering to active items shifting the arrow in bad IEs (and FF)
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
@if $menu-item-border-width != 0 {
    .#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow,
    .#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow,
    .#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow {
        top: ($menu-item-arrow-top - $menu-item-border-width);
        right: ($menu-item-arrow-horizontal-spacing - $menu-item-border-width);
    }
}

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

    // Stop the addition of bordering to active items shifting the arrow in bad IEs (and FF)
    // TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
    @if $menu-item-border-width != 0 {
        .#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow,
        .#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow,
        .#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow {
            right: auto;
            left: ($menu-item-arrow-horizontal-spacing - $menu-item-border-width);
        }
    }
}

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

@if $include-ie {
  .#{$prefix}strict .#{$prefix}ie7m {
        .#{$prefix}menu-icon-separator {
            width: $menu-separator-size - 1;
        }

        .#{$prefix}menu-item-separator {
            height: $menu-separator-size - 1;
        }
    }
    
    .#{$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 not $supports-gradients or $compile-all {
    .#{$prefix}nlg {
        .#{$prefix}menu-item-active .#{$prefix}menu-item-link {
            background: $menu-item-active-background-color repeat-x left top;
            background-image: slicer-background-image(menu-item-link, 'menu/menu-item-active-bg');
        }
    }
}

// TODO: what is this for?
.#{$prefix}menu-date-item {
    border-color: #99BBE8;
}

@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 {
    background-image: theme-background-image('layout/mini-top');
    height: $menu-scroller-height;
}
.#{$prefix}menu-scroll-bottom {
    background-image: theme-background-image('layout/mini-bottom');
    height: $menu-scroller-height;
}

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