@import 'variable';
$class-prefix: 'cn-ui-m';

.#{$hashClassName}.#{$class-prefix}-search {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--cn-search-height);
  .#{$class-prefix}-search {
    &-input-box {
      flex: auto;
      background: var(--cn-search-background);
      border-radius: var(--cn-search-border-radius);
      overflow: hidden;
      border: solid 1px transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: var(--cn-search-padding-left);
      .#{$class-prefix}-search-input-box-icon {
        flex: none;
        height: #{$m-s-18};
        color: #{$m-color-bg-dark};
        font-size: #{$m-s-15};
      }
      .#{$class-prefix}-search-input {
        flex: auto;
        padding: $m-s-1 $m-s-8 $m-s-1 $m-s-4;
        margin: 0;
        box-shadow: none;
        height: calc(var(--cn-search-height) - 2px);
        box-sizing: border-box;
        background-color: transparent;
        // TODO: 待Input替换后，这里需要同步替换className
        .mt-input-textinput {
          font-size: #{$m-font-size-body-1};
        }
        .mt-input-icon {
          font-size: #{$m-s-15};
        }
        .#{$class-prefix}-input-element {
          line-height: 19px;
        }
        &.#{$class-prefix}-input-without-icon {
          padding-left: 8px;
        }
      }
    }

    &-suffix {
      flex: none;
      margin-left: 4px;
    }

    &-cancel-button.#{$class-prefix}-button {
      padding: 3px 0 3px 12px;
    }
    &-search-button {
      margin-left: $m-s-12;
    }
  }

  &-active {
    .#{$class-prefix}-search-input-box-icon {
      color: #{$m-color-bg-darker1};
    }
  }
}