@import './token.less';

.@{ns}-DropDownButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  // height: 100%;

  &-caret {
    // margin-left: @DropDown-caret-marginLeft;
    display: inline-block;
    vertical-align: top;
    transition: transform @animation-duration-2 ease;

    // > svg {
    //   width: 10px;
    //   height: 10px;
    //   // top: 0.125em;
    // }
  }

  &.is-opened &-caret {
    transform: rotate(180deg);
  }

  &.is-actived {
    .@{ns}-Button {
      color: var(--link-6);
    }
  }

  &-text--ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &--block {
    display: block;

    .@{ns}-Button {
      display: block;
    }
  }

  &-menu {
    background: @DropDown-menu-bg;
    list-style: none;
    // padding: @DropDown-menu-paddingY @DropDown-menu-paddingX;
    padding-bottom: @DropDown-menu-paddingY;
    min-width: @DropDown-menu-minWidth;
    text-align: left;
    border: none;
    user-select: none;

    &-root {
      // position: absolute;
      // top: 100%;
      // left: 0;
      margin: 1px 0 0;
      border: none;
      border-radius: @DropDown-menu-borderRadius;
      box-shadow: @DropDown-menu-boxShadow;
      min-width: @DropDown-menu-minWidth;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 300px;
    }
  }

  &--alignRight &-menu {
    left: auto;
    right: 0;
  }

  &-menuItem,
  &-menu > li {
    padding: 0 @DropDown-menuItem-paddingX;
    // padding-left: @DropDown-menuItem-paddingX;
    white-space: nowrap;
    box-sizing: border-box;
    height: @DropDown-menu-height;
    // line-height: @DropDown-menu-height;
    vertical-align: middle;
    user-select: none;
    color: @DropDown-menuItem-color;
    text-decoration: none;

    & > a {
      height: 100%;
      line-height: @DropDown-menu-height;
    }

    &:not(.@{ns}-DropDownButton-btns):not(.is-disabled):hover {
      background: @DropDown-menuItem-onHover-bg;
      color: @DropDown-menuItem-onHover-color;
    }

    &.@{ns}-DropDownButton-btns span:hover {
      color: @DropDown-menuItem-onHover-color;
    }

    &.is-active {
      background: @DropDown-menuItem-onHover-bg;
      color: @DropDown-menuItem-onActive-color;
    }

    &:not(.is-disabled),
    &:not(.disabled) {
      cursor: pointer;
    }

    &.is-disabled {
      cursor: not-allowed;
      // pointer-events: none;
      color: @DropDown-menuItem-onDisabled-color;
      filter: grayscale(80%);
    }

    &.@{ns}-DropDownButton-divider {
      height: 1px;
      // margin: 9px 0;
      overflow: hidden;
      background: @DropDown-menu-borderColor;
      padding: 0;
    }

    &.@{ns}-DropDownButton-groupTitle {
      height: inherit;
      font-size: @font-size-small;
      padding: @gap-small @gap-small;
      padding-left: @gap-small;
      color: @DropDown-group-color;
      flex-grow: 1;
      cursor: default;

      &:hover {
        background: none;
      }

      span {
        white-space: nowrap;
      }
      i,svg{
        margin-right: @spacing-2;
      }
      & ~ .@{ns}-DropDownButton-button {
        padding-left: @gap-large;
      }
    }
  }

  &-menu > li a {
    color: inherit;
    display: block;
    text-decoration: none;
  }

  // 兼容上传按钮
  &-menu > li button {
    border: none;
    width: 100%;
    height: auto;
    padding: 0;
    background-color: transparent;
    text-align: left;
    font-size: inherit;
    color: inherit;
    transition: none;
    &:hover {
      background-color: transparent !important;
    }
  }

  &-popover {
    border: none;
    box-shadow: none;
    .@{ns}-DropDownButton-menu-root{
      position: relative;
    }
  }

  // > .@{ns}-Button {
  //   min-width: unset;
  // }
}