@import '../constants';



/* (1) Warning icon */
.warning,
.pin{

	// add icon before
	&:before{
		content: '';

		display: inline-block;
		position: relative;
			width: 1.2em;
			height: 1em;

		margin-right: .3em;

		background: url('/asset/svg/warning.svg@#{$rd-form-invalid-color}') center center no-repeat;
		background-size: auto 90%;
	}

	// icon color variants
	&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
	&.valid:before{   background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}');   }
	&.search:before{  background-image: url('/asset/svg/warning.svg@#{$rd-form-search-color}');  }

	// force red text
	&.invalid{ color: $form-invalid-color; }
}


/* (2) Pin icon */
.pin{

	// add icon before
	&:before{
		background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
	}

	// icon color variants
	&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
	&.valid:before{   background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}');   }
	&.search:before{  background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}');  }

}