// ============================================================================
// :: Input
// ============================================================================
.a-input {
	position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-input__container {
	position: relative;
}

@mixin input_field() {
	position: relative;

	width: 100%;
	height: 100%;
	max-height: 4.8rem;
	overflow: hidden;
	padding: 2.8rem 3rem 1.2rem;

	font-family: $font-family-roboto;
	font-weight: $font-weight-thin;
	font-size: $font-size;
	line-height: $line-height-3x-large;

	border-radius: 3.2rem;
	border: 0.1rem solid transparent;

	background-color: $background-color-grey-extra-light;

	color: $text-color;

	-webkit-appearance: none;
	-moz-appearance: none;

	transition: border 0.2s ease-in-out, padding 0.2s ease-in-out, background-color 0.2s ease-in-out;

	&:placeholder-shown {

		& + .a-input__label {
			transform: translateY(-50%);

			animation: hide 1s ease-in-out;
		}
	}

	&:not(:placeholder-shown),
	&:focus {
		border: $border-default;
		background-color: $background-color-white;

		+ .a-input__label {
			font-family: $font-family-roboto;
			font-weight: $font-weight-bold;
			font-size: $font-size-2x-small;
			letter-spacing: 0.06rem;
			text-transform: uppercase;

			color: $text-color-grey-medium;

			transform: translateY(-50%) translateY(-1.2rem);

			animation: show 1s ease-in-out;
		}
	}

	&:focus {
		box-shadow: 0 0 0 0.1rem $outline-color-green;
		outline: none;
	}
}

.a-input__field {
	@include input_field();
}

.a-input__label {
	position: absolute;
	top: 50%;
	left: 3rem;

	display: block;
	max-width: calc(100% - 10rem);
	overflow: hidden;

	font-family: $font-family-roboto;
	font-weight: $font-weight-thin;
	text-overflow: ellipsis;
	white-space: nowrap;

	color: $text-color-grey;

	transform: translateY(-50%) translateY(-1.2rem);

	pointer-events: none;
}

.a-input__field input[type="number"]::-webkit-outer-spin-button,
.a-input__field input[type="number"]::-webkit-inner-spin-button {
	margin: -1rem 0 0;

	background: transparent;
	box-shadow: none;
	border: none;
}

.a-input__field input[type="number"] {
	-moz-appearance: textfield;
}

.a-input__pretext {
	font-weight: $font-weight-bold;

	color: $text-color-primary;
}

.a-input__feedback {
	display: flex;
	align-items: flex-start;
	margin-top: 1rem;
	margin-left: 3rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-semibold;
	line-height: $line-height;
}

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

	.a-input__field {
		background-color: $background-color-white-3x-light;
		color: $text-color-white;

		&:focus {
			border: $border-white;
		}

		&:not(:placeholder-shown),
		&:focus {
			border: $border-white;
		}
	}

	.a-input__label {
		color: $text-color-white;
	}
}

.a-input--light {

	.a-input__field {
		background-color: $background-color-white;
	}
}

.a-input--select {
	@extend %__icon-arrow-down-s;

	.a-input__field {
		padding: 1.7rem 3rem 0.6rem;

		&:not(:placeholder-shown) {
			background-color: $background-color-grey-extra-light;
			border: 0.1rem solid transparent;
		}
	}

	&::before {
		position: absolute;
		top: 50%;
		right: 3rem;
		z-index: $z-index-high;

		color: $text-color;

		transform: translateY(-50%);
		transform-origin: center;
	}

	&.a-input--inverted {

		.a-input__field {

			&:not(:placeholder-shown) {
				background-color: $background-color-white-3x-light;
				color: $text-color-white;
			}
		}
	}

	&.a-input--light {

		.a-input__field {

			&:not(:placeholder-shown) {
				background-color: $background-color-white;
			}
		}
	}
}

.a-input--textarea {

	.a-input__field {
		padding-top: 1.5rem;
	}

	textarea {
		max-height: none;

		overflow-y: scroll;
		padding-top: 1.5rem;

		border-radius: $border-radius;

		resize: none;
	}

	.a-input__label {
		top: 2.5rem;
	}
}

.a-input--datepicker {
	@extend %__icon-date;

	&::before {
		position: absolute;
		top: 50%;
		right: 3rem;
		z-index: $z-index-high;

		color: $text-color;

		transform: translateY(-50%);
		transform-origin: center;
	}

	.a-input__label {
		font-family: $font-family-beausans;
		font-weight: $font-weight-bold;
		font-size: $font-size;

		color: $text-color;
	}
}

