@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@style/mixins/index.scss' as *;
@use '@components/select/style/token.scss' as *;

$select-prefix-cls: string.unquote('#{theme.$prefix}-select');

.#{$select-prefix-cls}-dropdown {
  box-sizing: border-box;
  padding: $select-popup-padding-vertical 0;
  background-color: $select-popup-color-bg;
  border: 1px solid $select-popup-color-border;
  border-radius: $select-popup-border-radius;
  box-shadow: $select-popup-box-shadow;

  & &-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
  }

  &-list {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;

    &-wrapper {
      max-height: $select-popup-max-height;
      overflow-y: auto;
    }
  }

  .#{$select-prefix-cls}-option {
    position: relative;
    // 避免 Trigger 的小箭头位于其上方
    z-index: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 $select-signal-popup-option-padding-horizontal;

    // default
    color: $select-popup-option-color-text_default;
    font-size: $select-popup-font-size;
    line-height: $select-popup-option-height;
    text-align: left;
    background-color: $select-popup-option-color-bg_default;
    cursor: pointer;

    &-content {
      @include text-ellipsis();
    }

    &-checkbox {
      overflow: hidden;

      .#{theme.$prefix}-checkbox-label {
        @include text-ellipsis();
      }
    }

    &-has-suffix {
      justify-content: space-between;
    }

    // selected
    &-selected {
      color: $select-popup-option-color-text_selected;
      font-weight: $select-popup-option-font-weight_selected;
      background-color: $select-popup-option-color-bg_selected;
    }

    // hover
    &-active,
    &:not(#{&}-disabled):hover {
      color: $select-popup-option-color-text_hover;
      background-color: $select-popup-option-color-bg_hover;
      transition:
        color theme.$transition-duration-1 theme.$transition-timing-function-standard,
        background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
    }

    // disabled
    &-disabled {
      color: $select-popup-option-color-text_disabled;
      background-color: $select-popup-option-color-bg_disabled;
      cursor: not-allowed;
    }

    &-icon {
      display: inline-flex;
      margin-right: 8px;
    }

    &-suffix {
      margin-left: $dropdown-margin-left-suffix-icon;
    }
  }

  .#{$select-prefix-cls}-group {
    &:first-child &-title {
      margin-top: $select-popup-group-title-padding-top;
    }

    &-title {
      box-sizing: border-box;
      width: 100%;
      margin-top: $select-popup-group-title-padding-top;
      padding: 0 $select-popup-group-title-padding-horizontal;
      color: $select-popup-group-title-color-text;
      font-size: $select-popup-group-title-font-size;
      line-height: $select-popup-group-title-height;
      cursor: default;

      @include text-ellipsis();
    }
  }

  &#{&}-has-header {
    padding-top: 0;
  }

  &-header {
    border-bottom: 1px solid $select-popup-color-border;
  }

  &#{&}-has-footer {
    padding-bottom: 0;
  }

  &-footer {
    border-top: 1px solid $select-popup-color-border;
  }
}