@import '@/assets/bundle.scss';

.cmp-search-input {
  @extend %flex-center;
  .input-wrapper {
    // position: relative;
    flex: 1;
    background-color: $bginput;
    // padding: 10rpx;
    box-sizing: border-box;
    border-radius: 50rpx;
    @extend %flex-center;
    height: 60rpx;
  }
  .input {
    flex: auto;
    color: $inputtext;
    width: 100%;
    font-size: 30rpx;
    padding: 10rpx;
  }
  .input-placeholder {
    color: $inputplaceholder;
  }
  .icon-search, .icon-delete {
    flex: none;
    // position: absolute;
    top: 50%;
    // transform: translateY(-50%);
    width: 50rpx;
    height: 50rpx;
    @extend %bg-no-repeat-center;
    background-size: 30rpx;
    z-index: 10;
  }
  .icon-search {
    left: 10rpx;
    @extend %icon-search;
  }
  .icon-delete {
    right: 10rpx;
    @extend %icon-delete;
  }
  .btn-search {
    font-size: 30rpx;
    margin-left:20rpx;
    color: #fff;
    border-radius: 70rpx;
    padding: 10rpx 20rpx;
    background-color: rgb(129, 190, 78);
    text-align: center;
  }
}