.a-input--search,
.a-input--newsletter {

	.a-input__label {
		max-width: calc(100% - 15rem);
	}

	.a-input__field {
		padding-right: 14rem;
	}

	.a-input__button {
		position: absolute;
		top: 50%;
		right: 0;

		background: transparent;

		transform: translateY(-50%);

		.a-button__icon,
		.a-button__text {
			color: $text-color;
		}

		&:hover {

			&::before {
				background: transparent;
			}
		}

		&::before {
			background: transparent;
		}
	}

	&.a-input--inverted .a-input__field:not(:placeholder-shown) + .a-input__label {
		color: $text-color-white;
	}
}

.a-input--newsletter {

	.a-input__field:focus {

		+ .a-input__label {
			color: $text-color-white;
		}
	}
}

.a-input__button {
	background-color: transparent !important; /* stylelint-disable-line */
}

.a-input--inverted {

	.a-input__button {

		.a-button__text {
			color: $text-color-white-2x-light;

			transition: opacity 0.5s ease-in-out 0.2s, color 0.2s ease-in-out;
		}

		.a-button__icon {
			color: $text-color-white-2x-light;

			transform: translateX(0);

			transition: transform 0.4s ease-in-out, color 0.2s ease-in-out;
		}

		&:hover:not([disabled]) {

			.a-button__text {
				color: $text-color-white;
			}

			.a-button__icon {
				color: $text-color-white;
			}
		}
	}
}

.a-input--search {

	.a-input__field {
		border: none;
		background-color: $background-color-white;
	}
}

.a-input--newsletter {
	position: relative;

	overflow: hidden;

	.a-input__checkmark {
		position: absolute;
		top: 50%;
		right: 2rem;

		width: 2rem;
		height: 2rem;

		opacity: 0;

		transform: translateX(-50%) translateY(-50%);

		polyline {
			stroke-dasharray: 30px;
			stroke-dashoffset: -30px;

			transition: stroke-dashoffset 0.3s ease-in-out 0.3s;
		}
	}

	.a-input__button {

		.a-button__text {
			display: flex;

			transition: padding 0s 0.5s;

			&::before {
				order: 2;

				margin-left: 1rem;
			}
		}
	}

	&.is-subscribed {
		pointer-events: none;

		.a-input__button {
			color: $text-color-white;

			animation: showHideButton 1s ease-in-out;

			.a-button__text {
				padding-right: 2.4rem;
			}

			.a-button__icon {
				color: $text-color-white;

				transform: translateX(5rem);
			}
		}

		.a-input__checkmark {
			opacity: 1;

			polyline {
				stroke-dashoffset: 0;
			}
		}
	}

	&.is-error {
		animation: shake 0.5s ease;
	}
}

.a-input--file {

	.a-input__field {
		position: absolute;
		z-index: -1;

		width: 0.01rem;
		height: 0.01rem;
		overflow: hidden;

		opacity: 0;
	}

	.a-input__label {
		@include input_field();

		left: 0;

		display: inline-block;
		padding: 1.2rem 3rem;

		font-weight: $font-weight-lite;
		font-size: $font-size;
		text-transform: initial;

		border: 0.1rem dashed $border-color-grey !important; /* stylelint-disable-line */

		transform: initial !important; /* stylelint-disable-line */

		cursor: pointer;

		pointer-events: initial;


		[class*="icon"] {

			&::before {
				margin-right: 1rem;

				font-size: $font-size-1x-large;

				color: $text-color-primary;
			}
		}
	}

	.a-input__field:focus + .a-input__label,
	.a-input__field + .a-input__label:hover {
		border: 0.1rem dashed $border-color-primary !important; /* stylelint-disable-line */
	}
}

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

	&.is-error {

		.a-input__field input,
		.a-input__field select,
		.a-input__field textarea {
			border: $border-error;
		}

		.a-input__feedback {
			color: $ui-color-error;

			&::before {
				margin-right: 1rem;
			}
		}
	}
}

// ============================================================================
// :: AnimationS
// ============================================================================
@keyframes show {

	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;

		transform: translateY(-50%) translateY(-1.2rem);
	}

	30% {
		opacity: 0;
	}

	58% {
		transform: translateY(-50%) translateY(-1.2rem);
	}

	65% {
		opacity: 1;
	}
}

@keyframes hide {

	0% {
		opacity: 0;

		transform: translateY(-50%) translateY(-1.2rem);
	}

	40% {
		transform: translateY(-50%);
	}

	70% {
		opacity: 1;
	}
}

@keyframes showHideButton {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes shake {

	0% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(1rem);
	}

	40% {
		transform: translateX(-1rem);
	}

	60% {
		transform: translateX(1rem);
	}

	80% {
		transform: translateX(-1rem);
	}

	100% {
		transform: translateX(0);
	}
}