@import './token.less';

@menu-prefix-cls: ~'@{kd-prefix}-menu';
@menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
@submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';

// 菜单默认样式
.menu() {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: @menu-min-width;
  max-width: @menu-max-width;
  background-color: @menu-color-background;
  color: @menu-sub-color;
}

.menuItem(@positionStyle: static) {
  position: @positionStyle;
  cursor: pointer;

  &-title {
    display: flex;
    align-items: center;
    height: 50px;
    .ellipsis();

    & > span {
      .ellipsis();
      opacity: 1;
      transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
    }
  }

  &-collapsed {
    padding: 0;
    margin: 0;
    text-align: center;

    .@{menuitem-prefix-cls}-title,
    .@{submenu-prefix-cls}-title {
      // display: block;
      & > p {
        margin: 0 auto;
      }

      & > span {
        opacity: 0;
        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
      }
    }
  }

  &-icon {
    margin: 0 15px;
    font-size: @menu-icon-font-size;
  }

  &-disabled {
    cursor: not-allowed;
    color: @menu-color-disabled;
    background-color: @menu-color-background;
  }

  &-arrow {
    margin-left: auto;
    font-size: 16px;

    &-up {
      transform: rotate(180deg);
      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
    }

    &-down {
      transform: rotate(0deg);
      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
    }
  }
}

.menu-hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
  animation-delay: 0.1s;
  transition: opacity, visibility;
  transition-duration: calc(@menu-motion-duration - 0.1s);
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.menu-dark-hover {
  background-color: @menu-sub-color-background;
  color: @menu-sub-color-hover;
}

.menu-dark-active {
  background-color: @menu-sub-color-background;
  color: @menu-sub-color-hover;
}

.menu-dark-active-inline-title {
  color: @menu-sub-color-hover;
  background: @menu-color-background;
  border: none;
}

.menu-light-base {
  .menu-light-default();

  .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
    background-color: #fff;
  }

  .@{submenu-prefix-cls}-sub {
    color: @menu-light-color;
    background: #fafafa;
  }

  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active):hover,
  .@{submenu-prefix-cls}-hover {
    .menu-light-hover();
  }

  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
    .menu-light-hover();
  }

  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
    .menu-light-hover();
  }

  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
    .menu-light-active();
  }
}

.menu-light-default {
  color: @menu-light-color;
  background: #ffffff;
}

.menu-light-hover {
  background-color: @menu-light-color-background-hover;
  color: @menu-light-color-hover;
  border: none;
}

.menu-light-active {
  background-color: @menu-light-color-background-active;
  color: @menu-light-color-active;
  border: none;
}

.menu-light-active-inline-title {
  color: @menu-light-color-active;
  background: #ffffff;
  border: none;
}