@charset "UTF-8";
/*
  @component search
  @display Search
  @chinese 搜索
  @family data-display
*/
:root {
  /*
    @desc small-height
    @namespace size/common
    @semantic 高度(小)
  */
  --search-small-height: var(--s-7);
  /*
    @desc medium-height
    @namespace size/common
    @semantic 高度(中)
  */
  --search-medium-height: var(--s-9);
  /*
    @desc large-height
    @namespace size/common
    @semantic 高度(大)
  */
  --search-large-height: var(--s-11);
  /*
    @desc border-radius
    @namespace size/common
    @semantic 圆角尺寸
  */
  --search-corner: var(--corner-1);
  /*
    @desc border-color
    @namespace style/common
    @semantic 边框颜色
  */
  --search-border-color: var(--color-transparent);
  /**
    @desc input-font-color
    @namespace style/common
    @semantic 字体色
  */
  --search-input-font-color: var(--color-text1-4);
  /**
    @desc icon-color
    @namespace style/common
    @semantic 图标色
  */
  --search-input-icon-color: var(--color-text1-2);
  /*
    @desc background-color
    @namespace style/common
    @semantic 背景色
  */
  --search-bg-color: var(--color-fill1-1);
  /**
    @desc text-color
    @namespace style/font
    @semantic 字色
  */
  --search-font-color: var(--color-text1-4);
  /**
    @desc icon-color
    @namespace style/icon
    @semantic 图标色
  */
  --search-icon-color: var(--color-text1-4); }

.mt-search {
  display: flex;
  flex-direction: row;
  position: relative;
  border-radius: var(--search-corner); }
  .mt-search--wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-radius: var(--search-corner);
    background-color: var(--search-bg-color); }
  .mt-search--icon {
    display: block;
    width: var(--s-4);
    height: var(--s-4);
    margin-top: auto;
    margin-bottom: auto;
    margin-left: var(--s-3);
    color: var(--search-input-icon-color); }
    .mt-search--icon::before {
      display: block;
      width: var(--s-4);
      height: var(--s-4);
      line-height: var(--s-4);
      font-size: var(--s-4);
      text-align: center;
      color: var(--search-input-icon-color); }
  .mt-search-input {
    flex: 1;
    height: var(--s-7);
    margin: auto;
    background: var(--color-transparent);
    --input-normal-text-color: var(--search-input-font-color); }
    .mt-search-input > input {
      width: 0; }
    .mt-search-input input::-webkit-search-decoration,
    .mt-search-input input::-webkit-search-cancel-button {
      display: none; }
  .mt-search--small {
    min-height: var(--s-7);
    height: var(--search-small-height); }
    .mt-search--small > img {
      width: 100%;
      height: 100%; }
  .mt-search-input--small {
    padding-left: var(--box-small-spacing); }
  .mt-search--small-cancel {
    font-size: var(--s-4);
    line-height: var(--search-small-height);
    margin: 0 var(--s-4);
    color: var(--search-font-color); }
  .mt-search--medium {
    min-height: var(--s-7);
    height: var(--search-medium-height); }
    .mt-search--medium > img {
      width: 100%;
      height: 100%; }
  .mt-search-input--medium {
    padding-left: var(--box-medium-spacing); }
  .mt-search--medium-cancel {
    font-size: var(--s-4);
    line-height: var(--search-medium-height);
    margin: 0 var(--s-4);
    color: var(--search-font-color); }
  .mt-search--large {
    min-height: var(--s-7);
    height: var(--search-large-height); }
    .mt-search--large > img {
      width: 100%;
      height: 100%; }
  .mt-search-input--large {
    padding-left: var(--box-large-spacing); }
  .mt-search--large-cancel {
    font-size: var(--s-4);
    line-height: var(--search-large-height);
    margin: 0 var(--s-4);
    color: var(--search-font-color); }
