@if (get("vaadin.element.menubar.status")) {
  .v-menubar {
    line-height: normal;
    height: auto;
    box-shadow: none;
    text-shadow: none;
    background: none;
    border: none;
    border-radius: size(get("border.radius"));

    &:focus {
      &::after {
        border: none;
        box-shadow: none;
      }
    }

    &-borderless {
      .v-menubar-menuitem {
        margin-right: 0;
      }
    }

    .v-menubar-menuitem {
      @extend %button;
      @extend %customize-fill-basic !optional;

      border-radius: 0;
      background-image: none;
      border-right: 0 !important;

      &:first-child {
        border-radius: size(2px) 0 0 size(2px);
      }

      &:last-child {
        border-radius: 0 size(2px) size(2px) 0;
      }

      .v-menubar-menuitem-caption {
        height: auto;
      }
    }

    .v-menubar-menuitem-icon-only {
      justify-content: center;
    }

    .v-menubar-menuitem-selected {
      background-image: none;
      box-shadow: none;
    }

    /* ################## ButtonGroup ################## */
    .v-menubar-menuitem:not(:first-child) {
      border-left-color: var(--secondary-700);
    }

    @each $type in get("type") {
      @if ($type!=fill) {
        &.#{$type} {
          .v-menubar-menuitem {
            @extend %button-#{$type};
            @extend %customize-#{$type}-basic !optional;

            &:not(:first-child) {
              border-left-color: if($type==outline, var(--light-600), transparent);
            }
          }
        }
      }

      @each $color, $value in get("color.list") {
        $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
        #{$selector} {
          .v-menubar-menuitem {
            @extend %extender-color-#{$type}-#{"" + $color};
            @extend %customize-#{$type}-#{"" + $color} !optional;

            @if ($type==fill) {
              &:not(:first-child) {
                border-left-color: var(--#{$color}-700);
              }
            }
          }
        }
      }
    }

    @each $size, $value in get("size") {
      &.#{$size} {
        .v-menubar-menuitem {
          @extend %size-#{$size};
          @extend %padding-button-#{$size};
        }
      }
    }
  }
}

.v-menubar-popup {
  border: size(1px) solid var(--primary);
  border-radius: size(get("border.radius"));
  background-image: none;
  text-shadow: none;
  box-shadow: 0 size(2px) size(15px) size(4px) rgba(var(--black-rgb), 0.1);
  padding: 0;
  color: var(#{get("font.color.name")}-#{get("font.color.value")});
  animation-duration: 0ms !important;

  .popupContent {
    .v-menubar-submenu {
      .v-menubar-menuitem {
        height: size(40px);
        line-height: size(40px);
        padding: 0 size(get("size.medium.icon-container"));
        font-size: size(get("size.small.font-size"));

        .v-menubar-menuitem-caption {
          &::before {
            margin-left: size(get("size.medium.icon-container") * -1);
            left: auto;
            width: size(get("size.medium.height"));
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &::after {
            line-height: size(40px);
          }
        }
      }

      .v-menubar-menuitem-selected {
        background-color: var(--primary-500);
        background-image: none;
        text-shadow: none;
        color: var(--white);
        border-radius: 0;
      }

      .v-menubar-separator {
        margin: 0;
      }
    }
  }

  ~ .v-menubar-popup {
    margin-top: size(-1px) !important;
    margin-left: 0 !important;
    border-radius: 0 size(get("border.radius")) size(get("border.radius")) 0;
  }
}
