@import "../../common";

.pane.node-planner-pane {

	background: #FFF;
	overflow: hidden;
	z-index: 5000;

	&.pane--is-active {
		z-index: 5010;
	}

	& .pane--wrapper {
		position: relative;
	}

	& .pane--header {
		//margin-bottom: 2rem;
		background: $color-grey-800;
		color: $color-text-on-primary;
		header {
			padding: $menu-padding;
		}

		.detail-intro-unit {
			i.icon {
				display: inline-block;
				float: left;
				margin: 0.4rem 0 0 0.15rem;
			}
		}

		p {
			padding: 0 $menu-padding;
		}

		h1 {
			color: $color-text-on-primary;
			font-size: 1.25rem;
			margin: 0;
			line-height: 1.1;
			text-transform: uppercase;
			margin-top: 0;

			span {
				display: block;
			}
			b {
				font-weight: 400;
				display: block;
				opacity: 0.5;
			}
		}

		h2 {
			opacity: 0.7;
			font-weight: normal;
			color: opacify( $color-text-on-primary, 0.7 );
			font-size: 0.85rem;
			margin: 0;
			margin-left: $menu-padding * 3;
			margin-top: 0;
		}

	}

	.pane--body {
		padding-top: $menu-padding;

		ul {
			margin: $menu-padding;
			padding: 0;
			list-style: none;

			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
		}
	}

	.node-list {

		.contrib {
			font-style: normal;
			display: inline-block;
			border: 2px solid black;
			border-radius: 40px;
			padding: 0.1rem 0.4rem 0;
			color: black;
			font-size: 0.9rem;
			vertical-align: bottom;
			margin-right: 0.2rem;
			background: white;
			margin-left: -2rem;
			text-align: center
		}

		li {
			clear: both;
			margin-bottom: $menu-padding * 0.25;
			.contrib {
				float: right;
			}
			button {
				float: right;
			}
			&.is-subnode {
				padding-left: $menu-padding * 1;
			}
		}

		.material-list {
			margin: 0 0 0 $menu-padding;
			padding: 0;
			img {
				margin-bottom: 0;
			}
			li {
				color: $color-text-2;
				font-size: 0.9;
			}
		}
	}
	.material-list {
		li {
			clear: both;
		}
		img {
			float: left;
			margin: 0 0.5rem 0.5rem 0;
			width: 16px;
		}
		h5 {
			font-size: 1em;
			margin: 0;
			padding: 0;
		}
		p {
			margin: 0;
			padding: 0;
			color: $color-text-3;
		}
	}

	h3 {
		margin: 0 1rem;
		padding: 0;

		span {
			font-size: 1rem;
			color: $color-text-3;
			background: #FFF;
			margin: 0;
			padding: 0 0.5rem 0 0;
		}

		&::after {
			content: " ";
			border-top: 1px solid $color-divider;
			width: 95%;
			display: block;
			height: 1px;
			overflow: hidden;
			margin-top: -0.75rem;
		}
	}

	.pane--footer {
		flex: 0 0;
		padding: $menu-padding;
		border-top: 1px solid $color-divider;

		table {
			width: 100%;
			.total td {
				font-weight: bold;
			}

			// Display the labels for explorable/worker/total CP
			// only when pane is fully expanded
			& tr > td:first-child {
				display: none;
			}

		}
	}

	// Display the labels for explorable/worker/total CP
	// only when pane is fully expanded
	&.pane--is-active .pane--footer table tr > td:first-child {
		display: table-cell;
	}
}

/* always present */
.node-list-item-transition {
  transition: all .3s ease;
  padding: 0;
	opacity: 1;
}
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.node-list-item-enter, .node-list-item-leave {
  opacity: 0;
}
