// 提供含有 css variables 的 sass variables 供覆盖
@import "../variables.scss";
@import "../utils.scss";
@import "./variables.scss";
@import "~@alifd/next/lib/core/index-noreset";
@import "~@alifd/next/lib/nav/scss/variable";
@import "~@alifd/next/lib/nav/scss/mixin";
@import "~@alifd/next/lib/menu/scss/variable";

$nav-icononly-width: 48px;

#{$nav-prefix} {
  &.#{$css-prefix}hoz {
    //hoz下border为1

    &.#{$css-prefix}normal,
    &.#{$css-prefix}line {
      border-width: 1px;
    }

    &.#{$css-prefix}secondary {
      #{$menu-prefix}-item#{$nav-prefix}-item {

        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: $nav-secondary-item-hover-text-color;
        }

        &.#{$css-prefix}selected {
          color: $nav-secondary-item-selected-text-color;
        }

        &.#{$css-prefix}focused:not(.#{$css-prefix}selected),
        &:not(.#{$css-prefix}selected):hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }

      & #{$menu-prefix}-item#{$nav-prefix}-item:not(.#{$css-prefix}-disabled) {
        &:focus:hover {
          color: $nav-secondary-item-hover-text-color;
          background-color: $nav-secondary-item-hover-bg-color;
        }
      }


    }


    &.#{$css-prefix}primary {

      & #{$menu-prefix}-item#{$nav-prefix}-item:not(.#{$css-prefix}-disabled) {
        &:focus:hover {
          color: $nav-primary-item-hover-text-color;
          background-color: $nav-primary-item-hover-bg-color;
        }
      }
    }

    #{$menu-prefix}-item#{$nav-prefix}-item {
      &:before {
        overflow: hidden;
      }
    }

    .#{$css-prefix}child-selected.#{$css-prefix}nav-item:before {
      width: 100%;
      left: 0px;
      height: 4px;
    }

  }

  &.#{$css-prefix}normal.#{$css-prefix}ver[role='listbox'] {
    border: 0px;
    box-shadow: $b-design-normal-ver-box-shadow;

    #{$nav-prefix}-item#{$menu-prefix}-item {
      &.#{$css-prefix}selected {
        background-image: $b-design-normal-ver-selected-bg;
        background-color: #fff;
      }

      &.#{$css-prefix}opened {
        background-color: $nav-normal-sub-nav-bg-color;
        color: $nav-normal-item-opened-text-color;

        .#{$css-prefix}menu-icon-arrow {
          color: $nav-normal-item-opened-text-color;
        }
      }
    }

    &>#{$menu-prefix}-sub-menu-wrapper#{$nav-prefix}-sub-nav-item {
      &>#{$nav-prefix}-item#{$menu-prefix}-item.#{$css-prefix}opened {
        background-color: $nav-normal-bg-color;
      }
    }

    #{$nav-prefix}-item.#{$css-prefix}child-selected:hover {
      .#{$css-prefix}menu-icon-arrow {
        color: $nav-normal-item-selected-text-color;
      }
    }
  }

  &.#{$css-prefix}primary.#{$css-prefix}ver[role='listbox'] {
    #{$nav-prefix}-item#{$menu-prefix}-item {
      &.#{$css-prefix}selected {
        background-image: $b-design-primary-ver-selected-bg;
        background-color: $color-text1-6;
        color: #fff !important;
      }

      &.#{$css-prefix}opened {
        background-color: $nav-primary-sub-nav-bg-color;
      }
    }

    &>#{$menu-prefix}-sub-menu-wrapper#{$nav-prefix}-sub-nav-item {
      &>#{$nav-prefix}-item#{$menu-prefix}-item.#{$css-prefix}opened {
        background-color: $nav-primary-bg-color;
      }
    }

  }

  //二级一下的icon距离右侧间距改为8px
  &.#{$css-prefix}normal,
  &.#{$css-prefix}primary,
  &.#{$css-prefix}secondary,
  &.#{$css-prefix}line {
    &.#{$css-prefix}ver[role='listbox'] {
      .#{$css-prefix}menu-sub-menu .#{$css-prefix}nav-sub-nav-item {
        .#{$css-prefix}nav-icon.#{$css-prefix}icon {
          margin-right: $s-2;
        }
      }
    }
  }


  //二级下拉的a标签颜色不变色
  &.#{$css-prefix}secondary,
  &.#{$css-prefix}normal,
  &.#{$css-prefix}primary,
  &.#{$css-prefix}line {
    #{$menu-prefix}-item #{$menu-prefix}-item-text {
      &>a:hover {
        color: inherit;
      }
    }
  }

  &.#{$css-prefix}secondary.#{$css-prefix}ver {
    #{$nav-prefix}-item#{$menu-prefix}-item {
      color: rgba(255, 255, 255, 0.7);

      &:hover {
        color: $nav-secondary-item-hover-text-color;
      }

      &.#{$css-prefix}selected:not(.#{$css-prefix}disabled):hover,
      &.#{$css-prefix}selected:not(.#{$css-prefix}disabled):focus,
      &.#{$css-prefix}selected:not(.#{$css-prefix}disabled):focus:hover {
        background-color: $b-design-secondary-ver-hover-bg;
        color: #fff;
      }
    }
  }

  &.#{$css-prefix}primary.#{$css-prefix}ver,
  &.#{$css-prefix}secondary.#{$css-prefix}ver {
    #{$menu-prefix}-item {
      &:not(.#{$css-prefix}disabled):hover {
        .#{$css-prefix}menu-icon-arrow {
          color: #fff !important;
        }
      }
    }
  }

  &.#{$css-prefix}primary.#{$css-prefix}ver {

    //新增在收起的时候二级选中一级颜色改变
    &.#{$css-prefix}icon-only {
      .#{$css-prefix}nav-item.#{$css-prefix}menu-item.#{$css-prefix}child-selected.#{$css-prefix}nav-popup {
        background-image: linear-gradient(270deg, $color-brand1-4, $color-brand1-6);
      }
    }
  }


  &.#{$css-prefix}icon-only.#{$css-prefix}ver {
    width: $nav-icononly-width !important;

    #{$nav-prefix}-item#{$menu-prefix}-item {
      padding: 0 $b-design-nav-ver-icon-only-padding-lr;

      #{$nav-prefix}-icon.#{$css-prefix}icon {
        margin-left: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$b-design-nav-ver-icon-only-padding-lr});
        margin-right: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$b-design-nav-ver-icon-only-padding-lr});
      }
    }
  }

  //icon
  &.#{$css-prefix}ver {
    .#{$css-prefix}nav-sub-nav-item {
      .#{$css-prefix}nav-item {
        .#{$css-prefix}menu-item-inner {
          .#{$css-prefix}icon-arrow-down:before {
            content: "\E63D";
          }
        }
      }
    }
  }
}

