$valo-menu-background-color: null !default;

@mixin valo-menu {

  $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%);
  $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness);
  $font-color: valo-font-color($bg, 0.5);

  .valo-menu {
    height: 100%;
    @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
    color: $font-color;
    font-size: round($v-font-size * 0.9);
    line-height: round($v-unit-size * 0.8);
    border-right: valo-border($color: $bg);
    white-space: nowrap;

    .valo-menu-part {
      border-left: valo-border($color: $bg, $strength: 0.6);
      height: 100%;
      padding-bottom: $v-unit-size;
      overflow: auto;

      &:first-child {
        border-left: none;
      }
    }

    .valo-menu-title,
    .valo-menu-subtitle,
    .valo-menu-item {
      display: block;
      line-height: inherit;
      white-space: nowrap;
      position: relative;

      .valo-menu-badge {
        position: absolute;
        right: round($v-unit-size/2);
      }
    }

    .valo-menu-title {
      line-height: 1.2;
      @include valo-gradient($color: $v-selection-color);
      $font-color: valo-font-color($v-selection-color, 1);
      color: $font-color;
      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
      padding: round($v-unit-size/3) round($v-unit-size/2);
      font-size: round($v-font-size * 0.9);
      border-bottom: valo-border($color: $v-selection-color);
      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));

      .v-menubar {
        background: transparent;
        border-color: first-color(valo-border($color: $v-selection-color));
        color: inherit;
        @include box-shadow(none);
        text-shadow: inherit;
      }

      .v-menubar-menuitem {
        background: transparent;
        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
        text-shadow: inherit;
        font-size: $v-font-size;
        border-color: inherit;
      }
    }

    .valo-menu-subtitle {
      color: valo-font-color($bg, 0.33);
      margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
      border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);

      .valo-menu-badge {
        color: mix(valo-font-color($bg), $v-selection-color);
      }
    }

    .valo-menu-item {
      outline: none;
      font-weight: $v-font-weight + 100;
      padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
      cursor: pointer;
      position: relative;
      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
      @include transition(background-color 300ms, color 60ms);

      $diff: color-luminance($bg) - color-luminance($v-selection-color);
      $active-color: $v-selection-color;
      @if abs($diff) < 30 {
        $active-color: lighten($v-selection-color, 10%);
      }

      .valo-menu-item-caption {
        vertical-align: middle;
        display: inline-block;
        width: 90%;
        max-width: 15em;
        padding-right: round($v-unit-size/2);
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &.selected {
        background: darken($bg, 3%);

        .v-icon {
          color: $active-color;
        }

        .valo-menu-badge {
          @include valo-gradient($color: $active-color);
          color: valo-font-color($active-color);
        }
      }

      &:hover,
      &.selected {
        color: valo-font-color($bg, 1);
      }

      // Font icons
      span.v-icon {
        min-width: 1em;
        margin-right: round($v-unit-size/2);
        text-align: center;
        vertical-align: middle;

        + span {
          margin-left: 0;
        }
      }

      .valo-menu-badge {
        background: lighten($bg, 5%);
        @include transition(background-color 300ms);
        line-height: 1;
        padding: round($v-unit-size/9) round($v-unit-size/6);
        min-width: round($v-font-size/1.5);
        text-align: center;
        top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
        border-radius: $v-border-radius;
      }
    }

    .valo-menu-part.large-icons {
      $bg: darken($bg, 4%);
      background-color: $bg;

      .valo-menu-item {
        font-size: $v-unit-size;
        line-height: 1;
        padding: round($v-unit-size/3);
        min-width: $v-unit-size * 2;
        max-width: $v-unit-size * 3;
        text-align: center;

        .valo-menu-item-caption {
          display: block;
          width: auto;
          margin: .3em 0 0;
          padding: 0;
          font-size: round($v-font-size * 0.7);
        }

        .v-icon {
          margin: 0;
        }

        span.v-icon {
          opacity: 0.8;
        }

        &.selected {
          background: darken($bg, 3%);

          .v-icon {
            opacity: 1;
          }

          .valo-menu-badge {
            border-color: darken($bg, 3%);
          }
        }

        .valo-menu-badge {
          padding-left: round($v-unit-size/9);
          padding-right: round($v-unit-size/9);
          top: round($v-unit-size/5);
          right: round($v-unit-size/5);
          border: 2px solid $bg;
        }
      }
    }

    .valo-menu-logo {
      display: block;
      overflow: hidden;
      width: round($v-unit-size * 1.2) !important;
      height: round($v-unit-size * 1.2);
      border-radius: $v-border-radius;
      text-align: center;
      @include valo-gradient($color: $v-selection-color);
      color: valo-font-color($v-selection-color, 1);
      font-size: round($v-unit-size/1.5);
      line-height: round($v-unit-size * 1.2);
      margin: round($v-unit-size/2) auto;
      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
    }
  }

}