@import "../lib.less";
@import (reference) "../dropdown.less";
@import "../variables/components/menu.less";

.@{veui-prefix}-nav {
  &-body {
    padding: 0;
    margin: 0;
    display: flex;
    position: relative;
    border-bottom: 1px solid @veui-menu-border-color-horizontal;
  }

  &-body,
  &-overlay ul {
    list-style: none;
    padding-left: 0;
  }

  // all menu items
  &-item {
    &,
    &.@{veui-prefix}-link {
      font-size: @veui-menu-font-size-horizontal-s;
    }

    &,
    &:hover,
    &[data-focus-visible-added],
    &:active {
      text-decoration: none;
    }
  }

  &-item-label-wrapper,
  &-overlay .@{veui-prefix}-option-group-label,
  &-body &-item {
    position: relative;
  }

  // top level normal item style
  &-body &-item {
    padding: 0 @veui-menu-item-padding-x-horizontal;
    height: @veui-menu-item-height-horizontal-s;
    flex: none;
    display: flex;
    align-items: center;
    position: relative;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    margin-right: @veui-menu-item-spacing-horizontal;

    &::after {
      content: "";
      .absolute(_, 0, 0, 0);
      .size(auto, @veui-menu-indicator-width);
      opacity: 0;
      .veui-transition(background-color, box-shadow, opacity);
      .margin(0, @veui-menu-item-padding-x-horizontal);
    }

    &:not(.@{veui-prefix}-disabled) {
      color: @veui-menu-item-font-color-horizontal;
      background-color: @veui-menu-item-background-color-horizontal;

      &.@{veui-prefix}-nav-item-open {
        color: @veui-menu-item-font-color-horizontal-hover;
        background-color: @veui-menu-item-background-color-horizontal-hover;
      }

      &[data-focus-visible-added] {
        color: @veui-menu-item-font-color-horizontal-focus;
        background-color: @veui-menu-item-background-color-horizontal-focus;
      }

      &:not(.@{veui-prefix}-nav-more):active {
        color: @veui-menu-item-font-color-horizontal-active;
        background-color: @veui-menu-item-background-color-horizontal-active;
      }
    }

    &.@{veui-prefix}-disabled {
      color: @veui-menu-item-font-color-horizontal-disabled;
    }
  }

  // more button
  &-more {
    &-hidden {
      visibility: hidden;
      position: absolute;
    }
  }

  // top level current item style
  &-body &-item-exact-active,
  &-body &-item-active {
    &:not(.@{veui-prefix}-disabled) {
      color: @veui-menu-item-font-color-horizontal-current;

      // indicator
      &::after {
        background-color: @veui-menu-indicator-color;
        opacity: 1;
      }

      &.@{veui-prefix}-nav-item-open {
        color: @veui-menu-item-font-color-horizontal-current-hover;
        background-color: @veui-menu-item-background-color-horizontal-hover;
        &::after {
          background-color: @veui-menu-indicator-color-hover;
        }
      }

      &[data-focus-visible-added] {
        color: @veui-menu-item-font-color-horizontal-current-focus;
        background-color: @veui-menu-item-background-color-horizontal-focus;
        &::after {
          background-color: @veui-menu-indicator-color-focus;
        }
      }

      &:not(.@{veui-prefix}-nav-more):active {
        color: @veui-menu-item-font-color-horizontal-current-active;
        background-color: @veui-menu-item-background-color-horizontal-active;
        &::after {
          background-color: @veui-menu-indicator-color-active;
        }
      }
    }
    &.@{veui-prefix}-disabled {
      color: @veui-menu-item-font-color-horizontal-current-disabled;
      &::after {
        background-color: @veui-menu-item-font-color-horizontal-current-disabled;
        opacity: 1;
      }
    }
  }

  // expand icon in top level items
  &-expand-icon {
    .size(@veui-menu-item-icon-horizontal-s);
    margin-left: @veui-menu-card-target-spacing;
    color: inherit;
    .veui-transition(transform, color);
  }

  &-item-open &-expand-icon {
    transform: rotateZ(180deg);
  }

  // dropdown: apply overlay shadow styles
  &-dropdown > .@{veui-prefix}-option-group,
  &-dropdown &-card {
    min-width: 120px;
    &:extend(._veui-dropdown-overlay all);
  }

  // card
  &-overlay &-card {
    display: flex;
    padding: @veui-menu-card-padding-x @veui-menu-card-padding-y;
    background-color: @veui-menu-card-background-color;
    border-radius: @veui-menu-card-border-radius-m;

    // space between card direct columns
    & > li + li {
      margin-left: @veui-menu-card-column-spacing;
    }
  }

  // card item
  &-card &-item {
    display: flex;
    align-items: center;

    &:hover {
      color: @veui-menu-item-font-color-horizontal-hover;
      background-color: @veui-menu-item-background-color-horizontal-hover;
    }

    &[data-focus-visible-added] {
      color: @veui-menu-item-font-color-horizontal-focus;
      background-color: @veui-menu-item-background-color-horizontal-focus;
    }

    &.@{veui-prefix}-nav-item-exact-active {
      & {
        color: @veui-menu-item-font-color-horizontal-current;
        background-color: @veui-menu-item-background-color-horizontal-current;
      }
      &:hover {
        color: @veui-menu-item-font-color-horizontal-current-hover;
        background-color: @veui-menu-item-background-color-horizontal-current-hover;
      }
      &[data-focus-visible-added] {
        color: @veui-menu-item-font-color-horizontal-current-focus;
        background-color: @veui-menu-item-background-color-horizontal-current-focus;
      }
      &:active {
        color: @veui-menu-item-font-color-horizontal-current-active;
        background-color: @veui-menu-item-background-color-horizontal-current-active;
      }
    }
  }

  &-card &-item:not(&-item-title) {
    margin-top: @veui-menu-card-item-spacing;
  }

  // card item title
  &-item-title {
    color: @veui-menu-card-title-font-color;
    font-size: @veui-menu-card-title-font-size-m;
    font-weight: @veui-menu-card-title-font-weight;
  }

  &-card &-item-has-icon {
    // 有 icon 的特殊二级间隔
    & + ul {
      padding-left: veui-sum(
        @veui-menu-card-item-icon-size,
        @veui-menu-card-target-spacing
      );
    }
  }

  &-title-icon {
    margin-right: @veui-menu-card-target-spacing;
    .veui-icon-size(@veui-menu-card-item-icon-size, true);
  }

  &-overlay.@{veui-prefix}-option-group-box {
    & > .@{veui-prefix}-option-group-options,
    & > .@{veui-prefix}-option-group {
      transform-origin: 0 0;
    }
  }

  &-overlay.@{veui-prefix}-option-group-box.@{veui-prefix}-overlay-enter,
  &-overlay.@{veui-prefix}-option-group-box.@{veui-prefix}-overlay-leave-to {
    & > .@{veui-prefix}-option-group-options,
    & > .@{veui-prefix}-option-group {
      transform: scaleX(0);
    }
  }

  &-overlay .@{veui-prefix}-option-group-label &-item {
    // option-group-label 下的 link 盖满整个 item
    flex: 1;

    &::before {
      content: "";
      .absolute(0);
    }

    & + .@{veui-prefix}-option-group-expandable {
      position: relative;
    }

    &[data-focus-visible-added] {
      & {
        color: @veui-menu-item-font-color-horizontal-focus;
      }
      &::before {
        background-color: @veui-menu-item-background-color-horizontal-focus;
      }
    }

    &:active{
      & {
        color: @veui-menu-item-font-color-horizontal-active;
      }
      &::before {
        background-color: @veui-menu-item-background-color-horizontal-active;
      }
    }

    &.@{veui-prefix}-nav-item-active,
    &.@{veui-prefix}-nav-item-exact-active {
      color: @veui-menu-item-font-color-horizontal-current;
    }

    &.@{veui-prefix}-nav-item-exact-active {
      &::before {
        background-color: @veui-menu-item-background-color-horizontal-current;
      }

      &:hover {
        & {
          color: @veui-menu-item-font-color-horizontal-current-hover;
        }
        &::before {
          background-color: @veui-menu-item-background-color-horizontal-current-hover;
        }
      }

      &[data-focus-visible-added] {
        & {
          color: @veui-menu-item-font-color-horizontal-current-focus;
        }
        &::before {
          background-color: @veui-menu-item-background-color-horizontal-current-focus;
        }
      }

      &:active {
        & {
          color: @veui-menu-item-font-color-horizontal-current-active;
        }
        &::before {
          background-color: @veui-menu-item-background-color-horizontal-current-active;
        }
      }
    }
  }

  // option item
  &-overlay .@{veui-prefix}-option {
    .padding(_, 0);
    display: flex;
    align-items: stretch;

    .@{veui-prefix}-nav-item {
      .padding(_, @veui-option-padding-m);
      flex: 1;
      display: flex;
      align-items: center;

      // &:hover {
      //   // color: @veui-menu-item-font-color-horizontal-hover;
      //   color: red;
      //   background-color: @veui-menu-item-background-color-horizontal-hover;
      // }

      &[data-focus-visible-added] {
        color: @veui-menu-item-font-color-horizontal-focus;
        background-color: @veui-menu-item-background-color-horizontal-focus;
      }

      &:active {
        color: @veui-menu-item-font-color-horizontal-active;
        background-color: @veui-menu-item-background-color-horizontal-active;
      }

      &.@{veui-prefix}-nav-item-exact-active {
        color: @veui-menu-item-font-color-horizontal-current;

        &:hover {
          color: @veui-menu-item-font-color-horizontal-current-hover;
          background-color: @veui-menu-item-background-color-horizontal-current-hover;
        }

        &[data-focus-visible-added] {
          color: @veui-menu-item-font-color-horizontal-current-focus;
          background-color: @veui-menu-item-background-color-horizontal-current-focus;
        }

        &:active {
          color: @veui-menu-item-font-color-horizontal-current-active;
          background-color: @veui-menu-item-background-color-horizontal-current-active;
        }
      }
    }
  }

  &-overlay[ui~="m"] &-item,
  &[ui~="m"] &-item {
    font-size: @veui-menu-font-size-horizontal-m;
    .padding(0, @veui-menu-item-padding-x-horizontal-m);
    margin-right: @veui-menu-item-spacing-horizontal-m;
    &::after {
      .margin(0, @veui-menu-item-padding-x-horizontal-m);
    }
  }
  &[ui~="m"] & {
    &-expand-icon {
      .size(@veui-menu-item-icon-horizontal-m);
    }
  }

  &[ui~="primary"] & {
    &-body {
      background: @veui-menu-item-background-color-horizontal-primary;
      .@{veui-prefix}-nav-item:not(.@{veui-prefix}-disabled) {
        color: @veui-menu-item-font-color-horizontal-primary;
        background: @veui-menu-item-background-color-horizontal-primary;
        &.@{veui-prefix}-nav-item-open {
          background: @veui-menu-item-background-color-hover-horizontal-primary;
        }
        &:not(.veui-nav-more):active {
          background: @veui-menu-item-background-color-active-horizontal-primary;
        }
      }
      .@{veui-prefix}-nav-item-exact-active,
      .@{veui-prefix}-nav-item-active {
        &:not(.@{veui-prefix}-disabled)::after {
          background-color: @veui-menu-item-font-color-horizontal-primary;
        }
      }
    }
  }
}