@import "./src/common/var.less";
@import "./src/common/mixins.less";

@menu-css-prefix: ~"@{css-prefix}menu";
@submenu-css-prefix: ~"@{css-prefix}submenu";

.menu-size(@width; @height; @lineHeight; @fontSize; @group-title-height; @group-title-line-height; @group-title-padding-top; @group-title-font-size) {
  .@{menu-css-prefix}-item {
    &-title {
      &-arrow {
        height: @height;
        line-height: @lineHeight;
        font-size: @fontSize;
      }
      &-prompt {
        line-height: @lineHeight;
      }
      &-arrow {
        font-size: @fontSize;
      }
      &-inner {
        &-icon {
          width: @width;
          height: @height;
          line-height: @lineHeight;
          font-size: @fontSize;
        }
        &-text {
          height: @height;
          line-height: @lineHeight;
          font-size: @fontSize;
        }
      }
    }

    &-group {
      &-title {
        height: @group-title-height;
        line-height: @group-title-line-height;
        padding-top: @group-title-padding-top;
        font-size: @group-title-font-size;
      }
    }
  }

  .@{menu-css-prefix}-vertical-line {
    height: @height;
  }
}

.@{menu-css-prefix}-external {
  position: relative;

  &.is-collapse {
    transition: width .3s cubic-bezier(0, 0, .2, 1);
  }
  &.is-accordion {
    transition: height .3s cubic-bezier(0, 0, .2, 1);
  }
  &.is-accordion-collapse {
    transition: height .3s cubic-bezier(0, 0, .2, 1), width .3s cubic-bezier(0, 0, .2, 1);
  }

  &.width-auto {
    width: 100%;
  }
  &.height-auto {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  &[x-placement^="top"],
  &[x-placement^="top-start"],
  &[x-placement^="top-end"] {
    margin-bottom: 5px;
  }
  &[x-placement^="bottom"],
  &[x-placement^="bottom-start"],
  &[x-placement^="bottom-end"] {
    margin-top: 5px;
  }
  &[x-placement^="left"],
  &[x-placement^="left-start"],
  &[x-placement^="left-end"] {
    margin-right: 5px;
  }
  &[x-placement^="right"],
  &[x-placement^="right-start"],
  &[x-placement^="right-end"] {
    margin-left: 5px;
  }
}

.@{menu-css-prefix} {
  //background-color: @menu-bg;
  position: relative;

  width: 100%;
  .mixin-default;

  &.is-full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }

  & ul {
    margin: 0;
    padding: 0;
  }

  &:hover {
    .@{menu-css-prefix}-vertical-line {
      transform: scaleX(1);
    }
    .@{menu-css-prefix}-horizontal-line {
      transform: scaleX(1);
    }
  }

  &-vertical-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 50px;
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    transform: scaleX(0);
    background-color: @menu-vertical-line;
  }

  &-horizontal-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    transform: scaleX(0);
    background-color: @menu-vertical-line;
  }

  &-scroll {
    .mixin-scrollbar;

    &.all {
      .mixin-all-scroll;
    }

    &.vertical {
      .mixin-v-scroll;
    }

    &.horizontal {
      .mixin-h-scroll;
    }
  }

  &-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;

    &:active {
      opacity: .8;
    }

    &:hover {
      background-color: @menu-item-hover-bg;
    }

    &-up {
      top: 0;
    }

    &-down {
      bottom: 0;
    }

    &.is-disabled {
      color: @menu-item-fc-disabled-color;
      cursor: not-allowed;

      &:hover {
        background-color: transparent;
      }

      &:active {
        opacity: 1;
      }
    }
  }

  &-transition {
    transition: .3s all ease-in-out;
  }

  &-size {
    &-large {
      .menu-size(
        @menu-size-large-width; @menu-size-large-height; @menu-size-large-line-height; @menu-size-large-font-size; @menu-size-group-title-large-height; @menu-size-group-title-large-line-height; @menu-size-group-title-large-padding-top; @menu-size-group-title-large-font-size;
      );
    }

    &-small {
      .menu-size(
        @menu-size-small-width; @menu-size-small-height; @menu-size-small-line-height; @menu-size-small-font-size; @menu-size-group-title-small-height; @menu-size-group-title-small-line-height; @menu-size-group-title-small-padding-top; @menu-size-group-title-small-font-size;
      );
    }

    &-mini {
      .menu-size(
        @menu-size-mini-width; @menu-size-mini-height; @menu-size-mini-line-height; @menu-size-mini-font-size; @menu-size-group-title-mini-height; @menu-size-group-title-mini-line-height; @menu-size-group-title-mini-padding-top; @menu-size-group-title-mini-font-size;
      );
    }
  }
}

