/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@dropdown-prefix-cls: ~'@{kd-prefix}-dropdown';
@dropdown-trigger-prefix-cls: ~'@{dropdown-prefix-cls}-trigger';

@dropdown-line-height: 18px;

.@{dropdown-trigger-prefix-cls} {
  outline: none;

  &-container {
    display: inline-block;
  }
}

.@{dropdown-prefix-cls} {
  .reset-component;
  opacity: 1;
  visibility: visible;
  z-index: @z-index-popper;
  background-color: @dropdown-color-background;
  border-radius: @radius-border;
  min-width: @dropdown-menu-min-width;
  max-width: @dropdown-menu-max-width;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);

  &.hidden {
    opacity: 0;
    visibility: hidden;
  }

  // 箭头样式
  .popperArrow(@dropdown-color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);

  &-menu {
    max-height: @dropdown-menu-max-height;
    padding: @dropdown-menu-padding-vertical 0;
    overflow-y: auto;
    &-item {
      position: relative;
      padding: @dropdown-item-vertical-gap @dropdown-item-horizontal-gap;
      color: @dropdown-color;
      font-size: @dropdown-font-size;
      line-height: @dropdown-line-height;
      overflow: hidden;
      cursor: pointer;

      &.disabled,
      &.disabled > a {
        color: @dropdown-item-color-disabled;
        cursor: not-allowed;
      }
      transition: background-color @duration-promptly;
      &:not(.disabled):hover {
        background-color: @dropdown-item-hover-bg-color;

        > a {
          color: @dropdown-item-hover-color-text;
        }
      }

      &:not(.disabled):active,
      &:not(.disabled).selected {
        color: @dropdown-item-active-color;

        > a {
          color: @dropdown-item-active-color;
        }
      }

      &.divided::before {
        content: '';
        position: absolute;
        top: 0;
        left: @dropdown-item-horizontal-gap;
        right: @dropdown-item-horizontal-gap;
        height: @dropdown-divided-height;
        background-color: @dropdown-divided-color-bg;
      }

      &.danger,
      &.danger > a {
        color: @dropdown-item-color-text-danger;

        transition: color @duration-promptly, background-color @duration-promptly;
        &:hover {
          color: @color-white;
          background-color: @dropdown-item-color-background-danger-hover;
        }
      }

      > a {
        display: block;
        margin: calc(-1 * @dropdown-item-vertical-gap) calc(-1 * @dropdown-item-horizontal-gap);
        padding: @dropdown-item-vertical-gap @dropdown-item-horizontal-gap;
        color: @dropdown-color;
        font-size: @dropdown-font-size;
        line-height: @dropdown-line-height;
        transition: color @duration-promptly;

        &:hover {
          color: @dropdown-color;
        }
      }

      span {
        .multipleEllipsis(2);
      }
    }
  }
  .@{dropdown-prefix-cls}-menu-rtl {
    direction: rtl;
    [dir='auto'] {
      text-align: right;
    }
    .@{dropdown-prefix-cls}-menu-item {
      > span {
        text-align: right;
      }
    }
  }
}

.@{dropdown-prefix-cls}-mobile {
  max-width: 100vw;
  display: flex;
  min-width: auto;
  .@{dropdown-prefix-cls}-menu {
    flex: 1;
    .@{dropdown-prefix-cls}-menu-item {
      span {
        -webkit-line-clamp: 1;
      }
    }
  }
}
/*! rtl:end:ignore */