//size
#{$nav-prefix}.#{$css-prefix}ver.#{$css-prefix}large {
  .#{$css-prefix}menu-item-inner {
    height: $b-design-nav-large-item-height;
    line-height: $b-design-nav-large-item-height;
  }

  #{$nav-prefix}-icon.#{$css-prefix}icon:before,
  #{$nav-prefix}-icon.#{$css-prefix}icon .#{$css-prefix}icon-remote {
    width: $b-design-nav-large-item-icon-size;
    font-size: $b-design-nav-large-item-icon-size;
  }

  .#{$css-prefix}menu-sub-menu .#{$css-prefix}menu-item-inner {
    height: $b-design-nav-large-sub-item-height;
    line-height: $b-design-nav-large-sub-item-height;
  }
}

#{$nav-prefix}-popup {
  .#{$css-prefix}menu {
    margin-top: $b-design-nav-pop-margin-top;
    border-radius: $b-design-nav-pop-corner;
    overflow: hidden;
  }
}

//secondary下拉菜单样式

#{$nav-prefix}-popup {
  .#{$css-prefix}menu.#{$css-prefix}secondary {
    background-color: #fff;
    color: #1A1A1A;
  }

  .#{$css-prefix}nav.#{$css-prefix}ver .#{$css-prefix}selected.#{$css-prefix}nav-item:before {
    width: 0px;
  }

  .#{$css-prefix}nav.#{$css-prefix}secondary,
  .#{$css-prefix}nav.#{$css-prefix}normal {
    @include nav-statement($nav-normal-bg-color,
      $nav-normal-border-color,
      $nav-normal-text-color,
      $nav-normal-text-style,
      $nav-normal-shadow,
      $nav-normal-item-hover-bg-color,
      $nav-normal-item-hover-text-color,
      $nav-normal-item-hover-text-style,
      $nav-normal-item-selected-bg-color,
      $nav-normal-item-selected-text-color,
      $nav-normal-item-selected-text-style,
      $nav-normal-item-selected-active-color,
      $nav-normal-item-hover-active-color,
      $nav-normal-item-opened-bg-color,
      $nav-normal-item-opened-text-color,
      $nav-normal-group-text-color,
      $nav-normal-group-text-style,
      $nav-normal-item-childselected-bg-color,
      $nav-normal-item-childselected-text-color,
      $nav-normal-item-childselected-text-style,
    );

    #{$menu-prefix}-item {
      &:not(.#{$css-prefix}disabled):not(.#{$css-prefix}opened):hover {
        .#{$css-prefix}menu-icon-arrow {
          color: $nav-normal-text-color !important;
        }
      }
    }

    #{$nav-prefix}-item#{$menu-prefix}-item.#{$css-prefix}opened#{$nav-prefix}-popup:hover {
      .#{$css-prefix}menu-icon-arrow {
        color: $nav-normal-item-selected-text-color !important;
      }

    }
  }

  #{$nav-prefix}.#{$css-prefix}line {
    #{$menu-prefix}-item {
      &:not(.#{$css-prefix}disabled):not(.#{$css-prefix}opened):hover {
        .#{$css-prefix}menu-icon-arrow {
          color: $nav-line-item-hover-text-color !important;
        }
      }


    }
  }

  .#{$css-prefix}line #{$nav-prefix}-item#{$menu-prefix}-item.#{$css-prefix}opened#{$nav-prefix}-popup:hover {
    .#{$css-prefix}menu-icon-arrow {
      color: $nav-line-item-hover-text-color !important;
    }

  }

}

#{$nav-prefix}.#{$css-prefix}line {
  #{$menu-prefix}-item {

    &:not(.#{$css-prefix}disabled):hover,
    &:not(.#{$css-prefix}disabled).#{$css-prefix}opened:hover {
      .#{$css-prefix}menu-icon-arrow {
        color: $color-brand1-6 !important;
      }
    }
  }
}