@import './token.less';

@dropdown-prefix-cls: ~'@{prefix}-Dropdown';

.@{dropdown-prefix-cls} {
  &-group {
    &-right {
      .@{prefix}-Button:first-child {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: none;
      }
    }
  }
  &-menu {
    position: relative;
    box-sizing: border-box;
    max-height: @dropdown-max-height;
    padding: @dropdown-padding-vertical 0;
    // border: 1px solid @dropdown-color-border;
    border-radius: @dropdown-border-radius;
    // background-color: @dropdown-color-bg;
    // box-shadow: @dropdown-box-shadow;
    overflow: auto;

    &-noResult {
      color: var(--color-border-3);
      line-height: @dropdown-option-height;
      font-size: @dropdown-font-size;
      user-select: none;
      padding: 0 @dropdown-option-padding-horizontal;
    }

    &-input {
      cursor: pointer;
      outline: none;
      border: none;
      margin: 0 8px;
      height: 28px;
      font-size: 12px;
      border-bottom: 1px solid var(--color-border);
      margin-bottom: @size-1;
      display: flex;
      align-items: center;
      position: relative;
      width: auto;

      > svg {
        color: #999;
        width: 16px;
        min-width: 16px;
        height: 16px;
        margin-right: @spacing-2;
      }

      > input {
        margin-left: @size-1;
        outline: none;
        border: none;
        flex-grow: 1;
        background: transparent;
        position: relative;
        margin-right: 18px;
        // top: 0.125em;
      }
      &-clear {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        .input-clear();
      }
    }

    &-hidden {
      display: none;
    }

    &-item,
    &-pop-header {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: @dropdown-option-height;
      padding: 0 @dropdown-option-padding-horizontal;
      font-size: @dropdown-font-size;
      line-height: $height;
      text-align: left;
      cursor: pointer;
      // 避免 Trigger 的小箭头位于其上方
      z-index: 1;
      .text-ellipsis();

      // default
      color: @dropdown-option-color-text_default;
      background-color: @dropdown-option-color-bg_default;

      // selected
      &.@{dropdown-prefix-cls}-menu-selected {
        color: @dropdown-option-color-text_selected;
        background-color: @dropdown-option-color-bg_selected;
        font-weight: @dropdown-option-font-weight_selected;
        transition: all @animation-duration-1 @ease-base-linear;
      }

      // hover
      &:hover {
        color: @dropdown-option-color-text_hover;
        background-color: @dropdown-option-color-bg_hover;
      }

      // focus by Tab
      &:focus-visible {
        box-shadow: 0 0 0 2px var(--primary-color) inset;
      }

      // hotkey active
      &.@{dropdown-prefix-cls}-menu-active {
        box-shadow: 0 0 0 1px var(--primary-color) inset;
      }

      // disabled
      &.@{dropdown-prefix-cls}-menu-disabled {
        color: @dropdown-option-color-text_disabled;
        background-color: @dropdown-option-color-bg_disabled;
        cursor: not-allowed;
      }

      // overwrite color of links
      a,
      a:hover,
      a:focus,
      a:active {
        color: inherit;
        cursor: inherit;
        text-decoration: none;
      }

      > a:only-child::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    }

    &-pop-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .@{dropdown-prefix-cls}-menu-icon-suffix {
        margin-left: @dropdown-margin-left-suffix-icon;
      }
    }

    &-group {
      &:first-child &-title {
        margin-top: @dropdown-group-title-margin-top - @dropdown-padding-vertical;
      }
    }

    &-group-title {
      margin-top: @dropdown-group-title-margin-top;
      box-sizing: border-box;
      width: 100%;
      padding: 0 @dropdown-group-title-padding-horizontal;
      line-height: @dropdown-group-title-height;
      font-size: @dropdown-group-title-font-size;
      color: @dropdown-group-title-color-text;
      .text-ellipsis();
    }
    &-inner-search {
      margin: 0 @size-1 @size-1;
    }
  }

  &-menu-dark {
    border-color: @dropdown-dark-color-border;
    background-color: @dropdown-dark-color-bg;

    .@{dropdown-prefix-cls}-menu-item,
    .@{dropdown-prefix-cls}-menu-pop-header {
      // default
      color: @dropdown-dark-option-color-text_default;
      background-color: @dropdown-dark-option-color-bg_default;

      // selected
      &.@{dropdown-prefix-cls}-menu-selected {
        color: @dropdown-dark-option-color-text_selected;
        background-color: @dropdown-dark-option-color-bg_selected;

        &:hover {
          color: @dropdown-dark-option-color-text_selected;
        }
      }

      // hover
      &:hover {
        color: @dropdown-dark-option-color-text_hover;
        background-color: @dropdown-dark-option-color-bg_hover;
      }

      // disabled
      &.@{dropdown-prefix-cls}-menu-disabled {
        color: @dropdown-dark-option-color-text_disabled;
        background-color: @dropdown-dark-option-color-bg_disabled;
      }
    }

    .@{dropdown-prefix-cls}-menu-group-title {
      color: @dropdown-dark-group-title-color-text;
    }
  }

  &-menu-pop-trigger {
    // 下拉框的 menu 弹出不需要小箭头
    .@{prefix}-trigger-arrow {
      display: none;
    }
  }

  &-menu + .@{prefix}-trigger-arrow {
    background-color: @dropdown-color-bg;
  }
}