/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

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

.@{menu-prefix-cls} {
  .menu;

  &-inline {
    .@{menuitem-prefix-cls} {
      .ellipsis();
    }

    .@{submenu-prefix-cls} {
      padding-right: 0;
    }
  }

  &-collapsed {
    width: 50px;
    min-width: auto;
  }
}

.@{menuitem-prefix-cls} {
  .menuItem(relative);

  transition: color, background-color;
  transition-duration: calc(@menu-motion-duration - 0.1s);
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.@{submenu-prefix-cls} {
  .menuItem();

  transition: color, background-color;
  transition-duration: calc(@menu-motion-duration - 0.1s);
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

  &-sub {
    line-height: @menu-item-height;
  }

  &-thrid {
    display: flex;
    max-width: 810px;
    max-height: 492px;
    padding-left: 24px;
    background: @menu-sub-color-background;
    flex-wrap: wrap;
    overflow-y: auto;
    cursor: default;
    z-index: @menu-z-index;

    &-item {
      margin-right: 40px;
    }

    &-title {
      line-height: 50px;
      font-size: 12px;
      color: #ffffff;
      display: flex;
      flex-grow: 0;
      flex-shrink: 0;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      .ellipsis();

      & > span {
        .ellipsis();
      }
    }

    &-list {
      list-style-type: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin-bottom: 20px;
      margin-top: 10px;
      height: 180px;

      & > li {
        width: 160px;
        margin: 8px 0;
        font-size: 12px;
        line-height: 18px;
        color: rgba(255, 255, 255, 0.65);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .ellipsis();

        &:hover {
          color: @menu-sub-color-active;
        }

        & > span {
          .ellipsis();
        }

        .@{menuitem-prefix-cls}-title {
          height: auto;
        }
      }

      & > .@{menuitem-prefix-cls}-active {
        color: @menu-sub-color-active;
      }
    }
  }
}

// dark
.@{menu-dark-prefix-cls} {
  .@{submenu-prefix-cls}-sub {
    color: @menu-sub-color;
    background: @menu-sub-inline-color-background;
  }

  .@{submenu-prefix-cls}-sub-second,
  .@{submenu-prefix-cls}-sub-third {
    background: @menu-sub-color-background;
  }

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

    &-active {
      .menu-dark-active();
    }
  }

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

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

.@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
  .@{menuitem-prefix-cls}-active,
  .@{submenu-prefix-cls}-active {
    .@{submenu-prefix-cls}-title {
      .menu-dark-active-inline-title();
    }
  }

  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
    > .@{submenu-prefix-cls}-title:hover {
      .menu-dark-active-inline-title();
    }
  }
}

// light
.@{menu-light-prefix-cls} {
  .menu-light-base();
}

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

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

  &.hidden {
    .menu-hidden();
  }

  .@{submenu-prefix-cls} {
    padding-right: 0;

    &-sub {
      color: @menu-sub-color;
      background: @menu-sub-inline-color-background;
      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);

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

      &-second,
      &-third {
        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
        opacity: 1;
        visibility: visible;
        transition: opacity, visibility;
        transition-duration: calc(@menu-motion-duration - 0.1s);
        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
      }

      &-hide {
        .menu-hidden();
      }
    }
  }

  &.light {
    .menu-light-base();
  }
}
.@{menu-prefix-cls}-rtl {
  direction: rtl;
  .@{submenu-prefix-cls} {
    direction: rtl;
    .@{submenu-prefix-cls}-title {
      .@{submenu-prefix-cls}-arrow {
        margin-left: 0;
        margin-right: auto;
      }
    }
  }
}
/*! rtl:end:ignore */