@import "compass";
@import "mixins";

@import "flex";
@import "animation";

$mainBackgroundColor: #FFF;
$default_z-index: 1000;

$counterTextColor: #444;
$labelTextColor: #444;
$counterBackgroundColor: #FFF;
$labelBackgroundColor: #FFF;
$borderColor: #ccc;

$mySignsColor: #444;
$bossSignsColor: #444;
$expiringFilesColor: orange; 
$expiredFilesColor: red;
$expiredintegrationsColor: red;


.aui {
	#left_fixed_sidebar{
		position: fixed;
		top: 50%;
		left: 0;
		@include translate3d(-70%, -50%, 0);
		z-index: $default_z-index;
		ul.notification_list{ 
			position: relative;
			margin: 0;
			li.notification_group{
				background: $mainBackgroundColor;

				$i : 0;
				@for $i from 1 through 10 {
					&:nth-child(#{$i}){
						.notification_group_label{z-index: $default_z-index + $i}
						.notification_item{z-index: $default_z-index + $i + 1};
				  	}
				}
			}
			li.notification_group{
				position: relative;
				list-style: none;
				margin: 0 0 .5rem 0;
				padding: 0;
				left: 0;
				transition: all .3s ease;
				.notification_group_label{
					position: absolute;
					width: 70%;
					font-size: 16px;
					color: $counterTextColor;
					background: $counterBackgroundColor;
					padding: .5rem;
					margin: 0;
					top: 0;
					left: 0;
					border: 1px solid $borderColor;
					border-left: 0;
					@include display-flex;
					@include align-items(center);
					i{margin-right: .5rem;}
				}
				&:hover{
					left: 70%;
					> .notification_group_label{
						@include animation(move .33s .33s normal forwards ease-in-out);
						
					}
				}
				.notification_item{
					position: relative;
					background: $labelBackgroundColor;
					@include box-shadow(1px 1px 5px rgba(0,0,0,.3));
					a{
						z-index: 20;
						cursor: pointer;
						position: relative;
						
						@include display-flex;
						@include align-items(stretch);
						@include justify-content(space-between);
						left: 0;
						&.not_linkable{
							cursor: default;
						}
						&:hover, &:focus, &:active{text-decoration: none}
						.notification_inner{
							display: inline-block;
							font-size: 1.2rem;
							&.left{
								width: 70%;
								@include display-flex;
								@include align-items(center);
								color: $counterTextColor;
								background: $counterBackgroundColor;
								border-right: 2px solid $borderColor; 
								margin: .5rem 0;
								.notification_title{padding: 0 .5rem;}
							}
							&.right{
								width:30%;
							    @include display-flex;
							    @include flex-flow(row nowrap);
								@include align-items(center);
								@include justify-content(space-around);
							    padding: .3rem .5rem;
							    color: $counterTextColor;
								background: $counterBackgroundColor;
							}
							.notification_title{margin: 0;}
							i, .notification_number{
								display: inline-block;	
							}
							i{
								margin-right: .3rem;
								.fa-hover{
									color: $counterTextColor;
									margin: 0;
								}
							}
						}
					}

					&.my_signs{
						.notification_inner.right{
							.fa{color: $mySignsColor;}
						}
					}
					&.boss_signs{
						.notification_inner.right{
							/* .notification_number, i.fa{color: $bossSignsColor;} */
							.fa{color: $bossSignsColor;}
							.fa-hover{color: #ffe400;}
						}
					}
					&.expiring_files{
						.notification_inner.right{
							/* .notification_number, i.fa{color: $expiringFilesColor;} */
							.fa{color: $expiringFilesColor;}
						}
					}
					&.expired_files{
						.notification_inner.right{
							/* .notification_number, i.fa{color: $expiredFilesColor;} */
							.fa{color: $expiredFilesColor;}
						}
					}
					&.expired_integrations{
						.notification_inner.right{
							/* .notification_number, i.fa{color: $expiredintegrationsColor;} */
							.fa{color: $expiredintegrationsColor;}
						}
					}
					
				}
			}
		}

	}
}
@include keyframes(move) {
  0% {
  	@include translateY(0);
  }
  100% {
    @include translateY(-100%);
  }  
}
.aui{
	i.fa{
		&.relative{
			position: relative;
		}
		.fa-hover{
			position: absolute;
			&.fa-top-right{
				top: -8px;
				right: -8px;
			}
			&.fa-bottom-right{
				bottom: -8px;
				right: -8px;
			}
			&.fa-top-left{
				top: -8px;
				left: -8px;
			}
			&.fa-bottom-left{
				bottom: -8px;
				left: -8px;
			}
		}
		&.fa-combine .fa-hover{
			&:not(span){
				top: 0;
				left: 5px;
			}
		}
	}
}