@import "variables";
$input-border: #d9d9d9;
$input-border-color: #d9d9d9;
$input-disabled-bg: #eee;
$input-disabled-color: #999;
$input-active-border: #3dad91;
$input-error-border: #f5222d;
$input-placeholder: #c9c9c9;
%input-error-border {
	border: 1px solid $input-error-border;
	box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
}

.cc-search-input::-webkit-search-decoration,
.cc-search-input::-webkit-search-cancel-button,
.cc-search-input::-webkit-search-results-button,
.cc-search-input::-webkit-search-results-decoration {
    display: none;
}

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

.cc-input,
.cc-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;
	border-radius: 2px;
    &:focus {
		border: 1px solid $input-active-border;
		box-shadow: 0 0 0 2px rgba(30, 160, 132, 0.2);
    }
    &:disabled {
        background-color: $input-disabled-bg;
        color: $input-disabled-color;
    }
    &.ng-invalid.ng-dirty {
        @extend %input-error-border;
    }
}
