@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;

$hy-search-close-size: 20px !default;

/* #ifdef H5 */
// iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除
[type="search"]::-webkit-search-decoration {
  display: none;
}
/* #endif */

@include b(search) {
  @include flex(row);
  align-items: center;
  flex: 1;

  @include e(content) {
    @include flex;
    align-items: center;
    padding: 0 $hy-border-margin-padding-lg;
    flex: 1;
    justify-content: space-between;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    overflow: hidden;
    background-color: $hy-background--empty;

    @include e(icon) {
      @include flex;
      align-items: center;
    }

    @include e(label) {
      color: $hy-text-color;
      font-size: $hy-font-size-base;
      margin: 0 4px;
    }

    /*清除icon样式*/
    @include e(close) {
      width: $hy-search-close-size;
      height: $hy-search-close-size;
      border-radius: $hy-radius-circle;
      background-color: $hy-background--track;
      @include flex(row);
      align-items: center;
      justify-content: center;
      transform: scale(0.82);
    }

    /*输入框样式*/
    @include e(input) {
      flex: 1;
      font-size: $hy-font-size-base;
      line-height: 1;
      margin: 0 $hy-border-margin-padding-sm;
      color: $hy-text-color;
      background-color: $hy-background--empty;

      @include m(disabled) {
        color: $hy-text-color--disabled;
      }

      @include m(placeholder) {
        font-size: 25rpx;
        color: $hy-text-color--placeholder;
        line-height: 30rpx;
      }
    }
  }

  @include e(action) {
    font-size: $hy-font-size-base;
    color: $hy-text-color;
    width: 0;
    overflow: hidden;
    transition-property: width;
    transition-duration: 0.3s;
    /* #ifndef APP-NVUE */
    white-space: nowrap;
    /* #endif */
    text-align: center;

    @include m(active) {
      width: 100rpx;
      margin-left: $hy-border-margin-padding-sm;
    }
  }
}