/*------------------------------------------------------------------
[21. Calendar App]
*/

$cell-height : 80;
body.overflow-hidden{
	overflow: hidden;
}

/*
Calendar
--------------------------------------------------
Header / .calendar-header
Years / .years .year
Months / .months
Weeks / .weeks-wrapper .week
Grid / .calendar-container
Events / .event-container
*/
.calendar{
	height: 100%;
	.drager{
		overflow: hidden;
		.scroll-element{
			display: none;
		}
	}
	&.month{
		@include padding-left(5px );
		.options .date{
			margin-bottom: 22px;
		}
		.week-dragger{
			display: none;
		}
		.calendar-container{
			border-top: 1px solid $color-contrast-low;
			padding-top: 0;
			height:calc(100% - 169px);
			.view .tble{
				width: 100%;
				.thead .tcell .weekday{
					@include margin-left( 10px );
				}
			}
		}
	}
	.calendar-header{
			height: 43px;
			background-color: $color-contrast-lowest;
			line-height: 43px;
			@include padding-left(60px);
		& > .drager{
			width:calc(100% - 141px);
			@include border-right(1px solid $color-border-a);
			line-height: 35px;
		}
		.years{
			width: auto;
			list-style: none;
			white-space: nowrap;
			margin-top: 5px;
			.year{
				display: inline-block;
				width: 69px;
				text-align: center;
				white-space: nowrap;
				font-family : $base-font-family;
				& > a{
					color: $color-contrast-medium;
					position: relative;
					&.active{
						color: $color-contrast-higher;
					}
					&.has-event{
						&:before{
							position: absolute;
							content: '\25CF';
							width: 100%;
							font-size: 8px;
							line-height: 6px;
							text-align: center;
							color:  rgba(0, 0, 0, 0.44);
						}
					}
				}
			}
		}
	}
	.options{
		@include padding-left(60px);
		margin-top: 15px;
		.months{
			width: auto;
			white-space: nowrap;
			height: 43px;
			line-height: 43px;
			.month{
				min-width: 30px;
				max-width: 100px;
				padding: 0 10px;
				display: inline-block;
				& > a{
					position: relative;
					color: $color-contrast-medium;
					&:hover{
						color: $color-contrast-high;
					}
					&.active{
						color: $color-contrast-higher;
					}
					&.has-event{
						&:before{
							position: absolute;
							content: '\25CF';
							top: -6px;
							width: 100%;
							font-size: 8px;
							line-height: 6px;
							text-align: center;
							color:  rgba(0, 0, 0, 0.33);
						}
					}
				}
			}
		}
		.date{
			margin-bottom: 20px;
		}
	}
	.week-dragger{
		border-bottom: 1px solid $color-border-a;
		@include margin-left(-20px);
	}
	.weeks-wrapper{
		width: auto;
		white-space: nowrap;
		@include padding-left(10px);
		padding-bottom: 12px;
		margin-bottom: 5px;
		@include margin-left( 20px );
		.week{
			display: inline-block;
			position: relative;
			@include padding-left(30px);
			@include padding-right(30px);
			&:first-child{
				@include padding-left(4px);
			}
			&:last-child{
				@include padding-left(0px);
			}
			&:before{
				content: '';
				position: absolute;
				@include right(-20px);
				bottom: 6px;
				height: 20px;
				width: 20px;
				@include border-left(1px dotted $color-border-a);
			}
			&.active{
				.day-wrapper .week-date{
					.day{
						& > a{
						color: fade($color-contrast-higher, 90%);
						}
					}

				}
			}
			.day-wrapper{
				display: inline-block;
				.week-date{
					text-align: center;
					width: 21px;
					height: 21px;
					margin: 6px;
					@include border-radius(99px);
					&.current-date{
						background-color: $color-contrast-low;
					}
					&.active{
						background-color: $color-success;
						.day > a{
							opacity: 1;
							color: text-contrast($color-success);
						}
					}
					.day > a{
						letter-spacing: -0.01em;
					}
				}
				.week-day{
					text-align: center;
				}
				.day{
					display: inline-block;
					text-align: center;
					position: relative;
					z-index: 10;
					padding: 1px 0;
					font-size: 12px;
					color: $color-contrast-medium;
					& > a{
						position: relative;
						width: 100%;
						display: block;
						text-align: center;
						color: $color-contrast-medium;
						font-weight: 600;
						&.has-event{
							&:before{
								position: absolute;
								content: '\25CF';
								top: -10px;
								width: 100%;
								font-size: 8px;
								line-height: 6px;
								text-align: center;
								color: $color-success;
							}
						}
					}

					&.week-header{
						text-transform: uppercase;
						text-align: center;
						font-family: $secondary-font-family;
						letter-spacing: 0.06em;
            			font-size: 10.5px;
					}
				}
			}
		}
	}
	.calendar-container{
		position: relative;
		height: calc(100% - 200px);
		padding-top: 10px;
		.view{
			&.month-view{
				.tble .trow .tcell{
					position: relative;
					height: 20%;
					clear: both;
					.cell-inner{
						.holder{
						position: absolute;
						top: 37px;
						@include left( 0 );
						@include right( 0 );
						bottom: 0;
						}
					}
					&.active{
						background: $color-contrast-lowest;
						.cell-inner{
							background-color: #fef8e7;
						}
					}
					&.not{
						background-color: $color-contrast-lowest;
					}
					&.drop-target{
						.cell-inner{
							background-color: $color-contrast-lowest;
						}
					}
					.cell-inner:only-child, .cell-inner{
						height: 100%;
						border-bottom: 1px solid $color-contrast-low;
						position: relative;
					}
					.month-date{
						position: relative;
						text-align: center;
						margin-top: 10px;
						@include margin-right( 6px );
						width: 25px;
						height: 25px;
						padding-top: 2px;
						margin: 6px;
						float: right;
						display: block;
						z-index:1;
						@include border-radius(99px);
						&.current-date{
							background-color: $color-contrast-low;
						}
						&.active{
							background-color: $color-success;
							opacity: 1;
							color: text-contrast($color-success);
						}
					}
					.event-container{
						height: 30px;
						position: relative !important;
						min-height: 30px !important;
						.event-inner{
						 	padding: 8px;
						}
					}
				}
				.ghost-element{
					height: 30px;
    				position: relative;
    				width: 100%;
				}
				.grid .tble{
					height: 100%;
					width: 100%;	
				}
				.event-container .event-title{
					font-size: 12px;
				}
			}
			&.day-view .tble{
				white-space: nowrap;
				.thead{
					white-space: nowrap;
					overflow: hidden;
					display: inline-block;
				}
				.tcell{
					display: none;
					max-width: 100%;
					width: 100%;
					&.active{
						display: inline-block;
					}		
				}
				.trow{
					display: block;
					height: 80px;
					.tcell.active{
						background-color: $color-contrast-lowest;
					}
				}
			}
			width: 100%;
			height: 100%;
			white-space: nowrap;
			-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
			//DEFAULT WEEKVIEW WITH 30 min Slot
			.tble{
				display: inline-table;
				width: calc(100% - 50px);
				vertical-align: top;
				position: relative;
				.thead{
					display: table-row;
					width: 100%;
					background: $color-contrast-lowest;
					.tcell{
						padding: 10px;
						height: $cell-height/2 * 1px;
						position: relative;
						.weekday{
							font-size: 12px;
							display: inline-block;
							color: $color-contrast-medium;
						}
						.weekdate{
							font-size: 14px;
							display: inline-block;
							@include margin-right(10px );
							color: $color-contrast-high;
						}
						&.active{
							.weekdate, .weekday{
							color: $color-contrast-higher;
							}
						}
						&:before{
							content: '';
							border-bottom: 1px solid $color-contrast-low;
							width: calc(100% - 18px);
							position: absolute;
							bottom: 0;
						}
						.event-bubble{
							display: inline-block;
							width: 8px;
							height: 8px;
							@include margin-left(5px);
							@include float(right);
							@include border-radius(30px);
						}
					}
				}
				.tcell{
					display: table-cell;
					height: $cell-height * 1px;
					max-width: 14.2857%;
					width: 14.2857%;
				}
				.trow{
					display:table-row;
					.tcell{
						background: $color-contrast-lowest;
						padding: 0 10px;
						.cell-inner{
							height: $cell-height/2 * 1px;
							position: relative;
							&:first-child{
								border-bottom: 1px dotted $color-contrast-low;
							}
							&:last-child{
								border-bottom: 1px solid $color-contrast-low;
							}
							&:only-child{
								height: 40px;
								border-bottom: 0;
							}
						}
						&.active{
							background-color: #fef8e7;
							& > *{
								border-color: rgba(0, 0, 0, 0.1) !important;
							}
						}
						&.disable{
							background-color: $color-contrast-lowest;
						}	
					}
				}
				.loading{
					@include left( 10px );
				}
			}
		}
		.loading{
			position: absolute;
			top: 0;
			@include right( 0 );
			bottom: 0;
			@include left( 0 );
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 100;
		}
		.pgn-wrapper{
			position: absolute;
		}
		.even-holder{
			position: absolute;
			display: table;
			width: calc(100% - 50px);
			height: calc(100% - 25px);
			.event-placeholder{
				height: 100%;
				width: 14.2857%;
				display: table-cell;
			}
		}
		.event-container{
			width: 100%;
			height: 40px;
			position: absolute !important;
			z-index: 10;
			overflow: hidden;
			margin-bottom: 5px;
			min-height: 40px !important;
			@include transition(width .16s ease);
			.event-inner{
				padding: 15px;
				&:before{
					position: absolute;
					width: 8px;
					height: 8px;
					content: '';
					background-color: rgba(255, 255, 255,0.8);
					border-radius: 999px;
					@include right(14px);
					top: 11px;
				}
			}
			.time-wrap{
				line-height: 12px;
				@include text-align(left);
				color: rgba(0, 0, 0, 0.77);
				overflow: hidden;
    			text-overflow: ellipsis;
			}
			.event-start-time, .event-end-time{
				font-size: 12px;
				color: rgba(0, 0, 0, $mix-percentage-contrast-medium/100);
			}
			.event-title{
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 8px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.resizable-handle{
				position: absolute;
				opacity: 1;
				z-index: 3;
				@include left( 0 );
				@include right( 0 );
				bottom: 0;
				height: 8px;
				overflow: hidden;
				line-height: 8px;
				font-size: 11px;
				font-family: monospace;
				text-align: center;
				cursor: s-resize;
				&:after {
				content: "=";
				color: rgba(0, 0, 0, 0.44);
				}
				&:before{
					content: '';
					transition: all 120ms ease-in 0s;
					background-color: rgba(0, 0, 0, 0.07);
					width: 100%;
					height: 100%;
					position: absolute;
					top:0px;
					@include left(0px );
					opacity: 0;
				}
				&:hover{
					&:before{
						opacity: 1;
					}
				}
			}
			&.dragging{
				z-index: 100;
			}
		}
		.grid{
			display: block;
			overflow: scroll;
			height: calc(100% - 40px);
			-webkit-overflow-scrolling: touch;
			//Time Slots
			&.slot-60{
				.tble .trow .tcell .cell-inner{
					height: $cell-height * 1px;
					border-bottom: 1px solid $color-contrast-low;
				}
			}
			&.slot-15{
				.tble .trow .tcell {
					height: 100/4 * 1px;
					.cell-inner{
						height: 100/4 * 1px;
						border-bottom: 1px solid $color-contrast-low;
						&:last-child{
							border-bottom: 1px solid $color-contrast-low;
						}
					}
				}
				.time-slot-wrapper .time-slot{
					height: 100px;
				}
			}
		}
		.allday-cell{
			height: $cell-height/2 * 1px;
			display: inline-block;
			width: 50px;
			@include float(left);
		}
	}
	.time-slot-wrapper{
		display: inline-block;
		width: 50px;
		@include float(left);
		height: 100%;
		.time-slot{
			display: block;
			height: $cell-height*1px;
			width: 100%;
			background: $color-contrast-lowest;
			&:first-child{
				span{
					display: none;
				}
			}
			& > span{
				@include float(right);
				font-size: 12px;
				position: relative;
				top: -13%;
				color: $color-contrast-medium;
				font-size: 11px;
				letter-spacing: 0.06em;
            	font-size: 10.5px;
            	font-family: $secondary-font-family;
				@include right(5px);
			}
		}
	}

}
.calendar-event{
	width: 330px;
	@include right(-330px);
	.scrollable{
		height: 100%;
	}
}
.date-selector{
	cursor: pointer;
}
.horizontal-app-menu {
	.calendar {
		.weeks-wrapper .week:first-child{
			@include padding-left( 0 );
		}
		.calendar-container .allday-cell{
			width: 38px;
		}
		.time-slot-wrapper{
			width: 38px;
		}
	}
}
/*
Responsive Util
*/
@media (max-width: 991px) {
.calendar{
	background-color: $color-contrast-lowest;
	.calendar-header{
		display: none;
	}
	.options{
		margin-top:0;
		@include padding-left(10px);
		.months{
			line-height: 21px;
			padding-top: 14px;
		}
		.date{
			margin-bottom: 10px;
		}
	}
	.calendar-container {
		height:100%;
		.view.week-view .tble{
			white-space: nowrap;
			.thead{
				white-space: nowrap;
				overflow: hidden;
				display: inline-block;
			}
			.tcell{
				display: none;
				max-width: 100%;
				width: 100%;
				&.active{
					display: inline-block;
					background-color: $color-contrast-lowest;
				}		
			}
			.trow{
				display: block;
				height: 80px;
			}
		}
		.view.month-view {
			.allday-cell{
				display: none;
			}
			.grid .tble{
			@include padding-left( 0 );
			}
			.tble {
				.thead .tcell{
					padding: 3px;
					padding-top: 10px;
				}
				.trow .tcell{
					padding: 0 6px;
				}
			}
			.tble .trow .tcell .event-container{
				@include border-radius(99px);
				position: absolute !important;
				height: 16px !important;
				width: 16px !important;
				min-height: 16px !important;
				margin: 0 auto;
    			@include left( 0 );
    			@include right( 0 );
				.event-inner{
					display: none;
				}
			}
		}
		&.month{
			height: calc(100% - 101px);
		}
	}
	.weeks-wrapper{
		margin-bottom: 0;
	}
	&.month{
		@include padding-left(0 );
		.calendar-container{
			height: calc(100% - 108px);
		}
	}
}
.calendar-event{
	width: 240px;
	@include right(-240px);
}
.months-drager{
	@include margin-left(16px);
	@include margin-right(36px);
	@include border-right(1px solid $color-contrast-low);
	padding-top: 0;
}
.horizontal-app-menu {
	.months-drager{
		@include margin-left(0);
		@include margin-right(0);
		width: 100%;
	}
}
}
@media (max-width: 640px) {
	.calendar.month .calendar-container .view .tble .thead .tcell {
		text-align: center;
		&:before{
			width: 100%;
		}
		.weekday{
			width: 11px;
		    overflow: hidden;
		    letter-spacing: 4px;
		    font-weight: bold;
		}
	}
}