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

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

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

  // all menu items
  &-item {
    font-size: @dls-menu-font-size-horizontal-m;

    &,
    &: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 @dls-menu-item-padding-x-horizontal;
    height: @dls-menu-item-height-horizontal-m;
    flex: none;
    display: flex;
    align-items: center;
    position: relative;
    outline: none;
    white-space: nowrap;
    cursor: pointer;

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

      &::after {
        content: "";
        .absolute(_, 0, -1px, 0);
        .size(auto, @dls-menu-indicator-width);
        opacity: 0;
        .veui-transition(background-color, box-shadow, opacity);
      }

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

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

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

    &.@{veui-prefix}-disabled {
      background-color: @dls-menu-item-background-color-horizontal-disabled;
      color: @dls-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: @dls-menu-item-font-color-horizontal-current;
      background-color: @dls-menu-item-background-color-horizontal-current;
      font-weight: @dls-menu-item-font-weight-current;

      // indicator
      &::after {
        background-color: @dls-menu-indicator-color;
        box-shadow: @dls-menu-item-shadow-horizontal-current;
        opacity: 1;
      }

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

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

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

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

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

  // top level expandable items
  &-body &-expandable {
    padding: 0 @dls-menu-item-spacing 0 @dls-menu-item-padding-x-horizontal;
  }

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

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

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

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

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

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

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

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

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

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

  &-title-icon {
    margin-right: @dls-menu-card-target-spacing;
    .dls-icon-size(@dls-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] {
      &,
      & + .@{veui-prefix}-option-group-expandable {
        color: @dls-menu-item-font-color-horizontal-focus;
      }
      &::before {
        background-color: @dls-menu-item-background-color-horizontal-focus;
      }
    }

    &:active{
      &,
      & + .@{veui-prefix}-option-group-expandable {
        color: @dls-menu-item-font-color-horizontal-active;
      }
      &::before {
        background-color: @dls-menu-item-background-color-horizontal-active;
      }
    }

    &.@{veui-prefix}-nav-item-active,
    &.@{veui-prefix}-nav-item-exact-active {
      &,
      & + .@{veui-prefix}-option-group-expandable {
        font-weight: @dls-menu-item-font-weight-current;
        color: @dls-menu-item-font-color-horizontal-current;
      }
    }

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

      &:hover {
        &,
        & + .@{veui-prefix}-option-group-expandable {
          color: @dls-menu-item-font-color-horizontal-current-hover;
        }
        &::before {
          background-color: @dls-menu-item-background-color-horizontal-current-hover;
        }
      }

      &[data-focus-visible-added] {
        &,
        & + .@{veui-prefix}-option-group-expandable {
          color: @dls-menu-item-font-color-horizontal-current-focus;
        }
        &::before {
          background-color: @dls-menu-item-background-color-horizontal-current-focus;
        }
      }

      &:active {
        &,
        & + .@{veui-prefix}-option-group-expandable {
          color: @dls-menu-item-font-color-horizontal-current-active;
        }
        &::before {
          background-color: @dls-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(_, @dls-option-padding-m);
      flex: 1;
      display: flex;
      align-items: center;

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

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

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

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

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

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

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

  &-overlay[ui~="s"] &-item,
  &[ui~="s"] &-item {
    font-size: @dls-menu-font-size-s;
  }

  &-overlay[ui~="l"] &-item,
  &[ui~="l"] &-item {
    font-size: @dls-menu-font-size-l;
  }
}