.ve-dropdown {
  display: inline-table;
  margin: 0;

  a,
  a:visited {
    color: #000;
    text-decoration: none;
    outline: none;
  }

  .ve-dropdown-dt,
  .ve-dropdown-items {
    margin: 0px;
    padding: 0px;
  }

  .ve-dropdown-dt-selected {
    position: relative;
    display: block;
    border: 1px solid var(--ve-dropdown-border-color);
    border-radius: 2px;
    font-size: 14px;
    height: 32px;
    line-height: 32px;

    &:hover {
      color: var(--ve-dropdown-item-hover-text-color);
      border-color: var(--ve-dropdown-item-hover-text-color);
    }

    .ve-dropdown-dt-selected-span {
      width: 80%;
      display: block !important;
      /*修复会被别的样式覆盖的问题*/
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      padding-left: 2px;
    }

    .ve-dropdown-input {
      appearance: none;
      background-color: #fff;
      background-image: none;
      border: 1px solid #fff;
      box-sizing: border-box;
      color: #1f2d3d;
      display: inline-block;
      font-size: inherit;
      line-height: 1;
      outline: none;
      padding-left: 2px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 80%;
      text-align: left;
    }
  }
}

// dropdown popper
.ve-dropdown-popper {
  z-index: var(--ve-dropdown-z-index);

  .ve-dropdown-dd,
  .ve-dropdown-items {
    margin: 0px;
    padding: 0px;
  }

  // 下拉项
  .ve-dropdown-dd {
    display: block;

    .ve-dropdown-items {
      min-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: normal;
      white-space: nowrap;
      top: 2px;
      left: 0px;
      list-style: none;
      border-radius: 2px;
      background-color: var(--ve-dropdown-background-color);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);
      border: 1px solid var(--ve-dropdown-item-border-color);

      padding: 5px 0px;
      width: auto;

      .ve-dropdown-items-wrapper {
        padding: 6px 12px;
        overflow: auto;

        /* 单选 */
        .ve-dropdown-items-li {
          a {
            text-decoration: none;
          }

          white-space: nowrap;
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          background-color: var(--ve-dropdown-item-background-color);

          &:hover {
            background-color: var(--ve-dropdown-item-hover-background-color);
            color: var(--ve-dropdown-item-hover-text-color);
          }

          &.active {
            background-color: var(--ve-dropdown-item-active-background-color);

            a {
              color: var(--ve-dropdown-active-text-color);
            }
          }

          &.active:hover {
            background-color: var(--ve-dropdown-item-active-background-color);
          }

          .ve-dropdown-items-li-a {
            width: 100%;
            display: block;
            padding-left: 8px;
            padding-right: 8px;
            color: var(--ve-dropdown-text-color);
          }

          .ve-dropdown-items-li-a-left {
            text-align: left;
          }

          .ve-dropdown-items-li-a-center {
            text-align: center;
          }

          .ve-dropdown-items-li-a-right {
            text-align: right;
          }
        }

        /* 多选 */
        .ve-dropdown-items-multiple {
          display: table;
          width: 100%;
          padding: 0 5px;
          width: 100%;
          text-align: left;

          .ve-checkbox {
            width: 100%;

            .ve-checkbox-label {
              padding-left: 5px;
            }
          }

          span {
            font-size: 14px;
            font-weight: normal;
            color: var(--ve-dropdown-item-hover-text-color);
          }

          &:hover {
            background-color: var(--ve-dropdown-item-hover-background-color);
          }
        }
      }
    }
  }

  /*操作功能开始*/
  .ve-dropdown-operation {
    width: 100%;
    margin-top: 5px;
    padding: 8px 0 3px 0;
    font-size: 14px;
    border-top: 1px solid #e8e8e8;

    display: flex;
    justify-content: space-around;

    .ve-dropdown-operation-item {
      color: var(--ve-dropdown-operation-item-text-color);

      &.ve-dropdown-filter-disable {
        color: #999;
      }

      &:not(.ve-dropdown-filter-disable):hover {
        color: var(--ve-dropdown-operation-item-hover-text-color);
      }
    }

    &:last-child {
      float: right;
    }

    &:hover {
      color: var(--ve-dropdown-item-hover-background-color);
    }
  }
}