$name: 'ivue-menu';

:root {
  --#{$name}-font-size: 14px;

  // horizontal
  --#{$name}-horizontal-height: 60px;
  --#{$name}-horizontal-submenu-padding: 0 20px;
  --#{$name}-horizontal-submenu-item-padding: 8px 16px;
  --#{$name}-horizontal-submenu-item-font-size: 14px;

  // vertical
  --#{$name}-vertical-item-padding: 14px 24px;
  --#{$name}-vertical-group-title-padding-left: 24px;

  // item
  --#{$name}-item-font-size: 14px;
  --#{$name}-item-group-title-font-size: 14px;
  --#{$name}-item-group-title-padding-left: 8px;
  --#{$name}-item-group-title-height: 48px;

  // dropdown
  --#{$name}-dropdown-max-height: 200px;
  --#{$name}-dropdown-padding: 5px 0;
  --#{$name}-dropdown-radius: 4px;
  --#{$name}-dropdown-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

  // color
  --#{$name}-dark: #515a6e;
  --#{$name}-vertical-item-color: rgba(255, 255, 255, 0.5);
  --#{$name}-vertical-active-bg: rgb(153 202 248 / 35%);
  --#{$name}-group-title-color: rgba(255, 255, 255, 0.36);
  --#{$name}-submenu-bg: #363e4f;
}

