@import "./variables.scss";
@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/menu/scss/variable";
@import "~@alifd/next/lib/menu/scss/mixin";

#{$menu-prefix} {
  border: $b-design-popup-local-border-width $popup-local-border-style $popup-local-border-color;
  box-shadow: $b-design-popup-local-shadow;

  & &-icon-selected.#{$css-prefix}icon {
    display: none;
  }
}

#{$menu-prefix}-item {

  &:not(.#{$css-prefix}disabled):hover,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}focused:hover {
    @include menu-item-state($menu-color,
      $menu-background-hover,
      $menu-arrow-color-hover,
      $menu-icon-selected-hover-color);
  }

  &:not(.#{$css-prefix}disabled):active {
    @include menu-item-state($menu-color,
      $b-design-menu-active-background-hover,
      $menu-arrow-color-hover,
      $menu-icon-selected-hover-color);
  }

  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:hover,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:hover,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus:hover {
    @include menu-item-state($menu-color-selected,
      $menu-background-hover,
      $menu-arrow-color-hover,
      $menu-icon-selected-hover-color);
  }

  &:not(.#{$css-prefix}disabled).#{$css-prefix}focused,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus {
    @include menu-item-state($menu-color-selected,
      $menu-background-selected,
      $menu-arrow-color-hover,
      $menu-icon-selected-hover-color);
  }


  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:active,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:active,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus:active,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}focused:active,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:active,
  &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:active {
    @include menu-item-state($menu-color-selected,
      $b-design-menu-active-background-hover,
      $menu-arrow-color-hover,
      $menu-icon-selected-hover-color);
  }

  #{$menu-prefix}-item-text>a:hover {
    // color: $color-link-1;
    color: $color-brand1-6;
  }
}

.#{$css-prefix}overlay-inner.#{$css-prefix}white {

  //tree-select
  .#{$css-prefix}tree-select-dropdown {
    background: $b-design-select-white-menu-bg-color;
  }

  #{$menu-prefix} {
    background: $b-design-select-white-menu-bg-color;

    &-item {
      color: $b-design-select-white-menu-item-text-color;

      &.#{$css-prefix}selected {
        background-color: $b-design-select-white-menu-bg-color;
        color: $color-brand1-6;
      }


      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused:hover,
      &:not(.#{$css-prefix}disabled):hover {
        @include menu-item-state($menu-color,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled):active {
        @include menu-item-state($menu-color,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }


      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:hover,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:hover,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus:hover {
        @include menu-item-state($menu-color-selected,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus {
        @include menu-item-state($menu-color-selected,
          $b-design-select-white-menu-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused {
        color: $b-design-select-white-menu-item-text-color;
      }

      &.#{$css-prefix}disabled,
      &.#{$css-prefix}disabled #{$menu-prefix}-item-text>a {
        @include menu-item-state($menu-color-disabled,
          $b-design-select-white-menu-bg-color,
          $menu-color-disabled,
          $menu-color-disabled);
        cursor: not-allowed;
      }
    }
  }
}