@import './subMenu/style';

.violetMenu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  cursor: pointer;
  background: $menu-backgroundColor;
  border: $menu-border-width solid $menu-border-color;
  box-shadow: $menu-box-shadow;
  transition: $menu-transition;

  &--vertical {
    flex-direction: column;
    .violetMenu__menuItem {
      border-left: $menu-item-active-border-width solid transparent;
      border-bottom: 0;
      &--activeAsfirstLevelItem {
        border-left: $menu-item-active-border-width solid
          $menu-item-active-color;
      }
    }
  }

  &__menuItem {
    padding: $menu-item-padding-y $menu-item-padding-x;
    border-bottom: $menu-item-active-border-width solid transparent;
    @include dropdownItemStyle;

    &--disabled {
      color: $menu-item-disabled-color;
      cursor: $menu-item-disabled-cursor;
      &:hover {
        color: $menu-item-disabled-color;
        background: #fff;
      }
      &:active {
        opacity: 1;
        color: $menu-item-disabled-color;
      }
    }
    &--active {
      font-weight: bold;
      color: $menu-item-active-color;
    }
    &--activeAsfirstLevelItem {
      border-bottom: $menu-item-active-border-width solid
        $menu-item-active-color;
    }
  }
}