.#{$name} {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  color: var(--ivue-text-color);
  font-size: var(--#{$name}-font-size);
  z-index: 10;

  // 白色
  &-light {
    background: var(--ivue-white-color);
  }

  // 黑色
  &-dark {
    background: var(--#{$name}-dark);
  }

  // primary
  &-primary {
    background: var(--ivue-primary-color);
  }

  &-dark.#{$name}-horizontal,
  &-primary.#{$name}-horizontal,
  &-dark.#{$name}-vertical {
    // 菜单
    .#{$name}-item {
      color: var(--#{$name}-vertical-item-color);
      border: none;

      &:hover {
        color: var(--ivue-white-color);
        border: none;
      }
    }

    // 子菜单
    .#{$name}-submenu {
      color: var(--#{$name}-vertical-item-color);
      border: none;

      &:hover {
        color: var(--ivue-white-color);
        border: none;
      }

      &--active {
        color: var(--ivue-white-color);
      }

      .#{$name}-item {
        color: var(--ivue-title-color);

        &--selected {
          color: var(--ivue-primary-color);
        }

        &:hover {
          background: var(--ivue-background-color-select-hover);
        }
      }
    }

    .#{$name}-item--active {
      color: var(--ivue-white-color);
    }
  }

  &-primary.#{$name}-horizontal {
    .#{$name}-item,
    .#{$name}-submenu {
      color: var(--ivue-white-color);
    }
  }

  // 水平
  &-horizontal {
    height: var(--#{$name}-horizontal-height);
    line-height: var(--#{$name}-horizontal-height);

    .#{$name}-item,
    .#{$name}-submenu {
      position: relative;
      float: left;
      padding: var(--#{$name}-horizontal-submenu-padding);
      height: inherit;
      line-height: inherit;
      color: var(--ivue-title-color);
      cursor: pointer;
      z-index: 3;
      transition: var(--ivue-all-transition);
      border-bottom: 2px solid transparent;

      &:hover {
        color: var(--ivue-primary-color);
        border-bottom: 2px solid var(--ivue-primary-color);
      }
    }

    .#{$name}-submenu {
      .#{$name}-dropdown {
        min-width: 100%;
        width: auto;
        max-height: none;
        left: 0;
      }

      // 子选项
      .#{$name}-item {
        display: flex;
        padding: var(--#{$name}-horizontal-submenu-item-padding);
        font-size: var(--#{$name}-horizontal-submenu-item-font-size);
        height: auto;
        line-height: normal;
        border-bottom: 0;
        margin: 0;
        line-height: normal;
        clear: both;
        color: var(--ivue-title-color);
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background var(--ivue-default-transition-time)
          var(--ivue-ease-in-out);
        width: 100%;

        &--active {
          color: var(--ivue-primary-color);
        }

        &--group__title {
          font-size: 12px;
          height: 30px;
          line-height: 30px;
        }

        &:hover {
          background: var(--ivue-background-color-select-hover);
        }
      }

      // 标题
      &--title {
        display: flex;
        align-items: center;
      }

      // icon
      &--icon {
        transition: inherit;
        transition: transform var(--ivue-default-transition-time)
          var(--ivue-ease-in-out);
      }

      // 激活
      &--active {
        color: var(--ivue-primary-color);
        border-bottom: 2px solid var(--ivue-primary-color);
      }

      // 打开下拉框
      &--opened__icon {
        transform: rotate(180deg);
      }
    }

    .#{$name}-item--active {
      color: var(--ivue-primary-color);
      border-bottom: 2px solid var(--ivue-primary-color);
    }
  }

  &-horizontal.#{$name}-light {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      background: var(--ivue-border-color);
    }
  }

  // 垂直
  &-vertical {
    .#{$name}-item {
      position: relative;
      padding: var(--#{$name}-vertical-item-padding);
      z-index: 1;
      transition: var(--ivue-all-transition);
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: block;
        z-index: 10;
        width: 2px;
        opacity: 0;
        background: var(--ivue-primary-color);
        transition: var(--ivue-all-transition);
      }

      &:hover {
        color: var(--ivue-primary-color);
      }

      &--active:not(.ivue-menu-submenu) {
        color: var(--ivue-primary-color);
        background: var(--#{$name}-vertical-active-bg);
        z-index: 2;

        &::after {
          opacity: 1;
        }
      }

      &--group__title {
        text-align: left;
        padding-left: var(--#{$name}-vertical-group-title-padding-left);
      }
    }

    .#{$name}-submenu {
      &--title {
        padding: var(--#{$name}-vertical-item-padding);
        position: relative;
        cursor: pointer;
        z-index: 1;
        transition: var(--ivue-all-transition);
        text-align: left;

        &:hover {
          color: var(--ivue-primary-color);
        }
      }

      &--icon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 24px;
        transition: initial;
        transition: transform var(--ivue-default-transition-time)
          var(--ivue-ease-in-out);
      }

      &--opened__icon {
        transform: rotate(180deg);
      }
    }
  }

  &-vertical.#{$name}-light {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      display: block;
      width: 1px;
      height: 100%;
      background: var(--ivue-border-color);
    }
  }

  &-dark.#{$name}-vertical {
    .#{$name}-item {
      &::after {
        display: none;
      }
    }

    .#{$name}-item--active {
      color: var(--ivue-white-color) !important;
      background: var(--ivue-primary-color) !important;
    }

    // group 标题
    .#{$name}-item--group__title {
      color: var(--#{$name}-group-title-color);
    }

    // 子菜单
    .#{$name}-submenu {
      // title
      &--title {
        background: var(--#{$name}-dark);

        &:hover {
          color: var(--ivue-white-color);
        }
      }

      // 展开
      &--opened {
        background: var(--#{$name}-submenu-bg);
      }

      .#{$name}-item {
        color: var(--#{$name}-vertical-item-color);

        &:hover {
          color: var(--ivue-white-color);
          background: var(--#{$name}-submenu-bg);
        }
      }
    }
  }

  // item
  &-item {
    position: relative;
    display: block;
    outline: 0;
    list-style: none;
    font-size: var(--#{$name}-font-size);
    z-index: 1;
    cursor: pointer;
    text-align: left;
    transition: var(--ivue-all-transition);
    color: var(--ivue-text-color);
    user-select: none;

    &-router-link {
      color: currentColor;
    }

    &--group {
      line-height: normal;

      &__title {
        height: var(--#{$name}-item-group-title-height);
        line-height: var(--#{$name}-item-group-title-height);
        padding-left: var(--#{$name}-item-group-title-padding-left);
        font-size: var(--#{$name}-item-group-title-font-size);
        color: var(--ivue-legend-color);
      }
    }
  }

  // 下拉框
  &-dropdown {
    position: absolute;
    width: inherit;
    max-height: var(--#{$name}-dropdown-max-height);
    overflow: auto;
    padding: var(--#{$name}-dropdown-padding);
    background-color: var(--ivue-white-color);
    box-sizing: border-box;
    border-radius: var(--#{$name}-dropdown-radius);
    box-shadow: var(--#{$name}-dropdown-shadow);
    z-index: 900;

    &--list {
      display: flex;
      flex-direction: column;
    }
  }
}