//   Copyright 2024 Cisco Systems, Inc.
//
//   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.
//
//   SPDX-License-Identifier: Apache-2.0

@use '../../base/typography';

:root {
	--mat-option-label-text-size: 0.75rem;
	--mat-optgroup-label-text-size: 0.75rem;
}

.form-field-container {
	display: flex;
	flex-direction: column;
	color: var(--form-text-color);

	&.inline-container {
		flex-direction: row;
		align-items: center;
	}

	.mat-mdc-form-field-hint-wrapper,
	.mat-mdc-form-field-error-wrapper {
		padding: 0;
	}

	.mat-mdc-text-field-wrapper {
		background-color: var(--form-background-color);
		border: 1px solid var(--form-border-color);

		&:hover {
			border-color: var(--form-hover-border-color);
		}

		.mdc-text-field__input {
			color: var(--form-text-color);
		}

		::placeholder {
			color: var(--form-placeholder-color);
		}
	}

	/* Apply dark mode styles when the .dark class is added */
	&.dark {
		color: var(--form-dark-text-color);

		mat-label {
			color: var(--form-dark-text-color);
		}

		.mat-mdc-text-field-wrapper {
			background-color: var(--form-dark-background-color);
			border: 1px solid var(--form-dark-border-color);

			&:hover {
				border-color: var(--form-dark-hover-border-color);
			}

			.mdc-text-field__input {
				color: var(--form-dark-text-color);
			}

			::placeholder {
				color: var(--form-dark-placeholder-color);
			}
		}

		mat-icon {
			color: var(--form-dark-text-color);
		}
	}

	mat-label {
		@include typography.paragraph-regular-p4-small;
		color: var(--form-text-color);

		&.dark {
			color: var(--form-dark-text-color);
		}
	}

	mat-form-field {
		.mat-mdc-form-field-icon-prefix > .mat-icon,
		.mat-mdc-form-field-icon-suffix > .mat-icon {
			padding: 8.5px;
		}

		.mdc-notched-outline {
			display: none;
		}

		.mat-mdc-text-field-wrapper {
			background-color: var(--form-background-color);
			border: 1px solid var(--form-border-color);
			border-radius: 6px;

			&:hover {
				border-color: var(--form-hover-border-color);
			}

			.mat-mdc-select-value,
			.mdc-text-field__input {
				@include typography.paragraph-regular-p3-default;
				color: var(--form-text-color);
			}

			&.dark {
				background-color: var(--form-dark-background-color);
				border: 1px solid var(--form-dark-border-color);

				&:hover {
					border-color: var(--form-dark-hover-border-color);
				}

				.mat-mdc-select-value,
				.mdc-text-field__input {
					color: var(--form-dark-text-color);
				}
			}
		}
	}
}