.@{menu-css-prefix}-item {
  font-size: @menu-item-font-size;
  list-style: none;
  transition: border-color .3s, background-color .3s, color .3s;
  color: @menu-text-color;
  display: block;
  position: relative;
  .mixin-border-box;
  .mixin-select-none;
  background-color: @menu-bg;

  &.is-horizontal {
    float: left;
    //background-color: @menu-bg;

    .@{menu-css-prefix}-item-title {
      &-inner{
        float: left;
        &.is-h-left {
          margin-left: 15px;
        }

        &.is-h-right {
          margin-right: 15px;
        }
      }
    }

    .@{menu-css-prefix}-item-title-arrow{
      &.is-h-arrow {
        margin-right: 6px;
      }
    }
    //&.is-arrow {
    //  .@{menu-css-prefix}-item-title-inner {
    //    margin-right: 23px;
    //    padding: 0 0 0 15px;
    //  }
    //  .@{menu-css-prefix}-item-title {
    //    padding-right: 12px;
    //  }
    //  .@{menu-css-prefix}-item-title-arrow {
    //    width: 20px;
    //    margin-left: 3px;
    //  }
    //  .@{menu-css-prefix}-item-title-inner-icon {
    //    width: 25px;
    //    text-align: left;
    //  }
    //}
  }

  &-title {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    .mixin-border-box;

    &.is-hover {
      background-color: @menu-item-hover-bg;
    }

    &.is-active {
      color: @menu-active-text-color;
      background-color: @menu-item-hover-bg;

      &-arrow {
        color: @menu-active-text-color;
      }

      &:hover {
        background-color: @menu-active-text-bg;
      }
    }

    &.is-selected {
      color: @menu-title-selected-color;
      background-color: @menu-title-selected-bg;

      &:hover {
        background-color: @menu-title-selected-bg;
      }

      &-arrow,
      &-quick {
        color: @menu-title-selected-color;
      }
    }

    &.is-disabled {
      color: @menu-item-fc-disabled-color;
      cursor: not-allowed;

      &.is-selected,
      &.is-active,
      &:hover {
        background-color: transparent;
      }

      .@{menu-css-prefix}-item-title-arrow,
      .@{menu-css-prefix}-item-title-quick {
        color: @menu-item-fc-disabled-color;
      }
    }

    &-inner {

      &.is-full {
        margin-right: 0;
      }

      &.is-quick {
        margin-right: 35%;
      }

      &-icon {
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      &-text {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        .mixin-border-box;
        .mixin-ellipsis;

        &.is-left {
          margin-left: 15px;
        }

        &.is-right {
          margin-right: 15px;
        }
      }
    }

    &-prompt {
      .mixin-ellipsis;
      .mixin-border-box;
      display: block;
      line-height: 50px;
      float: right;
      font-size: 10px;
      max-width: 35%;
      padding: 0 10px 0 5px;
      color: @menu-item-quick-color;
    }

    &-arrow {
      font-size: 12px;
      float: right;
      width: 30px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      vertical-align: middle;
      color: @menu-item-arrow-color;
      transition: all .3s;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);

      &.is-opened {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
      }
    }
  }

  &-group {
    position: relative;

    &.is-horizontal {
      float: left;
    }
    &-title {
      .mixin-h1-default;
      .mixin-ellipsis;
      font-size: 12px;
      height: 28px;
      line-height: 28px;
      padding-top: 10px;
      color: @menu-item-group-title-color;
      background-color: @menu-bg;
    }
    &-split-vertical {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 10;
      padding: 8px 3px;
      background-color: @menu-bg;

      & > em{
        display: block;
        width: 1px;
        background-color: @menu-border-color-split;
      }

      &-left-space {
        margin-left: 3px;
        padding-left: 4px;
      }
      &-right-space {
        margin-right: 3px;
        padding-right: 4px;
      }

      &.is-before-line {
        left: -3px;
      }
      &.is-after-line {
        right: -3px;
      }
    }

    &-split-horizontal {
      padding: 3px 8px;
      background-color: @menu-bg;

      & > em{
        display: block;
        height: 1px;
        line-height: 1px;
        font-size: 0;
        background-color: @menu-border-color-split;
      }
    }
  }
}

.@{menu-css-prefix}-take-up{
  height: 0;
  line-height: 0;
  font-size: 0;
}