/*!
 * Copyright (c) 2021 Ford Motor Company
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use '../../Styles/main';

.input-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 0.5rem;

	color: inherit;

	position: relative;

	.input-label {
		margin-bottom: 0.5rem;

		font-weight: bold;
		font-size: 0.9rem;
	}

	.input-element {
		width: 100%;
		height: 2.25rem;
		margin-bottom: 1.5rem;
		padding: 0.75rem 2.25rem 0.75rem 0.75rem;

		color: main.$asphalt;
		font-weight: bold;
		font-size: 1rem;

		background-color: main.$white;
		border: 0;
		border-radius: 3px;
		outline: none;
		@include main.box-shadow(1px, main.$asphalt);

		@include main.breakpoint-medium {
			font-size: 0.9rem;
		}

		&::placeholder {
			opacity: 0.3;
		}

		&:focus {
			@include main.box-shadow(2px, main.$teal);
		}
	}

	.validation-message {
		color: main.$red;
		font-size: 0.8rem;

		position: absolute;
		bottom: 0.2rem;
	}

	&.invalid {
		.input-element {
			@include main.box-shadow(2px, main.$red);
		}
	}
}

@include main.dark-theme {
	.input-group {
		.input-element {
			color: main.$off-white;
			background-color: main.$asphalt;
			@include main.box-shadow(1px, main.$gray-3);

			&:focus {
				@include main.box-shadow(2px, main.$sea-foam);
			}
		}

		.validation-message {
			color: main.$light-red;
		}

		&.invalid {
			.input-element {
				@include main.box-shadow(2px, main.$light-red);
			}
		}
	}
}
