main {

	.context-bar {
		padding: 10px;
		position: sticky;
		top: 0;
		z-index: 1000;
		max-height: 80px;
		border-bottom: $layoutBorder;
		display: flex;
		flex-direction: row;
		align-items: center;

		.context-menu {
			flex: 1;

			.inner {
				display: flex;

				ul {
					background: #222;
					padding: 6px 4px 5px 4px;
					box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
					border: 1px solid #222;
					border-radius: $baseRadius;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					list-style: none;
					margin: 0;

					li {
						&.divider {
							margin: 0 20px;
							width: 1px;
							height: 100%;
							background: #333;
						}

						&:hover {
							a {
								opacity: 0.9;
							}
						}

						a {
							border-radius: $baseRadius;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							color: white;
							overflow: hidden;
							padding-right: 30px;
							text-align: center;
							background: rgba(0, 0, 0, 0.2);
							margin-right: 5px;

							span {
								display: flex;
								justify-content: center;
								align-items: center;
								margin-right: 20px;
								height: 32px;
								background: rgba(0, 0, 0, 0.2);
								width: 42px;
							}
						}

						&.active {
							border: none;

							a {
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: center;
								color: #333;
								background: $white;
								font-weight: bold;

								span {
									background: rgba(0, 0, 0, 0.2);
									margin-right: 30px;
									width: 42px;
								}
							}
						}

						&:last-child a {
							margin-right: 0;
						}
					}
				}
			}
		}

		.context-divider {
			width: 1px;
			height: 100%;
			background: #222;
			margin-left: 20px;
			margin-right: 20px;
		}

		.context-user {
			display: flex;
			margin-right: 20px;

			.trigger {
				color: white;

				.avatar {
					width: 32px;
					height: 32px;
					border-radius: $baseRadius;
					background: $seaBlue;
					margin-right: 10px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-weight: bold;
					font-size: 14px;
					border: 1px solid #444;
				}

				i {
					margin-top: -5px;
					margin-left: 10px;
				}
			}
		}
	}

}