@import "../common/md_colors";
@import "../common/variables_mixins";

div.ganttview {
	position: relative;
	* {
		box-sizing: border-box;
	}
	&-wrapper {
		margin: 0 auto;
		overflow: hidden;
	}
	&-hzheader-month,
	&-hzheader-day,
	&-vtheader,
	&-grid,
	&-grid-row-cell {
		float: left;
	}
	&-hzheader-month,
	&-hzheader-day {
		text-align: center;
	}
	&-grid-row-cell.last,
	&-hzheader-day.last,
	&-hzheader-month.last {
		border-right: none;
	}
	/* Horizontal Header */
	&-hzheader-month {
		width: 60px;
		height: 20px;
		border-right: 1px solid $border-color;
		line-height: 20px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		color: $text-color-secondary;
		box-sizing: content-box;
	}
	&-hzheader-day {
		width: 20px;
		height: 20px;
		border-right: 1px solid #f0f0f0;
		border-top: 1px solid $border-color;
		line-height: 20px;
		color: #999;
		font-size: 11px;
		&.ganttview-weekend {
			background: #f8f8f8;
		}
		&.ganttview-today {
			background: #fff9db !important;
		}
	}
	/* Vertical Header */
	&-vtheader {
		margin-top: 41px;
		width: 240px;
		background-color: #fff;
		&-group {
			color: $text-color-primary;
			&-name {
				line-height: 24px;
				font-size: 13px;
				font-weight: 500;
				height: 24px;
				padding: 0 8px;
				position: relative;
				border-top: 1px solid $border-color-hex;
				background: material-color('grey', '100');
				text-transform: uppercase;
				&.toggle_enabled {
					cursor: pointer;
					&:before {
						position: absolute;
						right: 4px;
						top: 0;
						display: block;
						content: '\f143';
						font-family: $mdFont;
						font-size: 18px;
						color: $text-color-secondary;
					}
					&.projectHidden:before {
						content: '\f140';
					}
				}
			}
		}
	}
	&-vtheader-series-row {
		height: 42px;
		padding: 3px 8px;
		border-top: 1px solid $border-color-hex;
		font-size: 13px;
		overflow: hidden;
		position: relative;
		/*&:hover {
			overflow: visible;
			.series-content {
				min-width: 100%;
				background: $white;
				top: 0;
				left: 0;
				position: absolute;
				z-index: 100;
				overflow: visible;
				box-shadow: 0 0 10px rgba(0,0,0,.4);
				padding: 5px 8px 3px;
			}
		}*/
		.series-users {
			float: left;
			margin-right: 8px;
			.series-user {
				margin-right: 0;
				+ .series-user {
					margin-left: -16px;
				}
				> span {
					display: inline-block;
				}
			}
		}
		.series-user {
			float: left;
			margin-right: 8px;
			img {
				position: relative;
				z-index: 1;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				&:hover {
					z-index: 2;
				}
			}
		}
		.series-content {
			line-height: 16px;
			padding-top: 2px;
			overflow: hidden;
			white-space: nowrap;
			.series-name {
				@include text-truncate;
				display: block;
			}
			.series-dates {
				color: $muted-color;
				font-size: 11px;
				text-transform: uppercase;
				margin-top: 2px;
				@include text-truncate;
				display: block;
				> .date-user {
					display: none;
				}
			}
			.date-sep {
				display: inline-block;
				margin: 0 8px;
			}
		}
	}
	&-hzheader-months,
	&-hzheader-days {
		overflow: hidden;
	}
	&-hzheader-days {
		position: relative;
	}
	/* Slider */
	&-slide-container {
		user-select: none;
		overflow-y: auto;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	/* Grid */
	&-grid {
		&-row {
			overflow: hidden;
			&-cell {
				width: 20px;
				height: 42px;
				border-right: 1px solid #f0f0f0;
				border-top: 1px solid $border-color;
				&.ganttview-weekend {
					background-color: #fafafa;
				}
				&.ganttview-today {
					background-color: #fff9db !important;
				}
			}
		}
		&-spacer {
			background: material-color('grey','100');
			height: 24px;
			border-top: 1px solid $border-color-hex;
			cursor: pointer;
			+ .ganttview-grid-row > div.ganttview-grid-row-cell {
				border-top-color: $border-color-hex;
			}
		}
	}
	&-blocks {
		min-width: 100%;
		width: auto;
	}
	&-block {
		height: 60%;
		background-color: #bbb;
		border-radius: 12px;
		position: absolute !important;
		opacity: 0.8;
		top: 20%;
		@include box-shadow(2);
		&-spacer {
			height: 24px;
		}
		&-container {
			position: relative;
			height: 42px;
			width: 100%;
		}
		&-text {
			position: absolute;
			font-size: 11px;
			color: $white;
			padding: 5px 12px 2px;
			@include text-truncate;
			display: block;
			> a {
				color: $white;
				text-decoration: underline;
			}
		}
		& div.ui-resizable-handle.ui-resizable-s {
			bottom: 0;
		}
		&:hover {
			z-index: 1000;
			opacity: 1;
		}
	}
	/* Adjustments for jQuery UI Styling */
	.ui-resizable {
		position: relative;
		&-handle {
			display: block;
			font-size: 0.1px;
			position: absolute;
		}
		&-disabled .ui-resizable-handle,
		&-autohide .ui-resizable-handle {
			display: none;
		}
		&-e {
			cursor: e-resize;
			height: 100%;
			right: -5px;
			top: 0;
			width: 7px;
		}
		&-w {
			cursor: w-resize;
			height: 100%;
			left: -5px;
			top: 0;
			width: 7px;
		}
	}

}

@include respond-above('medium') {
	div.ganttview {
		&-wrapper {
			width: 100%;
		}
		&-slide-container {
			width: 75%;
			border: 1px solid $border-color;
		}
		&-vtheader {
			width: 25%;
			border-right: 1px solid $border-color;
		}
	}
}


@include respond-below('medium') {
	div.ganttview {
		&-wrapper {
			position: relative;
		}
		&-vtheader {
			position: absolute;
			left: 0;
			top: 0;
			background: none;
			width: 100%;
			z-index: 10;
			margin-top: 40px;
			&-series-name {
				height: 22px;
				line-height: 20px;
				border: none;
				margin-bottom: 31px;
			}
			&-series-row {
				margin-bottom: 42px;
			}
		}
		&-row {
			margin-top: 21px;
		}
		&-grid-spacer {
			background: none;
			border-top: none;
			+ .ganttview-grid-row > div.ganttview-grid-row-cell {
				border-top-color: $border-color;
			}
		}
		&-grid-row {
			margin-top: 42px;
			div.ganttview-grid-row-cell {
			}
			&:last-child div.ganttview-grid-row-cell {
			}
		}
		&-block-container {
			margin-top: 42px;
		}
		&-wrapper,
		&-slide-container {
			width: 100%;
		}
		&-slide-container {
			border-left: none;
			position: relative;
			z-index: 10;
		}
		&-vtheader-group:last-child {
			border-bottom: none;
		}
	}
}
.animate_hide {
	display: none;
}