@import '../common/style/var.less';

.van-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--search-padding, @search-padding);

  &__content {
    display: flex;
    flex: 1;
    padding-left: var(--padding-sm, @padding-sm);
    border-radius: @border-radius-sm;
    background-color: var(--search-background-color, @search-background-color);

    &--round {
      border-radius: @border-radius-max;
    }
  }

  &__label {
    padding: var(--search-label-padding, @search-label-padding);
    font-size: var(--search-label-font-size, @search-label-font-size);
    line-height: var(--search-input-height, @search-input-height);
    color: var(--search-label-color, @search-label-color);
  }

  &__field {
    flex: 1;

    &__left-icon {
      color: var(--search-left-icon-color, @search-left-icon-color);
    }
  }

  &--withaction {
    padding-right: 0;
  }

  &__action {
    padding: var(--search-action-padding, @search-action-padding);
    font-size: var(--search-action-font-size, @search-action-font-size);
    line-height: var(--search-input-height, @search-input-height);
    color: var(--search-action-text-color, @search-action-text-color);

    &--hover {
      background-color: @active-color;
    }
  }
}