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


[data-strike='1'],
.strike{
	text-decoration: line-through;
	opacity: .5;
}


[data-tooltip]{

	position: relative;

	cursor: pointer;

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

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

		margin-left: -.1em;

		padding: .4em .6em;

		border-radius: 3px / 3px;

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

		font-size: .7em;
		color: #ddd;

		background-color: #444;

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

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

		z-index: 1000;
	}

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



}