@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-search-bar {
	position: relative;
    padding: 8px 10px;
    display: flex;
    box-sizing: border-box;
    background-color: #EFEFF4;

    &:before {
        .setTopLine(#D9D9D9);
    }

    &:after {
        .setBottomLine(#D9D9D9);
    }

    &__form {
		position: relative;
		flex: 1;
	    width: 100%;
	    height: 28px;
	    overflow: hidden;
	    background-color: #fff;
	    background-clip: padding-box;
	    border-radius: 3px;
    }

    &__box {
    	position: relative;
	    padding-left: 30px;
	    padding-right: 30px;
	    height: 100%;
	    width: 100%;
	    box-sizing: border-box;
	    z-index: 1;
    }

    &__input {
		padding: 4px 0;
		width: 100%;
		height: 28px;
		min-height: inherit;
		border: 0;
		font-size: 14px;
		line-height: 28px;
		box-sizing: border-box;
		background: transparent;
    }

    &__label {
		display: flex;
		justify-content: center;
		align-items: center;
    	position: absolute;
		top: 1px;
		right: 1px;
		bottom: 1px;
		left: 1px;
		z-index: 2;
		border-radius: 3px;
		text-align: center;
		color: #808080;
		background: #FFFFFF;
    }

    &__text {
		display: inline-block;
		font-size: 14px;
		vertical-align: middle;
		margin-left: 5px;
    }

    &__cancel {
		margin-left: 10px;
		line-height: 28px;
		color: @balanced;
		white-space: nowrap;
    }

    &__icon {
    	vertical-align: middle;
    }

    &__search {
    	position: absolute;
	    left: 10px;
	    top: 8px;
    }

    &__clear {
    	display: none;
    	position: absolute;
	    top: 8px;
	    right: 0;
	    padding: 0 10px;
    }

    &--focus &__clear {
		display: block;
	}

	&--disabled {
		opacity: .3;
	}
}