@select-class: ~'@{icecream-prefix}-select';
@multi-select-class: ~'@{icecream-prefix}-multi-select';
@select-selector-class: ~'@{icecream-prefix}-select-selector';
@select-option-class: ~'@{icecream-prefix}-select-option';
@select-empty-class: ~'@{icecream-prefix}-select-empty';

.@{select-class} {
  .extendBase();

  display: inline-flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;

  &-content {
    flex: 1 1 0;
    position: relative;
    display: flex;
    overflow: hidden;
  }

  &-option-content {
    .textEllipsis();
    flex: 1;

    // 注意 `:empty` 不会匹配内容为空格的情况；
    // 如果 option content 的内容是一个或多个空格（非 ` `），那么容器还是不会被撑开；
    // 不过这种情况很少见，另外按照最新的规范，`:empty` 应该匹配内容为空格的情况（只是浏览器还没有实现），
    // 详见 https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
    // 因此这里不去特别处理内容为空格的情况
    &:empty::after {
      // 确保在内容为空的情况下，容器也会被撑开
      content: "\00a0";
    }
  }

  &-placeholder {
    .extendBase();
    color: @icecream-color-grey-7;
  }

  &-search-input {
    .extendBase();

    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    .setFontSize(inherit);

    &::placeholder {
      color: @icecream-color-grey-7;
    }
  }

  &-search-active &-option-content {
    display: none;
  }

  &-search-active &-search-input {
    display: block;
  }

  &-clear {
    .extendBase();
    .inputOperationIcon();

    opacity: 0;
    margin-left: @icecream-gap-xs;

    &-invisible {
      display: none;
    }
  }

  &:hover &-clear {
    opacity: 1;
  }

  &-icon {
    .extendBase();

    flex: 0 0 auto;
    margin-left: @icecream-gap-xs;
    display: flex;
    align-items: center;
    color: @icecream-color-grey-7;

    &-arrow {
      .extendBase();

      transition: @icecream-transitions, transform 0s;

      &:hover {
        color: @icecream-color-grey-8;
      }

      .@{input-with-color-disabled-class} &:hover {
        color: inherit;
      }
    }
  }

  &-icon-loading {
    .animateSpin();
  }

  &-active &-icon-arrow {
    transform: scale(1, -1);
  }
}

.@{select-option-class} {
  &-with-checkbox {
    padding: 0;
  }
  &-text {
    flex: 1 1 auto;
  }
  &-icon {
    flex: 0 0 auto;
    margin-left: @icecream-gap-xs;
    margin-right: -4px;
  }
  &-disabled {
    color: @icecream-color-grey-7;
  }
  &-checkbox {
    padding: 7px 20px;
    flex: 1;
  }
}

.@{select-class}-option-group-tabs {
  // TODO: 等 Tabs 支持不隐藏 TabPane 内容的渲染方式（TabPane 内容会自然地把 Tabs 撑开）后
  // 这里还调整为 max-height 逻辑
  height: 240px;

  &-tab-pane {
    margin-top: 8px;
    margin-bottom: 7px;

    &-content {
      max-height: none;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}

.@{select-empty-class} {
  .extendBase();

  height: 188px;
  .setFontSize(@icecream-font-size-main);
  line-height: 188px;
  text-align: center;
  color: @icecream-color-grey-8;
}

.multi-select-content-size(
  @tag-height, // tag & input 的高度
  @input-height, // 控件本身高度（单行内容的情况下）
  @line-gap // 相邻行的间距
) {
  @padding: (@input-height - 2px - @tag-height) / 2;
  padding-top: @padding;
  padding-bottom: @padding;
  .@{multi-input-tag-class}, .@{select-class}-search-input, .@{select-class}-placeholder {
    margin-bottom: @line-gap;
    height: @tag-height;
    line-height: @tag-height;
  }
  .@{select-class}-content {
    margin-bottom: -@line-gap;
  }
}

.@{multi-select-class} {
  .@{select-class}-content {
    flex-wrap: wrap;
  }

  &-collapsed .@{select-class}-content {
    flex-wrap: nowrap;
  }

  &.@{input-with-color-class}.@{input-with-color-disabled-class} {
    background-color: @icecream-color-grey-2; // 多选 select 的禁用背景色浅一点
  }

  .@{select-class}-search-input {
    // 解决 input 在 flex 布局中不能正确收缩（shrink）的问题
    // 设置 width: 100% 后 input 会表现得像一个正常的 div
    width: 100%;
    flex: 1 0 1em;
  }

  &.@{input-with-size-class}-size-small {
    .multi-select-content-size(16px, @icecream-form-input-height-sm, 2px);
  }

  &.@{input-with-size-class}-size-default {
    .multi-select-content-size(20px, @icecream-form-input-height-md, 4px);
  }

  &.@{input-with-size-class}-size-large {
    .multi-select-content-size(24px, @icecream-form-input-height-lg, 6px);
  }
}