@import "var";

.@{prefixName}-search{
  .flex(@align-items : center);
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 0;

	position: relative;
	&::after{
		.border(1px, @search-border-color);
	}
	&.is-disabled{
		opacity: .5;
		pointer-events: none;
	}
  &.normal{
    flex-direction: row-reverse;
    .icon-search{
      margin-right: 0;
      margin-left: @search-icon-margin;
    }
  }
  &-tags{
    .flex(@align-items : center);
    .flex-no-stretch();
    font-size: @search-tags-text-size;
    color: @search-tags-text-color;
    padding-right: @search-tags-padding-right;
    margin-right: @search-tags-margin-right;
    .icon-page-next{
      width: @search-tags-icon-next-size;
      height: @search-tags-icon-next-size;
      margin-left: 10rpx;
		}

		position: relative;
		&::after{
			.border(1px, @search-tags-border-color);
		}
	}


	.icon-search{
		margin-right: @search-icon-margin;
	}
  &__input{
    flex-grow: 1;
		font-size: @search-text-size;
		padding: 1px 0;
  }
  &__cancel{
    .flex-no-stretch();
    color: @search-cancel-text-color;
		margin-left: @search-cancel-margin-left;
		font-size: @search-text-size;
		&:active{
			opacity: .5;
		}
  }
  &__reset{
		margin-left: @search-reset-margin-left;
  }
}

.placeholder{
  color: @search-placeholder-text-color;
  font-size: @search-text-size;
}