.menu{
  @include list-unstyled;
  .menu-item{
    cursor: pointer;
    .menu-item-title-box{
      .menu-item-title{

      }
      .menu-item-icon{

      }
    }
  }
  .submenu{
    .submenu-title-box{
      .menu-item-title{

      }
      .menu-item-icon{

      }
    }
  }
  &.horizontal{
    height: $component-size-larger;
    line-height: $component-size-larger;
    .menu-item{
      padding: 0 $content-padding*2;
      &.active{
        color:$primary-color;
      }
      .menu-item-title-box{
        .menu-item-title{
          @include user-select-none;
          cursor: pointer;
        }
        .menu-item-icon{

        }
      }
    }
    .submenu{
      .submenu-title-box{
        .menu-item-title{

        }
        .menu-item-icon{

        }
      }
    }
  }
  &.vertical{
    .menu-item-title{
      @include flex-adapter;
      user-select: none;
      font-size: $font-size-large;
      color:$title-color;
      display: block;
    }
    .menu-item-icon{
      margin-right: $component-span;
      display: block;
      font-size: $font-size-larger;
    }
    .menu-item{
      user-select: none;
      &.selected{
        .menu-item-title-box{
          .menu-item-title{
            color:$primary-color;
          }
        }
      }
      .menu-item-title-box{
        height: $component-size-large;
        padding: 0 $content-padding;
        @include horizional-flex-align-center;
      }
    }
    .submenu{
      &.opened{
        &>.submenu-title-box{
          background: $background-color;
        }
      }
      .submenu-title-box{
        user-select: none;
        cursor: pointer;
        height: $component-size-large;
        padding: 0 $content-padding;
        @include horizional-flex-align-center;
        .menu-item-title{
        }
        .menu-item-icon{

        }
        .submenu-toggle-icon{
          display: block;
        }
      }
      .menu-item{
        .menu-item-title-box{
          .menu-item-title{
            font-size: $font-size;
          }
        }
      }
    }
    .menu-item{
      .menu-item-title-box{
        .menu-item-title{
          color:$sub-color;
        }
      }
    }
  }
}