@import '../../style/themes';
@import '../../style/mixins';

@import './mixin';
@import './search';
@import './textarea';

.x-input {
	@include input();
	display: flex;
	padding: 0;
	&_addon {
		align-self: stretch;
		display: flex;
		align-items: center;
		background-color: $input-addon-bg;
		padding: 0 $input-padding-horizontal;
		&:first-child {
			// border: $border-base;
			border-right: $border-base;
		}
		&:last-child {
			// border: $border-base;
			border-left: $border-base;
		}
	}

	&-focus &_addon {
		border-color: $primary-color;
	}
	
	&_prefix, &_suffix {
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
	}
	&_prefix {
		margin-left: $margin-xs + 2;
		margin-right: -4px;
	}
	&_suffix {
		margin-right: $margin-xs + 2;
		margin-left: -4px;
	}
	&_clear {
		@include clear()
	}
	
	&_input {
		flex-grow: 1;
		width: 0;
		padding: $input-padding;
		border: 0;
		background: transparent;
		outline: 0;
	}
}

// .x-input-affix-wrapper {
// 	@include input();
// 	display: flex;
// 	// align-items: center;
// 	color: inherit;
// 	font-size: inherit;
// 	.x-input {
// 		flex-grow: 1;
// 		background: transparent;
// 		padding: 0;
// 		border: 0;
// 		outline: 0;
// 		&-prefix, &-suffix {
// 			display: flex;
// 			justify-content: center;
// 			align-items: center;
// 			// min-width: 30px;
// 			white-space: nowrap;
// 		}
// 		&-prefix {
// 			margin-right: 4px;
// 		}
// 		&-suffix {
// 			margin-left: 4px;
// 		}
// 		&-clear {
// 			@include clear()
// 		}
// 	}
// }