@import '../dao-color.scss';

$input-close-icon-color: $grey-light;
$input-close-icon-active-color: $grey-dark;

@mixin ellipsisStyle {
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.dao-input-with-label-container{
  width: 287px;
  &.block{
    width: 100%;
  }
  position: relative;
  input{
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0px 30px !important;
  }
  .icon{
    z-index: 2;
    position: absolute;
    margin-right: 0;
    width: 16px;
    height: 16px;
    top: 8px;
    svg{
      width: 100%;
      height: 100%;
      fill: $input-close-icon-color;
      &:hover {
        fill: $input-close-icon-active-color;
      }
    }
    &.active svg {
      fill: $input-close-icon-active-color;
    }
    &.close-icon{
      right: 8px;
      cursor: pointer;
      &.disabled{
        cursor: not-allowed;
      }
    }
  }
  .reference{
    position: absolute;
  }
}
.dao-input-with-label-popper{
  width: 140px;
  .dao-dropdown-menu{
    min-width: 140px;
  }
  &-arrow-icon{
    transform: rotate(-90deg);
    float:right;
  }
  &-dropdown{
    width: 100%;
  }
  &-dropdown-menu{
    margin-top: -5px;
  }
  .dao-dropdown-item-base{
    max-width: 140px;
    overflow: hidden;
    span{
      @include ellipsisStyle
    }
  }
}
.overflow-scroll{
  max-height: 400px;
  overflow-y: auto;
}

.dao-input-with-label-dropdown-item-base{
  max-width: 140px;
  overflow: hidden;
  @include ellipsisStyle
}