@mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {

  .#{$primary-stylename} {
    @include valo-button-static-style($states: normal focus disabled, $vertical-centering: false);
    @include valo-menubar-style;
  }

  .#{$primary-stylename}:active:after {
    background: transparent;
  }

  .#{$primary-stylename} > .#{$primary-stylename}-menuitem {
    @include valo-menubar-menuitem-style;
  }

  .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked {
    @include valo-menubar-menuitem-checked-style;
  }

  .v-disabled > .#{$primary-stylename}-menuitem,
  .#{$primary-stylename} > .#{$primary-stylename}-menuitem-disabled {
    cursor: default;

    &:before {
      display: none;
    }
  }

  .#{$primary-stylename}-menuitem-disabled {
    @include opacity($v-disabled-opacity);
  }

  .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected {
    @include valo-button-style($states: normal, $background-color: $v-selection-color, $border-radius: 0, $shadow: null, $unit-size: null, $font-weight: null);
    border-top-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
    z-index: 2;

    &:hover:before {
      background: none;
    }
  }

  .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator {
    display: none;

    + .#{$primary-stylename}-menuitem-caption:after {
      font-family: FontAwesome;
      content: "\f078";
      font-size: 0.7em;
      vertical-align: .15em;
      margin: 0 -.2em 0 .5em;
      // IE filters are not supported on pseudo elements
      opacity: .5;
    }

    + .#{$primary-stylename}-menuitem-caption:empty:after {
      margin-left: -.2em;
    }
  }

  .#{$primary-stylename}-popup {
    @include valo-menubar-popup-style($primary-stylename);

    &.#{$primary-stylename}-popup-animate-out {
      @include animation(none);
    }
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-small {
      @include valo-menubar-style($background-color: null, $unit-size: $v-unit-size--small);
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-borderless {
      @include valo-menubar-borderless-style;
    }
  }

}




@mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) {
  @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size);
  padding: 0;
  text-align: left;

  @if $unit-size {
    line-height: $unit-size - first-number($v-border) * 2 - 1px;

    > .#{$primary-stylename}-menuitem {
      padding: 0 round($unit-size/2.6);

      &[class*="-icon-only"] {
        width: $unit-size;
      }
    }
  }
}




@mixin valo-menubar-menuitem-style {
  $border-width: first-number($v-border);
  position: relative;
  z-index: 1;
  display: inline-block;
  @include box-sizing(border-box);
  @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
  background: transparent;
  @include box-shadow(none);
  border-width: 0 $border-width 0 0;
  border-color: inherit;
  height: 100%;
  line-height: inherit;
  vertical-align: top;
  text-align: center;

  @if $border-width == 0 {
    margin-right: 1px;
  }

  $br: $v-border-radius - $border-width - 1px;
  &:first-child {
    border-left-width: 0;
    border-radius: $br 0 0 $br;
  }

  &:last-child {
    border-radius: 0 $br $br 0;
    margin-right: -$border-width;
  }

  &:first-child:last-child {
    border-radius: $br;
    border-right-width: 0;
    margin-right: 0;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
  }

  @if $v-hover-styles-enabled {
    &:hover {
      // IE needs some nudging to show the :before element
      zoom: 1;

      &:before {
        @include valo-button-hover-style;
        border: none;
      }
    }
  }

  &:active:before {
    @include valo-button-active-style;
  }

  $margin-width: ceil($v-unit-size/2.4/5);
  .v-icon {
    margin: 0 $margin-width 0 #{-$margin-width};
    cursor: inherit;
  }

  &[class*="-icon-only"] {
    width: $v-unit-size;
    padding: 0;

    .v-icon {
      margin: 0;
    }
  }
}





@mixin valo-menubar-popup-style ($primary-stylename: v-menubar) {
  @include valo-selection-overlay-style;

  margin: ceil($v-unit-size/8) 0 0 1px !important;

  .#{$primary-stylename}-submenu {
    outline: none;
  }

  .#{$primary-stylename}-menuitem {
    display: block;
    @include valo-selection-item-style;
    padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon
    padding-right: $v-unit-size;
    position: relative;
  }

  .#{$primary-stylename}-submenu-indicator {
    display: none;

    + .#{$primary-stylename}-menuitem-caption:after {
      position: absolute;
      right: $v-selection-item-padding-horizontal;
      @include valo-menubar-submenu-indicator-style;
    }
  }

  .#{$primary-stylename}-menuitem-selected {
    @include valo-selection-item-selected-style;
  }

  .#{$primary-stylename}-separator {
    display: block;
    margin: $v-selection-overlay-padding-vertical 0;
    height: 0;
    overflow: hidden;
    border-bottom: valo-border($color: $v-overlay-background-color, $strength: 0.5);
    @if first-number($v-border) == 0 {
      border-bottom-width: 1px;
    }
  }

  [class*="checked"] .#{$primary-stylename}-menuitem-caption:before {
    @include valo-menubar-checked-icon-style;
    position: absolute;
    left: $v-selection-item-padding-horizontal;
  }

  [class*="unchecked"] .#{$primary-stylename}-menuitem-caption:before {
    content: "";
  }

  [class*="disabled"] {
    cursor: default;
  }
}



@mixin valo-menubar-submenu-indicator-style {
  font-family: FontAwesome;
  content: "\f054";
  line-height: $v-selection-item-height + 2px;
}

@mixin valo-menubar-checked-icon-style {
  content: "\f00c";
  font-family: FontAwesome;
}


@mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) {
  $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
  @include box-shadow(none);
  @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top);
  color: valo-font-color($background-color, 0.9);
}

@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
  .#{$primary-stylename}-menuitem-checked {
    @include valo-menubar-menuitem-checked-style($background-color: $background-color);
  }
}


@mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
  border: none;
  border-radius: 0;
  padding: first-number($v-border);
  @include box-shadow(none);
  background: transparent;
  color: inherit;

  &:focus:after {
    display: none;
  }

  .#{$primary-stylename}-menuitem {
    @include box-shadow(none);
    border: none;
    margin-right: max(1px, first-number($v-border));
    border-radius: $v-border-radius;
    color: $v-selection-color;
    text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px);
    padding: 0 round($v-unit-size/3);

    @if $v-animations-enabled {
      @include transition(color 140ms);
    }

    &:first-child,
    &:last-child,
    &:first-child:last-child {
      border-radius: $v-border-radius;
    }

    &:before {
      content: none;
    }

    &:hover {
      color: lighten($v-selection-color, 10%);
    }

    &:active {
      color: inherit;
    }
  }

  .#{$primary-stylename}-menuitem-checked,
  .#{$primary-stylename}-menuitem-checked:first-child {
    border: valo-border();
    color: $v-selection-color;

    .#{$primary-stylename}-menuitem-caption {
      position: relative;
      top: first-number($v-border)*-1;
    }
  }

  .#{$primary-stylename}-menuitem-selected {
    $font-color: valo-font-color($v-selection-color, 0.9);
    color: $font-color;
    text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color);

    &:hover {
      color: $font-color;
    }
  }

  .#{$primary-stylename}-menuitem-disabled,
  .#{$primary-stylename}-menuitem-disabled:hover {
    color: inherit;
  }
}