@import (reference) "~dyna-ui-styles/styles/WHITE_BLACK";
@import (reference) "~dyna-ui-styles/styles/WHITE_RED";
@import (reference) "~dyna-ui-styles/styles/RED_WHITE";
@import (reference) "~dyna-ui-styles/styles/WHITE_ORANGE";
@import (reference) "~dyna-ui-styles/styles/BLACK_WHITE";
@import (reference) "~dyna-ui-styles/styles/BLACK_ORANGE";
@import (reference) "~dyna-ui-styles/styles/GREY_WHITE";
@import (reference) "~dyna-ui-styles/styles/ORANGE_WHITE";
@import (reference) "~dyna-ui-styles/colors/pantone-coated";

.dyna-ui-field-wrapper {
	outline: none;

	&.dyna-ui-field-wrapper {

		&--color- {
			&WHITE_BLACK {
				.dyna-ui-label {
					border-color: @color-WHITE_BLACK-foreground-1;
					background-color: @color-WHITE_BLACK-background-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-WHITE_BLACK-foreground-1;
					background-color: @color-WHITE_BLACK-white-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-WHITE_BLACK-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-WHITE_BLACK-background-1;
						color: @color-WHITE_BLACK-foreground-1;
					}
				}
			}
			&GREY_WHITE {
				.dyna-ui-label {
					border-color: @color-GREY_WHITE-foreground-1;
					background-color: @color-GREY_WHITE-background-1;
					color: @color-GREY_WHITE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-GREY_WHITE-foreground-1;
					background-color: @color-GREY_WHITE-white-1;
					color: @color-GREY_WHITE-background-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-GREY_WHITE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-GREY_WHITE-background-1;
						color: @color-GREY_WHITE-foreground-1;
					}
				}
			}
			&WHITE_RED {
				.dyna-ui-label {
					border-color: @color-WHITE_RED-foreground-1;
					color: @color-WHITE_RED-foreground-1;
					background-color: @color-WHITE_RED-background-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-WHITE_RED-foreground-1;
					background-color: @color-WHITE_RED-white-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-WHITE_RED-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-WHITE_RED-background-1;
						color: @color-WHITE_RED-foreground-1;
					}
				}
			}
			&RED_WHITE {
				.dyna-ui-label {
					border-color: @color-RED_WHITE-background-1;
					color: @color-RED_WHITE-foreground-1;
					background-color: @color-RED_WHITE-background-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-RED_WHITE-background-1;
					background-color: @color-RED_WHITE-white-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-RED_WHITE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-RED_WHITE-background-1;
						color: @color-RED_WHITE-foreground-1;
					}
				}
			}
			&BLACK_WHITE {
				.dyna-ui-label {
					border-color: @color-BLACK_WHITE-background-1;
					color: @color-BLACK_WHITE-foreground-1;
					background-color: @color-BLACK_WHITE-background-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-BLACK_WHITE-background-1;
					background-color: @color-BLACK_WHITE-white-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-BLACK_WHITE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-BLACK_WHITE-background-1;
						color: @color-BLACK_WHITE-foreground-1;
					}
				}
			}
			&TRANSPARENT_WHITE {
				.dyna-ui-label {
					border-color: @color-BLACK_WHITE-foreground-1;
					color: @color-BLACK_WHITE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-BLACK_WHITE-foreground-1;
					color: @color-BLACK_WHITE-foreground-1;
					background-color: transparent;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-BLACK_WHITE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: transparent;
						color: @color-BLACK_WHITE-foreground-1;
					}
				}
			}
			&TRANSPARENT_ORANGE {
				.dyna-ui-label {
					border-color: @color-BLACK_ORANGE-foreground-1;
					color: @color-BLACK_ORANGE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-BLACK_ORANGE-foreground-1;
					color: @color-BLACK_ORANGE-foreground-1;
					background-color: transparent;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-BLACK_ORANGE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: transparent;
						color: @color-BLACK_ORANGE-foreground-1;
					}
				}
			}
			&ORANGE_WHITE {
				.dyna-ui-label {
					border-color: @color-ORANGE_WHITE-background-1;
					background-color: @color-ORANGE_WHITE-background-1;
					color: @color-ORANGE_WHITE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-ORANGE_WHITE-background-1;
					background-color: @color-ORANGE_WHITE-white-1;
					color: @color-ORANGE_WHITE-black-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-required {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-ORANGE_WHITE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-ORANGE_WHITE-background-1;
						color: @color-ORANGE_WHITE-foreground-1;
					}
				}
			}
			&BLACK_ORANGE {
				.dyna-ui-label {
					border-color: @color-BLACK_ORANGE-background-1;
					background-color: @color-BLACK_ORANGE-background-1;
					color: @color-BLACK_ORANGE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-BLACK_ORANGE-background-1;
					background-color: @color-BLACK_ORANGE-foreground-1;
					color: @color-BLACK_ORANGE-black-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-required {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-BLACK_ORANGE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-BLACK_ORANGE-background-1;
						color: @color-BLACK_ORANGE-foreground-1;
					}
				}
			}
			&WHITE_ORANGE {
				.dyna-ui-label {
					border-color: @color-WHITE_ORANGE-background-1;
					background-color: @color-WHITE_ORANGE-background-1;
					color: @color-WHITE_ORANGE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-WHITE_ORANGE-background-1;
					background-color: @color-WHITE_ORANGE-white-1;
					color: @color-WHITE_ORANGE-black-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-required {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-WHITE_ORANGE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-WHITE_ORANGE-background-1;
						color: @color-WHITE_ORANGE-foreground-1;
					}
				}
			}
			&WHITE_ORANGE {
				.dyna-ui-label {
					border-color: @color-WHITE_ORANGE-foreground-1;
					background-color: @color-WHITE_ORANGE-background-1;
					color: @color-WHITE_ORANGE-foreground-1;
				}
				.dyna-ui-field-wrapper-container {
					border-color: @color-WHITE_ORANGE-foreground-1;
					background-color: @color-WHITE_ORANGE-white-1;
					color: @color-WHITE_ORANGE-black-1;
					.dyna-ui-field-wrapper-control-container {
					}
					.dyna-ui-field-wrapper-required {
					}
					.dyna-ui-field-wrapper-validation-message {
						color: @color-WHITE_ORANGE-error-1;
					}
					.dyna-ui-field-wrapper-footer {
					}
				}
				&.dyna-ui-field-wrapper--mode-VIEW {
					.dyna-ui-field-wrapper-container {
						background-color: @color-WHITE_ORANGE-background-1;
						color: @color-WHITE_ORANGE-black-1;
					}
				}
			}
		}
	}


	// animations
	@animation-duration: 250ms;

	transition: border-color @animation-duration ease-in-out, background-color @animation-duration ease-in-out;
	.dyna-ui-label {
		transition: color @animation-duration ease-in-out, background-color @animation-duration ease-in-out;
	}
	.dyna-ui-field-wrapper-container {
		transition: color @animation-duration ease-in-out, background-color @animation-duration ease-in-out;

		.dyna-ui-field-wrapper-validation-message {
			transition: color @animation-duration ease-in-out, background-color @animation-duration ease-in-out;
		}

		.dyna-ui-field-wrapper-footer {
		}
	}

}