@import "./../../mixins/scss/mixins";

$states: (
	"default": (
		"color": var(--color-surface-tertiary)
	),
	"primary": (
		"color": var(--color-primary-default)
	),
	"success": (
		"color": var(--color-success-default)
	),
	"warning": (
		"color": var(--color-warning-default)
	),
	"danger": (
		"color": var(--color-danger-default)
	)
);

$sizes: (
	"medium": 16px,
	"small": 12px
);

:host {
	.f-field-wrapper {
		overflow: visible;
		.f-field {
			@include base();
			display: flex;
			gap: 12px;
			flex: 1 1;
			flex-direction: column;
			width: 100%;
			height: 100%;

			&[validation-state="danger"] {
				--color-subtext-default: var(--color-danger-default) !important;
				--color-input-default: var(--color-danger-default) !important;
				--color-input-border-default: var(--color-danger-default) !important;
			}

			@each $state, $value in $states {
				&[state^="#{$state}"] {
					// include mixin for inheritance rules
					@include subtext-color($state);
					@include input-color($state);
				}
			}

			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					@include inherit-size($size);
				}
			}

			&[variant="inline"] {
				display: inline-flex;
				flex-direction: row;
				width: fit-content;
				gap: 12px;
			}

			&[disabled] {
				@include disabled();
			}
		}
	}
}