@import 'constants';

/* (1) Input */
@import 'global/input';

/* (2) Button */
@import 'global/button';

/* (3) classes that add icons before text */
@import 'global/before-icon';

/* (4) tags */
@import 'global/tag';


.error,   [data-error='1']{   font-weight: bold; color: $form-invalid-color; }
.success, [data-success='1']{ color: $form-valid-color; }




/* (4) Links */
a{
	color: inherit;
	text-decoration: none;

	&:after{
		content: '';
		display: block;

		width: 0%;
		height: .1em;

		background-color: #ddd;

		transition: width .1s ease-in-out;

	}

	&:hover:after{
		width: 100%;
	}
}

/* (5) Greyed text */
.grey{
	color: $secondary-color;
}

/* (6) pointer cursor (2 times the class to increase priority) */
.pointer.pointer{
	cursor: pointer;
}

/* (7) Mono font */
.mono{
	font-family: 'Mono';
	font-size: .9em;
}


/* (8) Striked text */
[data-strike='1'],
.strike{
	text-decoration: line-through;
	opacity: .5;
}

/* (9) Icons (1em wide) */
.user-icon, .time-icon{

	display: block;
	position: relative;
		width: 1em;
		height: 1em;

	background: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}') center center no-repeat;
	background-size: contain;

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


/* (10) Toggling tooltip on hover */
[data-tooltip]{

	position: relative;

	cursor: pointer;

	&:before{
		content: attr(data-tooltip);

		display: block;
		position: absolute;
			top: calc( 100% + 1em );
			left: 50%;

		margin-left: -.1em;

		padding: .4em .6em;

		border-radius: 3px / 3px;

		box-shadow: 0 0 .5em 0 #fff;

		font-size: .7em;
		color: #ddd;
		letter-spacing: 0;

		background-color: #444;

		transform: translateX(-50%) translateY(-50%) scale(0);

		transition: transform .1s ease-in-out;

		z-index: 999;
	}

	&:hover:not([data-tooltip='']):before{
		transform: translateX(-50%) translateY(0) scale(1);
	}


	&:after{
		content: '';

		display: block;
		position: absolute;
			top: calc( 100% + .6em );
			left: 50%;
			width:  .4em;
			height: .4em;

		background-color: #444;

		transform: translateX(-50%) rotate(45deg) scale(0);

		transition: transform .1s ease-in-out;

		z-index: 1000;

	}

	&:hover:not([data-tooltip='']):after{
		transform: translateX(-50%) rotate(45deg) scale(1);
	}



}