@import '../constants';



/* (1) Warning icon */
.warning,
.user,
.time,
.pin,
.cm,
.td,
.tp{

	// 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%;
	}

	&.nospace:before{
		margin-right: 0;
	}

	&.reflow{

		white-space: nowrap;

		&:before{
			font-size: 1.2em;
			background-position: center bottom;
			background-size: auto 70%;
		}

	}

	&.big{

		&:before{
			font-size: 1.5em;
		}

	}

	// 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; }

	&[data-valid='1']{   color: $form-valid-color;   }
	&[data-neutral='1']{ color: $form-neutral-color; }
	&[data-search='1']{  color: $form-search-color;  }
}


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

	// add icon before
	&:before{
		background-image: url('/asset/svg/pin.svg@f4bd18');
	}

	// icon color variants
	&.disabled:before{ background-image: url('/asset/svg/pin-disabled.svg@#{$rd-form-neutral-color}'); }
	&.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}');  }

}




/* (3) CM */
.cm{

	// add icon before
	&:before{
		background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}');
	}

	&.active:before{  background-image: url('/asset/svg/course.svg@5bb8f0');  }

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


}




/* (4) TD */
.td{

	// add icon before
	&:before{
		background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}');
	}

	&.active:before{  background-image: url('/asset/svg/td.svg@20b565');  }

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


}




/* (5) TP */
.tp{

	// add icon before
	&:before{
		background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}');
	}

	&.active:before{  background-image: url('/asset/svg/tp.svg@e85456');  }

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


}




/* (6) USER */
.user{

	// add icon before
	&:before{
		background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');
	}


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


}




/* (7) TIME */
.time{

	// add icon before
	&:before{
		background-image: url('/asset/svg/time.svg@#{$menu-item-inactive}');
	}


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


}