@import '../../style/';

.hiui-select {
  cursor:pointer; transition:border-color .3s, box-shadow .3s; position:relative; padding:0 15px 0 10px; border-radius: _border_radius; border:1px solid _grey; display:inline-block;


  &.hover {
    border-color:_grey_deep;
    .handler {
      .arrow {
        border-color:_grey_deep;
      }
    }
  }
  &.error {
    border-color: _red_light;
    .handler {
      .arrow {
        border-color:_red_light;
      }
    }
    &:not(.active).hover {
      border-color: _red_light !important;
      .handler {
        .arrow {
          border-color:_red_light !important;
        }
      }
    }
  }

  &.disabled {
    border-color:_grey_light;
    .handler {
      .arrow {
        border-color:_grey;
      }
    }
  }
  &.active {
    border-color:_grey_deep; box-shadow: 0 0 0 2px rgba(153, 153, 153, .2);
    .handler {
      .arrow {
        border-color:_grey_deep; transform:translateY(-50%) rotate(-135deg);
      }
    }
  }
  &.has-icon {
    .handler {
      .selected {
        padding-left:30px
      }
      .placeholder {
        padding-left:30px
      }
    }
  }

  .handler {
    width:100%; height:100%; position: relative;

    .icon {
      width:20px; height:20px; vertical-align:middle; position:absolute; z-index:1; top:50%; left:0; transform:translateY(-50%)
    }
    .label {
      transform-origin: left top; line-height:1; transition: transform .3s, margin-top .3s; color:_grey_deep; position: absolute; z-index:1; left:0; top:50%; transform: translateY(-50%); margin-bottom:0;

      &.float {
        transform: translateY(-50%) scale(.8); margin-top: - + _select_float_gap_md
      }
    }
    .selected {
      max-width:90%; line-height:1; position: absolute; z-index:1; left:0; top:50%; transform:translateY(-50%);transition: margin-top .3s; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

      &.float {
        margin-top: _select_float_gap_md
      }
    }

    .arrow {
      margin-top:-1px;transform-origin: center 5px;transition: transform .3s, border-color .3s; border:1px solid _grey; border-width:0 1px 1px 0; width:8px; height:8px; position:absolute; z-index:1; right:0; top:50%; transform:translateY(-50%) rotate(45deg)
    }

  }

  .body {
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);min-width:100%; position:absolute; background-color:#fff; z-index:99; right:0; top:100%; margin-top:6px; max-height:350px; overflow:auto; border-radius:2px;
  }

}

for size in _size {
  .hiui-select-{size} {
    font-size: _select_font_ + size; height:_size_ + size; width:_select_width_ + size;
  }
  .hiui-select-{size}.float {
    height:_select_float_height_ + size;
  }
}