@use '../../scss/theming' as *;

@mixin daff-form-field-theme($theme) {
	$primary: daff-get-palette($theme, primary);
	$secondary: daff-get-palette($theme, secondary);
	$tertiary: daff-get-palette($theme, tertiary);
	$critical: daff-get-palette($theme, critical);
	$base: daff-get-base-color($theme, base);
	$base-contrast: daff-get-base-color($theme, base-contrast);
	$neutral: daff-get-palette($theme, neutral);
	$mode: daff-get-theme-mode($theme);

	// stylelint-disable selector-class-pattern
	.daff-form-field {
		@include light($mode) {
			.daff-form-field__control {
				border: 1px solid daff-color($neutral);
				color: daff-color($neutral);

				* {
					::-webkit-input-placeholder {
						color: daff-color($neutral);
					}
				}
			}

			.daff-prefix,
			.daff-suffix {
				color: daff-color($neutral);
			}
		}

		@include dark($mode) {
			.daff-form-field__control {
				border: 1px solid daff-color($neutral, 40);
				color: daff-color($neutral, 40);

				* {
					::-webkit-input-placeholder {
						color: daff-color($neutral, 40);
					}
				}
			}

			.daff-prefix,
			.daff-suffix {
				color: daff-color($neutral, 40);
			}
		}

		&.daff-focused {
			.daff-form-field__control {
				border: 1px solid daff-color($primary);
			}

			&.fluid {
				.daff-form-label,
				label,
				.daff-form-field__label {
					color: daff-color($primary);
				}
			}
		}

		&.daff-error {
			.daff-form-field__control {
				border: 1px solid daff-color($critical);
			}

			&.fluid {
				.daff-form-label,
				label,
				.daff-form-field__label {
					color: daff-color($critical);
				}
			}
		}

		&.daff-valid {
			color: $base-contrast;
		}

		&__control {
			background: $base;

			input,
			textarea,
			select {
				color: $base-contrast;
			}
		}
	}
}