// =============================================================================
// :: Input
// =============================================================================
.c-input {
	position: relative;

	width: 100%;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-input__label {
	display: block;
	margin-bottom: 1.5rem;

	font-weight: $font-weight-medium;
}

.c-input__wrapper {
	position: relative;

	width: 100%;
}

.c-input__field,
.c-input__textarea {
	width: 100%;
	padding: 1.5rem 2.4rem;

	font-weight: $font-weight-medium;

	color: $text-color-base;
	background-color: transparent;
	border: $border-width-base solid $border-color-medium;

	&:focus {
		outline: none;
		border-color: $border-color-dark;
	}

	&::placeholder {
		color: $text-color-base;
	}

	// &:focus ~ .c-input__button {}

	// &:focus ~ .c-input__icon {}

	// @include placeholder() {}
}

.c-input__field {
	height: 100%;

	border-radius: $border-radius-2x-small;
}

.c-input__select {
	width: 100%;

	font-weight: $font-weight-medium;

	appearance: none;

	color: $text-color-highlight;
	border: none;
	background-color: transparent;

	&:focus {
		outline: none;
	}
}

.c-input__textarea {
	resize: vertical;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-input--inverted {

	.c-input__label {
		color: $text-color-light;
	}

	.c-input__field,
	.c-input__textarea {
		color: $text-color-light;
		border-color: $border-color-light;

		&:focus {
			outline: none;
			border-color: $border-color-dark;
		}

		&::placeholder {
			color: $text-color-lighter;
		}
	}
}

.c-input--select {
	display: flex;
	align-items: center;

	select::-ms-expand {
		display: none;
	}

	.c-input__wrapper {
		display: flex;
		align-items: center;
	}

	.c-input__label {
		margin-right: 1.5rem;
		margin-bottom: 0;

		font-family: $font-family-primary;
		font-weight: $font-weight-medium;

		white-space: nowrap;

		color: $text-color-base;
	}

	.c-input__icon {
		position: absolute;
		top: 0;
		right: 0;

		padding-bottom: 0.5rem;

		// transform: translateY(-50%);

		pointer-events: none;
	}
}

// .c-input--textarea {}

// .c-input__wrapper--with-icon {}

// .c-input__wrapper--with-button {}

// =============================================================================
// :: States
// =============================================================================
// .c-input {

// 	&.is-disabled {

// 	}

// 	&.is-error {

// 		.a-formfield__input {
// 			border-color: $ui-error;

// 			color: $ui-error;
// 		}
// 	}

// 	&.is-warning {

// 		.a-formfield__input {
// 			border-color: $ui-warning;

// 			color: $ui-warning;
// 		}
// 	}

// 	&.is-succes {

// 		.a-formfield__input {
// 			border-color: $ui-succes;

// 			color: $ui-succes;
// 		}
// 	}
// }