.#{$prefix}menu {
  outline: none;
  border: none;
}

.#{$prefix}menu.#{$prefix}panel {
  padding: 0;
}

.#{$prefix}layer.#{$prefix}menu {
  border-style: $menu-border-style;
  border-width: $menu-border-width;
  border-color: $menu-border-color;
  @include border-radius($menu-border-radius);
  @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));
}

.#{$prefix}menu-body {
  background: $menu-background-color;
  padding: $menu-padding;
  border: none;
}

.#{$prefix}menu-item {
  white-space: nowrap;
  overflow: hidden;
  padding-right: 15px;

  .#{$prefix}form-item-label {
    color: $form-label-color;
  }
}

.#{$prefix}menu-item-active {
  .#{$prefix}menu-item-text {
    color: $menu-text-active-color;
  }

  background-color: $menu-item-active-background-color;
  @include background-image(linear-gradient($menu-item-active-background-color, darken($menu-item-active-background-color, 5%)));
  border-color: $menu-item-active-border-color;

  @if $menu-item-active-border-radius != 0 {
    @include border-radius($menu-item-active-border-radius);
  }

  a {
    text-decoration: none;
  }
}

// "Foreign" Components (such as form fields) put inside a Menu get this class.
.#{$prefix}menu-item-cmp {

  // Ensure labels are centered when in menus which enlarge the height of a Labelable Component
  .#{$prefix}field-label-cell {
    vertical-align: top;
  }
  @if not is-null($menu-component-margin) and $menu-component-margin != 0 {
    margin: $menu-component-margin;
  }
}

.#{$prefix}menu-icon-separator {
  position: absolute;
  top: 0px;
  z-index: 0;
  height: 100%;
  overflow: hidden;
  .#{$prefix}menu-plain & {
    display: none;
  }
}

.#{$prefix}menu-item-link {
  text-decoration: none;
  outline: 0;
  // display:block is required to make the menu item stretch to fill its container so that
  // when using href, the entire menu item is clickable.
  // If we ever consider going back to inline or inline-block, please remember inline
  // will not work because it allows multi line menu items wrap into the padding area
  // (icon space) in Webkit
  display: block;

}

.#{$prefix}menu-item-text {
  display: inline-block;
  @if $include-ie {
    zoom: 1;
  }
}

.#{$prefix}menu-item-icon,
.#{$prefix}menu-item-icon-right,
.#{$prefix}menu-item-arrow {
  font-size: 0;
  position: absolute;
  text-align: center;
}

.dropdown-header.#{$prefix}menu-item-disabled {
  @include opacity(1);
  padding: 3px 15px;
}

.#{$prefix}component-link.#{$prefix}menu-item {
  .#{$prefix}menu-item-text,
  .#{$prefix}menu-item-glyph{
    color: $link-color;
  }
}

.#{$prefix}component-link.#{$prefix}menu-item-active {
  background-color: $menu-background-color;
  background-image: none;

  .#{$prefix}menu-item-text {
    text-decoration: underline;
  }
}

.#{$prefix}component-link-submenu.#{$prefix}menu-item {
  .#{$prefix}menu-item-text {
    color: $link-color;
  }
}

.#{$prefix}component-link-submenu.#{$prefix}menu-item-active {
  background-color: $gray-lighter;
  background-image: none;
}
