@import './base.less';

.@{css-prefix} {
  &.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: @base-font-size;
    background-color: #ffffff;
    .user-select(none);
    z-index: 5;

    .item {
      //display: flex;
      //flex: 0 0 auto;
      line-height: 1em;
      .padding;
      margin: 0;
      vertical-align: middle;
      text-align: left;
      font-weight: 400;
      color: @base-font-color;
      white-space: nowrap;
      cursor: pointer;
      -webkit-transition: all .3s;
      transition: all .3s;
  
      &:not(.header):not(.submenu):hover {
        background: @hover-background-color;
      }
      &.active, &.active:not(.header):not(.submenu):hover {
        background: @hover-background-color;
        //background: @active-background-color;
        //color: @active-color;
        // font-weight: bold;
      }
  
      .disabled;
  
      > i.expand {
        float: right;
      }
    }

    .optgroup {
      .header {
        .item;
        // padding-left: @padding-horizontal/2;
        color: lighten(@base-font-color, 40%)!important;
      }
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    }

    &.vertical {
      // max-height: 264px;
      .box-shadow;
      .border;

      > .item {
        border-top: 1px solid @menu-item-border-color;
        // min-width: @menu-min-width;

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

    &.horizontal {
      display: flex;
      border-bottom: @border-style;

      > .item {
        position: relative;
        float: left;
        border: 0;
        border-bottom: 3px solid transparent;
        z-index: 10;

        &:hover, &.active {
          border-bottom: 3px solid @primary-color;
        }
      }
    }

    &.inline {
      .item {
        border-top: none;
        border-right: 3px solid @border-color;

        &.active {
          border-right-color: @primary-color;
        }
      }

    }

    &.compact {
      display: inline-flex;
      vertical-align: middle;
    }

    // size
    .font-sizes;
  }
}