@import "~@/assets/styles/utils/index.scss";

@include c(search) {
  position: relative;

  @include e(input-wrap) {
    @include margin(null, px2rpx(30px), null, px2rpx(30px));

    background: map-get($colors, gray1);
    height: px2rpx(68px);
    border-radius: px2rpx(16px);
    background: {
      image: url("#{$image-url}/components/search/search.png");
      size: px2rpx(28px) px2rpx(28px);
      repeat: no-repeat;
      position: px2rpx(24px) center;
    }
  }

  @include e(input) {
    @include text--middle(px2rpx(68px));
    @include margin(null, px2rpx(65px), null, px2rpx(65px));
  }

  @include e(submit) {
    @include position--absolute(50%, 0);

    padding: px2rpx(10px) px2rpx(30px);
    transform: translateY(-50%);
    line-height: 100%;
    display: none;
  }

  @include s(has-submit) {
    @include c(search) {
      @include e(input-wrap) {
        margin-right: px2rpx(112px);
      }

      @include e(submit) {
        display: inline-block;
      }
    }
  }
}