.yc-menu-item {
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 12px;
  border-radius: var(--border-radius-small);
  min-height: 40px;
  line-height: 40px;
  font-size: 14px;
  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  .yc-menu-icon {
    line-height: 1;
    margin-right: 16px;
    color: rgb(134, 144, 156);
  }
  .yc-menu-item-title {
    flex-shrink: 0;
    flex: 1;
  }
  .yc-menu-suffix-icon {
    margin-left: 16px;
  }
}
// collapsed
.yc-menu-item-collapsed {
  .yc-menu-icon {
    margin-right: 0;
  }
}
// mode
.yc-menu-item-mode-horizontal {
  flex-shrink: 0;
  position: relative;
  .yc-menu-item {
    min-height: 30px;
    line-height: 30px;
    .yc-menu-icon-suffix {
      margin-left: 6px;
    }
    &.yc-menu-item-selected {
      background-color: transparent;
      &::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -14px;
        height: 3px;
        background-color: rgb(22, 93, 255);
      }
    }
  }
}
// 省略
.yc-menu-item-ellipsis {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
// theme
@item-theme: light, dark;
each(@item-theme,{
  .yc-menu-item-@{value} {
    .yc-menu-item {
      color: if(@value=light, var(--color-text-2), var(--color-text-4));
      &:not(.yc-menu-item-disabled):hover {
        background-color: if(
          @value=light,
          var(--color-fill-2),
          var(--color-menu-dark-hover)
        );
      }
      &.yc-menu-item-selected {
        font-weight: 500;
        color: rgb(var(--primary-6));
        background-color: if(
          @value=light,
          var(--color-fill-2),
          var(--color-menu-dark-hover)
        );
        .yc-menu-icon {
          color: rgb(var(--primary-6));
        }
      }
      &.yc-menu-item-disabled {
        cursor: not-allowed;
        color: if(@value=light, var(--color-text-4), var(--color-text-2));
      }
    }
  }
  .yc-menu-inline-header {
    .yc-menu-item {
      &.yc-menu-item-selected {
        background-color: transparent;
      }
    }
  }
});

.yc-trigger {
  &.yc-dropdown-popup-dark {
    .yc-trigger-content {
      .yc-dropdown {
        background-color: var(--color-menu-dark-bg);
        border-color: var(--color-menu-dark-bg);
        .yc-dropdown-option {
          color: var(--color-text-4);
          &:not(.yc-dropdown-option-disabled) {
            &:hover,
            &.yc-dropdown-option-active {
              background-color: var(--color-menu-dark-hover);
            }
            &.yc-dropdown-option-active {
              color: var(--color-white);
            }
          }
        }
      }
    }
    .yc-trigger-arrow {
      background-color: var(--color-menu-dark-bg);
      border-color: var(--color-menu-dark-bg);
    }
  }
}
