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