@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-TextFieldValidated {
	width: 100%;

	&.@{prefix}-Validation-is-error {
		.@{prefix}-TextField {
			border: 2px solid @featured-color-danger;
			box-shadow: inset 0 1px 2px 0 rgba(33, 31, 31, 0.16);
		}

		&.-info {
			.lucid-Validation-error-content {
				color: @color-disabledText;
			}

			input {
				border-color: @color-primary;
			}
		}

		&.-success {
			.lucid-Validation-error-content {
				color: @featured-color-success;
			}

			input {
				border-color: @featured-color-success;
			}
		}

		@keyframes disappearingMessage {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes disappearingBorder {
			to {
				border-color: @color-borderColor;
				border-width: 1px;
			}
		}

		&.-disappearing {
			.lucid-Validation-error-content {
				animation: disappearingMessage 1500ms ease 4s forwards;
			}

			input {
				animation: disappearingBorder 1500ms ease 4s forwards;
			}
		}
	}
}