@import '@sharedStyles/core.less';

.navItem.error {
	position         : relative;
	background-color : @red;
}

.errorContainer {
	position           : absolute;
	top                : 100%;
	left               : 50%;
	z-index            : 1000;
	width              : 140px;
	padding            : 3px;
	font-size          : 10px;
	font-weight        : 800;
	color              : white;
	text-align         : center;
	text-transform     : uppercase;
	background-color   : #333333;
	border             : 3px solid #444444;
	border-radius      : 5px;
	transform          : translate(-50% + 3px, 10px);
	animation-name     : glideDown;
	animation-duration : 0.4s;
	.lowercase { text-transform : none; }
	a { color : @teal; }
	&::before {
		position      : absolute;
		top           : -23px;
		left          : 53px;
		width         : 0px;
		height        : 0px;
		content       : '';
		border-top    : 10px solid transparent;
		border-right  : 10px solid transparent;
		border-bottom : 10px solid #444444;
		border-left   : 10px solid transparent;
	}
	&::after {
		position      : absolute;
		top           : -19px;
		left          : 53px;
		width         : 0px;
		height        : 0px;
		content       : '';
		border-top    : 10px solid transparent;
		border-right  : 10px solid transparent;
		border-bottom : 10px solid #333333;
		border-left   : 10px solid transparent;
	}
	.deny {
		display          : inline-block;
		width            : 48%;
		padding          : 5px;
		margin           : 1px;
		background-color : #333333;
		border-left      : 1px solid #666666;
		.animate(background-color);
		&:hover { background-color : red; }
	}
	.confirm {
		display          : inline-block;
		width            : 48%;
		padding          : 5px;
		margin           : 1px;
		color            : white;
		background-color : #333333;
		.animate(background-color);
		&:hover { background-color : teal; }
	}
}
