@import './common/var.css';
@import './icon.css';

@component-namespace van {
  @b search {
    position: relative;
    box-sizing: border-box;
    padding: 4px 15px;
    background-color: #F2F2F2;

    @m focus {
      padding-right: 50px;
    }

    @e input-wrap {
      position: relative;
      padding: 8px 24px 8px 35px;
      border: 1px solid $c-gray-light;
      border-radius: 4px;
      background-color: $c-white;
    }

    @e input {
      display: block;
      width: 100%;
      height: 14px;
      font-size: 14px;
      color: $c-gray-dark;
      border: none;
      outline: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    @e cancel {
      position: absolute;
      line-height: 34px;
      padding: 4px 0;
      top: 0;
      right: 10px;
      font-size: 14px;
      color: $c-green;
    }

    .van-icon-search {
      color: $c-gray-darker;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      font-size: 16px;
      line-height: 1;
    }

    .van-icon-clear {
      font-size: 14px;
      line-height: 16px;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: #888;
    }
  }
}