@import "../less/keyframes";

.taskbar {
	display: none;
	z-index: 10001;

	left: auto;

	margin-top: 0;
	.transition(.15s ease-in opacity);

	background: none;
	border: none;

	&[data-active="1"] {
		display: block;
	}

	&:hover {
		-moz-opacity: 1;
		opacity: 1;
	}

	&.navbar {
		min-height: 32px;
	}

	.navbar-nav {
		padding-right: 15px;
		padding-bottom: 15px;

		li {
			float: left;

			&.new a {
				-webkit-animation-name: bounceIn;
  				animation-name: bounceIn;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}

			a {
				padding: 3px 15px;
				font-size: 13px;

				border-radius: 50%;
				height: 50px;
				width: 50px;

				> span {
					display: none;
				}

				-webkit-animation-name: bounceIn;
  				animation-name: bounceIn;
  				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}

			img {
				max-width: 24px;
				max-height: 24px;
				margin-right: 1em;
			}

			&.pulse a {
				-webkit-animation-name: bounceIn;
  				animation-name: bounceIn;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}

			&.taskbar-composer {
				a, a:hover, a:focus, a:active {
					background: #f44336;
				}
			}

			&.taskbar-chat {
				a, a:hover, a:focus, a:active {
					.user-icon-style(50px, 2.4rem, 50%) !important;
					padding: 0;
					color: white;
					background: none;
					background-size: cover;

					i {
						color: @gray;
					}
				}

				&.new:after {
					content: attr(data-content);
					position: absolute;
					left: 52px;
					top: 0px;
					font-size: 10px;
					text-align: center;
					border: 1px solid #890405;
					color: #fff;
					font-weight: bold;
					min-width: 20px;
					.border-radius(4px);
					background: #c91106;
					padding: 1px 2px;
					font-family: @font-family-sans-serif;
				}
			}

			&.taskbar-composer, &.taskbar-chat {
				a {
					text-align: center;
					margin-left: 15px;

					i {
						font-size: 18px;
						line-height: 42px;
						color: #FFF;
					}
				}
			}
		}
	}


	@media (max-width: 979px) {
		/*
	 		Gets in the way of entering text when writing posts
		*/
		display: none !important;
	}
}