@import "variables";


$input-border:					#d9d9d9;
$input-border-color:		#d9d9d9;
$input-disabled-bg:			#eee;
$input-disabled-color:	#999;
$input-active-border:		#aacbe1;
$input-error-border:		#ff867c;
$input-placeholder:			#c9c9c9;

%input-error-border {
	border: 1px solid $input-error-border;
}

input:not([type]),
input[type=text],
input[type=email],
input[type=date],
input[type=url],
input[type=tel],
input[type=number],
select {
	background-color: #fff;
  border: 1px solid $input-border;
  box-sizing: border-box;
	color: $color-text;
	height: $control-height;
	max-width: 100%;
  outline: none;
  padding: 0 8px;
  width: $control-default-width;

	&:focus {
    border: 1px solid $input-active-border;
  }

	&:disabled {
    background-color: $input-disabled-bg;
    color: $input-disabled-color;
  }

  &.ng-invalid.ng-dirty {
    @extend %input-error-border;
  }
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

::-webkit-input-placeholder {
  color: $input-placeholder;
}