$bar-color: #b8c2cc;
$bar-stroke: #8D99A6;
$border-color: #e0e0e0;
$light-bg: #f5f5f5;
$light-border-color: #ebeff2;
$light-yellow: #fcf8e3;
$text-muted: #666;
$text-light: #555;
$text-color: #333;
$blue: #a3a3ff;
$handle-color: #ddd;

.gantt {

	.grid-background {
		fill: none;
	}
	.grid-header {
		fill: #ffffff;
		stroke: $border-color;
		stroke-width: 1.4;
	}
	.grid-row {
		fill: #ffffff;
	}
	.grid-row:nth-child(even) {
		fill: $light-bg;
	}
	.row-line {
		stroke: $light-border-color;
	}
	.tick {
		stroke: $border-color;
		stroke-width: 0.2;
		&.thick {
			stroke-width: 0.4;
		}
	}
	.today-highlight {
		fill: $light-yellow;
		opacity: 0.5;
	}

	#arrow {
		fill: none;
		stroke: $text-muted;
		stroke-width: 1.4;
	}

	.bar {
		fill: $bar-color;
		stroke: $bar-stroke;
		stroke-width: 0;
		transition: stroke-width .3s ease;
	}
	.bar-progress {
		fill: $blue;
	}
	.bar-invalid {
		fill: transparent;
		stroke: $bar-stroke;
		stroke-width: 1;
		stroke-dasharray: 5;

		&~.bar-label {
			fill: $text-light;
		}
	}
	.bar-label {
		fill: #fff;
		dominant-baseline: central;
		text-anchor: middle;
		font-size: 12px;
		font-weight: lighter;

		&.big {
			fill: $text-light;
			text-anchor: start;
		}
	}

	.handle {
		fill: $handle-color;
		cursor: ew-resize;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease;
	}

	.bar-wrapper {
		cursor: pointer;

		&:hover {
			.bar {
				stroke-width: 2;
			}

			.handle {
				visibility: visible;
				opacity: 1;
			}
		}

		&.active {
			.bar {
				stroke-width: 2;
			}
		}
	}

	.lower-text, .upper-text {
		font-size: 12px;
		text-anchor: middle;
	}
	.upper-text {
		fill: $text-light;
	}
	.lower-text {
		fill: $text-color;
	}

	#details .details-container {
		background: #fff;
		display: inline-block;
		padding: 12px;

		h5, p {
			margin: 0;
		}

		h5 {
			font-size: 12px;
			font-weight: bold;
			margin-bottom: 10px;
			color: $text-light;
		}

		p {
			font-size: 12px;
			margin-bottom: 6px;
			color: $text-muted;
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	.hide {
		display: none;
	}
}