.#{$ns}ListMenu {
  background: $ListMenu-item-bg;
  min-width: px2rem(200px);
  border: $ListMenu-borderWidth solid $ListMenu-bordrColor;
  border-radius: $ListMenu-borderRadius;

  &-groupLabel {
    font-size: $fontSizeXs;
    color: $text--muted-color;
    padding: (
        $ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize -
          $gap-sm
      )/2 0 0 ($Form-select-paddingX - $gap-xs);
  }

  &-group:not(:first-child) > &-groupLabel {
    border-top: px2rem(1px) solid $ListMenu-divider-color;
  }

  &-item {
    display: flex;
    min-height: $ListMenu-item-height;
    color: $ListMenu-item-color;
    line-height: $Form-input-lineHeight;
    font-size: $Form-input-fontSize;
    cursor: pointer;
    padding: (
        $ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize
      )/2 $Form-select-paddingX;

    &.is-active {
      color: $ListMenu-item--onActive-color;
      background-color: $ListMenu-item--onActive-bg;
    }

    // &:hover,
    &.is-highlight {
      color: $ListMenu-item--onHover-color;
      background-color: $ListMenu-item--onHover-bg;
    }

    &.is-disabled {
      color: $ListMenu-item--onDisabled-color;
      background-color: $ListMenu-item--onDisabled-bg;
    }
  }

  &-placeholder {
    display: block;
    min-height: $ListMenu-item-height;
    color: $text--muted-color;
    line-height: $Form-input-lineHeight;
    font-size: $Form-input-fontSize;
    cursor: pointer;
    padding: (
        $ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize
      )/2 $Form-select-paddingX;
  }
}

.#{$ns}PopOver > .#{$ns}ListMenu {
  border-color: $listMenu--onActive-borderColor;
}