@import './var.less';

@auto-complete-prefix-cls: ~"@{css-prefix}-auto-complete";

.@{auto-complete-prefix-cls} {
  position: relative;

  * {
    transition: @transition-quick;
  }

  &-list {
    position: absolute;
    width: 100%;
    margin-top: 5px;
    border-radius: @border-radius-large;
    background-color: white;
    box-shadow: @shadow-base;
    font-size: @font-size-default;
    transform-origin: 50% 0;
    z-index: @z-index-pop;

    .@{auto-complete-prefix-cls}-item {
      &:first-child {
        border-radius: @border-radius-large @border-radius-large 0 0;
      }

      &:last-child {
        border-radius: 0 0 @border-radius-large @border-radius-large;
      }
    }
  }

  &-item {
    padding: 5px 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    &-active {
      background: @primary-color-choosed;
    }
  }

  &-enter {
    display: block;
    transform: scaleY(0.8);
  }

  &-active-enter {
    display: block;
    transform: scaleY(1);
  }

  &-done-enter {
    display: block;
    transform: scaleY(1);
  }

  &-exit {
    display: block;
    transform: scaleY(1);
  }

  &-active-exit {
    display: block;
    transform: scaleY(0.4);
  }

  &-done-exit {
    display: none;
    transform: scaleY(0.4);
  }
}