// 提供含有 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";
$nav-icononly-width: 48px;

#{$nav-prefix} {
  &.#{$css-prefix}hoz {
    .#{$css-prefix}selected#{$nav-prefix}-item:before {
      width: calc(100% - #{$nav-ver-item-padding-lr});
      left: #{$nav-ver-item-padding-lr / 2};
    }

    //narmal白色背景下选中为白色
    &.#{$css-prefix}normal,
    &.#{$css-prefix}line {
      #{$nav-prefix}-item#{$menu-prefix}-item {
        &.#{$css-prefix}selected {
          background-color: $b-design-normal-hoz-selected-bgcolor;
        }
      }
    }
  }

  &.#{$css-prefix}normal.#{$css-prefix}ver {
    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-bgcolor;
        background-color: #fff;
      }
    }

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

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

      &.#{$css-prefix}focused,
      &:hover {
        background-color: $b-design-primary-ver-hover-bgcolor;
      }

      &.#{$css-prefix}selected {
        background-image: $b-design-primary-ver-selected-bgcolor;
        background-color: $color-text1-6;
        color: #fff !important;
      }
    }
  }

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

      &.#{$css-prefix}selected:not(.next-disabled):hover,
      &.#{$css-prefix}selected:not(.next-disabled):focus,
      &.#{$css-prefix}selected:not(.next-disabled):focus:hover {
        background-color: $b-design-secondary-ver-hover-bgcolor;
        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}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";
          }
        }
      }
    }
  }
}

#{$nav-prefix}-popup {
  .next-menu {
    margin-top: 0px;
  }
}