@__selectPrefixCls: kuma-select2;
@__selectTriggerHeightLarge: @trigger-height-large;
@__selectTriggerLabelHeightLarge: 24px;
@__selectTriggerHeightMiddle: @trigger-height-middle;
@__selectTriggerLabelHeightMiddle: 24px;
@__selectTriggerHeightSmall: @trigger-height-small;
@__selectTriggerLabelHeightSmall: 20px;

.effect() {
  animation-duration: .3s;
  animation-fill-mode: both;
  transform-origin: 0 0;
}

.@{__selectPrefixCls} {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  color: @dark-alpha-2;
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  >ul>li>a {
    padding: 0;
    background-color: #fff;
  } // arrow
  &-arrow {
    height: @__selectTriggerHeightLarge - 4;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    b {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-color: @normal-alpha-4 transparent transparent transparent;
      border-style: solid;
      border-width: 4px 4px 0 4px;
      transition: all .3s @transition-ease;
    }
  }
  &-combobox {
    .@{__selectPrefixCls}-arrow {
      display: none;
    }
  }
  &-selection {
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    display: block;
    background-color: #fff;
    border-radius: @input-border-radius;
    border: 1px solid @border-color;
    border-radius: @global-border-radius;
    &:hover {
      border-color: @border-hover-color;
      .@{__selectPrefixCls}-arrow b {
        border-color: @normal-alpha-3 transparent transparent transparent;
      }
    }
    &:active {
      border-color: @border-hover-color;
    }
    &__placeholder {
      position: absolute;
      top: 0;
      color: rgba(31, 56, 88, 0.4);
      line-height: 34px;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-focused &-selection {
    border-color: @border-hover-color; // box-shadow: 0 0 2px fadeout(@border-hover-color, 20%);
  }
  &-enabled &-selection {
    &:hover {
      border-color: @border-hover-color; // box-shadow: 0 0 2px fadeout(@border-hover-color, 20%);
    }
    &:active {
      border-color: @border-hover-color;
    }
  }
  &-selection-selected-value {
    position: absolute;
    left: 10px;
    top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding-right: 10px;
  }
  &-allow-clear {
    .@{__selectPrefixCls}-selection-selected-value {
      padding-right: 30px;
    }
  }
  &-selection--single {
    height: @__selectTriggerHeightLarge;
    cursor: pointer;
    position: relative;
    .@{__selectPrefixCls}-selection__placeholder {
      position: absolute;
      top: 0;
      color: rgba(31, 56, 88, 0.4);
    }
    .@{__selectPrefixCls}-selection__rendered {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      height: 100%;
      text-overflow: ellipsis;
      padding-left: 12px;
      margin-right: 20px;
      line-height: 34px;
    }
    .@{__selectPrefixCls}-selection__clear {
      font-weight: normal;
      position: absolute;
      font-family: "uxcore";
      color: @normal-alpha-5;
      top: (@__selectTriggerHeightLarge - 22) / 2;
      right: 20px;
      font-size: 14px;
      &:after {
        content: "\e6ab";
      }
      &:hover {
        color: @normal-alpha-4;
      }
    }
  }
  &-search__field__wrap {
    display: inline-block;
    position: relative;
  }
  &-search__field__placeholder {
    position: absolute;
    top: 0;
    left: 3px;
    color: #aaa;
  }
  &-search--inline {
    width: 100%;
    position: relative;
    .@{__selectPrefixCls}-search__field__wrap {
      width: 100%;
    }
    .@{__selectPrefixCls}-search__field {
      border: none;
      font-size: 100%;
      line-height: 16px;
      background: transparent;
      outline: 0;
      width: 100%;
      &::-ms-clear {
        display: none;
      }
    }
    .@{__selectPrefixCls}-search__field__mirror {
      position: absolute;
      top: -999px;
      left: 0;
      white-space: pre;
    }
    .@{__selectPrefixCls}-selection-selected-value {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.4;
      filter: "alpha(opacity=40)";
      width: 100%;
    }
    >i {
      float: right;
    }
  }
  &-enabled.@{__selectPrefixCls}-selection--multiple {
    cursor: text;
  }
  &-selection--multiple {
    min-height: @__selectTriggerHeightLarge;
    .@{__selectPrefixCls}-search--inline {
      float: left;
      width: auto;
      .@{__selectPrefixCls}-search__field {
        &__wrap {
          width: auto;
        }
        width: 0.75em;
      }
    }
    .@{__selectPrefixCls}-search__field__placeholder {
      top: 9px;
      left: 8px;
    }
    .@{__selectPrefixCls}-selection__rendered {
      //display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 8px;
      padding-bottom: 2px;
      >ul>li {
        margin-top: (@__selectTriggerHeightLarge - 2 - @__selectTriggerLabelHeightLarge) / 2;
        height: @__selectTriggerLabelHeightLarge;
        line-height: @__selectTriggerLabelHeightLarge;
      }
    }
  }
  &-enabled {
    .@{__selectPrefixCls}-selection__choice {
      cursor: default;
      .@{__selectPrefixCls}-selection__choice__remove {
        opacity: 1;
        transform: scale(0.8);
      }
      .@{__selectPrefixCls}-selection__choice__content {
        margin-left: -8px;
        margin-right: 8px;
      }
    }
  }
  & .@{__selectPrefixCls}-selection__choice {
    background-color: @normal-alpha-7;
    border-radius: 4px;
    float: left;
    padding: 0 15px;
    margin-right: 4px;
    position: relative;
    overflow: hidden;
    transition: padding .3s cubic-bezier(0.6, -0.28, 0.735, 0.045), width .3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    &__content {
      margin-left: 0;
      margin-right: 0;
      transition: margin .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    &-zoom-enter,
    &-zoom-appear,
    &-zoom-leave {
      .effect();
      opacity: 0;
      animation-play-state: paused;
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    &-zoom-leave {
      opacity: 1;
      animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }
    &-zoom-enter.@{__selectPrefixCls}-selection__choice-zoom-enter-active,
    &-zoom-appear.@{__selectPrefixCls}-selection__choice-zoom-appear-active {
      animation-play-state: running;
      animation-name: rcSelectChoiceZoomIn;
    }
    &-zoom-leave.@{__selectPrefixCls}-selection__choice-zoom-leave-active {
      animation-play-state: running;
      animation-name: rcSelectChoiceZoomOut;
    }
    @keyframes rcSelectChoiceZoomIn {
      0% {
        transform: scale(0.6);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    @keyframes rcSelectChoiceZoomOut {
      to {
        transform: scale(0);
        opacity: 0;
      }
    }
    &__remove {
      color: #919191;
      cursor: pointer;
      font-weight: bold;
      padding: 0 4px 0 0;
      font-family: 'uxcore';
      -webkit-font-smoothing: antialiased;
      font-style: normal;
      position: absolute;
      opacity: 0;
      transform: scale(0);
      top: 0;
      right: 2px;
      transition: opacity .3s, transform .3s;
      &:before {
        content: "\e6b0";
      }
      &:hover {
        color: #333;
      }
    }
  }
  &-disabled {
    color: @text-disabled-color;
    cursor: not-allowed;
    .@{__selectPrefixCls}-selection {
      border-color: @border-disabled-color;
      background-color: @bg-disabled-color;
      &:hover,
      &:active {
        border-color: @border-disabled-color;
      }
    }
    .@{__selectPrefixCls}-selection__choice {
      background-color: @normal-alpha-8;
    }
    .@{__selectPrefixCls}-arrow b {
      border-color: @normal-alpha-6 transparent transparent transparent;
    }
    .@{__selectPrefixCls}-selection--single,
    .@{__selectPrefixCls}-selection__choice__remove {
      cursor: not-allowed;
      color: @text-disabled-color;
      &:hover,
      &:active {
        border-color: @border-disabled-color;
      }
    }
  }
  &-dropdown {
    background-color: white;
    border: 1px solid #d9d9d9;
    box-shadow: @box-shadow-1;
    border-radius: @global-border-radius;
    box-sizing: border-box;
    z-index: 1070;
    left: -9999px;
    top: -9999px;
    position: absolute;
    outline: none;
    &-hidden {
      display: none;
    }
    &-menu {
      outline: none;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 9999;
      max-height: 250px;
      overflow-y: auto;
      >li {
        margin: 0;
        padding: 0;
      }
      &-item-group-list {
        margin: 0;
        padding: 0;
        >li.@{__selectPrefixCls}-menu-item {
          padding-left: 20px;
        }
      }
      &-item-group-title {
        color: @text-thirdary-color;
        line-height: 1.5;
        padding: 8px 10px;
        border-bottom: 1px solid #dedede;
      }
      li.@{__selectPrefixCls}-dropdown-menu-item {
        transition: all 0.15s @transition-ease;
        margin: 0;
        position: relative;
        display: block;
        padding: (@__selectTriggerHeightLarge - 18)/2 10px;
        font-weight: normal;
        color: @dark-alpha-3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &-active {
          background-color: @normal-alpha-9;
          color: @dark-alpha-2;
          cursor: pointer;
        }
        &-disabled {
          color: @text-disabled-color;
          cursor: not-allowed;
        }
        &-divider {
          height: 1px;
          margin: 1px 0;
          overflow: hidden;
          background-color: #e5e5e5;
          line-height: 0;
        }
      }
      li.@{__selectPrefixCls}-dropdown-menu-item-selected {
        color: @dark-alpha-1;
        background: @normal-alpha-9;
        font-weight: bold;
      }
    }
  }
  &-dropdown-search {
    display: block;
    padding: 4px;
    .@{__selectPrefixCls}-search__field__wrap {
      width: 100%;
    }
    .@{__selectPrefixCls}-search__field__placeholder {
      top: 4px;
    }
    .@{__selectPrefixCls}-search__field {
      padding: 4px;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #d9d9d9;
      border-radius: @input-border-radius;
      outline: none;
    }
    &.@{__selectPrefixCls}-search--hide {
      display: none;
    }
  }
  &-open {
    .@{__selectPrefixCls}-arrow b {
      border-color: @normal-alpha-3 transparent transparent transparent;
      transform: rotate(180deg);
      -ms-transform: rotate(180deg);
    }
  }
}

.@{__selectPrefixCls}-selected-has-icon {
  li.@{__selectPrefixCls}-dropdown-menu-item-selected {
    padding-right: 20px;
    &:before {
      content: "\e6bf";
      display: block;
      position: absolute;
      color: @brand-primary;
      right: 10px;
      top: 0px;
      font-family: uxcore !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: .2px;
      -moz-osx-font-smoothing: grayscale;
      line-height: 32px;
    }
  }
}

.@{__selectPrefixCls}-inline {
  .@{__selectPrefixCls}-selection {
    background: transparent;
    border-color: transparent;
    &:hover {
      border-color: transparent;
    }
    &__rendered {
      display: inline-block;
      padding: 0 4px;
    }
    &__placeholder {
      position: static;
    }
    &-selected-value {
      padding-right: 0;
      position: static;
    }
  }
}

@keyframes selectSlideInDown {
  0% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes selectSlideOutDown {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 10px);
  }
}

@keyframes selectSlideInUp {
  0% {
    opacity: 0;
    transform: translate(0, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes selectSlideOutUp {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -10px);
  }
}

.@{__selectPrefixCls}-dropdown-placement-bottomLeft {
  &.selectSlideUp-enter,
  &.selectSlideUp-appear {
    opacity: 0;
    transform: translate(0, 10px);
    animation-timing-function: @transition-ease;
    animation-duration: .3s;
  }
  &.selectSlideUp-enter-active,
  &.selectSlideUp-appear-active {
    visibility: visible;
    animation-name: selectSlideInDown;
  }
  &.selectSlideUp-leave {
    opacity: 1;
    transform: translate(0, 0);
    animation-timing-function: @transition-ease;
    animation-duration: .3s;
  }
  &.selectSlideUp-leave-active {
    visibility: visible;
    animation-name: selectSlideOutDown;
  }
}

.@{__selectPrefixCls}-dropdown-placement-topLeft {
  &.selectSlideUp-enter,
  &.selectSlideUp-appear {
    opacity: 0;
    transform: translate(0, -10px);
    animation-timing-function: @transition-ease;
    animation-duration: .3s;
  }
  &.selectSlideUp-enter-active,
  &.selectSlideUp-appear-active {
    visibility: visible;
    animation-name: selectSlideInUp;
  }
  &.selectSlideUp-leave {
    opacity: 1;
    transform: translate(0, 0);
    animation-timing-function: @transition-ease;
    animation-duration: .3s;
  }
  &.selectSlideUp-leave-active {
    visibility: visible;
    animation-name: selectSlideOutUp;
  }
}

.@{__selectPrefixCls}-middle {
  .@{__selectPrefixCls}-selection {
    &--single {
      height: @__selectTriggerHeightMiddle;
      .@{__selectPrefixCls}-selection__rendered {
        line-height: @__selectTriggerHeightMiddle - 2;
      }
      .@{__selectPrefixCls}-selection__clear {
        top: (@__selectTriggerHeightMiddle - 22) / 2;
      }
    }
    &--multiple {
      min-height: @__selectTriggerHeightMiddle;
      .@{__selectPrefixCls}-selection__rendered {
        >ul>li {
          margin-top: (@__selectTriggerHeightMiddle - 2 - @__selectTriggerLabelHeightMiddle) / 2;
          height: @__selectTriggerLabelHeightMiddle;
          line-height: @__selectTriggerLabelHeightMiddle;
        }
      }
    }
    &__placeholder {
      line-height: @__selectTriggerHeightMiddle - 2;
    }
  }
  .@{__selectPrefixCls}-arrow {
    height: @__selectTriggerHeightMiddle - 4;
  }
}

.@{__selectPrefixCls}-small {
  .@{__selectPrefixCls}-selection {
    &--single {
      height: @__selectTriggerHeightSmall;
      .@{__selectPrefixCls}-selection__rendered {
        line-height: @__selectTriggerHeightSmall - 2;
      }
      .@{__selectPrefixCls}-selection__clear {
        top: (@__selectTriggerHeightSmall - 22) / 2;
      }
    }
    &--multiple {
      min-height: @__selectTriggerHeightSmall;
      .@{__selectPrefixCls}-selection__rendered {
        >ul>li {
          margin-top: (@__selectTriggerHeightSmall - 2 - @__selectTriggerLabelHeightSmall) / 2;
          height: @__selectTriggerLabelHeightSmall;
          line-height: @__selectTriggerLabelHeightSmall;
        }
      }
    }
    &__placeholder {
      line-height: @__selectTriggerHeightSmall - 2;
    }
  }
  .@{__selectPrefixCls}-arrow {
    height: @__selectTriggerHeightSmall - 4;
  }
}

.@{__selectPrefixCls}-dropdown-middle {
  .@{__selectPrefixCls}-dropdown-menu li.@{__selectPrefixCls}-dropdown-menu-item {
    padding: (@__selectTriggerHeightMiddle - 18)/2 10px;
  }
}

.@{__selectPrefixCls}-dropdown-small {
  .@{__selectPrefixCls}-dropdown-menu li.@{__selectPrefixCls}-dropdown-menu-item {
    padding: (@__selectTriggerHeightSmall - 18)/2 10px;
  }
}