@import "../styles/vars.less";
@import "../styles/animate.less";
@import "../styles/mixins.less";
@prefixCls : cuke-select;
.@{prefixCls} {
  position: relative;
  display: inline-block;
  width: @cuke-select-width;
  &-inner {
    display: inline-block;
    position: relative;
    cursor: pointer;
    .cuke-input:not(.cuke-input-disabled) {
      cursor: pointer;
    }
  }
  &-active {
    .@{prefixCls}-arrow {
      transform: translateY(-50%) rotate(180deg);
    }
  }
  &-open {
    animation: cuke-picker-open @default-transition forwards;
  }
  &-close {
    animation: cuke-picker-close @default-transition forwards;
    pointer-events: none;
  }
  &-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: @disabled-font-color;
    transition: @default-transition;
  }
  &-loading {
    animation: cuke-spin @loading-time linear infinite;
  }
  &-content {
    width: 100%;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: @picker-offset-top;
    transform: scale(0);
    background: #fff;
    border: 1px solid @border-color;
    z-index: @cuke-select-z-index;
    box-shadow: @default-shadow;
    border-radius: @border-radius;
  }
  &-option {
    width: 100%;
    border-bottom: 1px solid @border-color;
    padding: 10px 8px;
    background: #fff;
    transition: all @default-transition;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    &:hover {
      border-color: transparent;
      background-color: fade(@primary-color, 20%);
    }
    &:last-child {
      border-bottom: none;
    }
    &-selected {
      color: #fff;
      background-color: @primary-color;
      border-color: @primary-color;
      border-bottom: 1px solid @primary-color;
      text-shadow: @default-text-shadow;
      &:hover {
        border-color: transparent;
        background-color: @primary-color;
      }
    }
    &-disabled {
      background-color: @disabled-color;
      cursor: not-allowed;
      color: @disabled-font-color;
      &:hover {
        border-color: transparent;
        background-color: @disabled-color;
      }
    }
  }
}
