$connector-height: 12px;
$connector-line: 2px solid darken($line-color, 10%);

.plan {
	padding-bottom: $padding-lg * 3;
   margin-left: 100px;

	ul {
		display: flex;
		padding-top: $connector-height;
		position: relative;
		margin: auto;
		transition: all 0.5s;
      margin-top: -5px;

		// vertical connector
		ul::before {
			content: '';
			position: absolute; top: 0; left: 50%;
			border-left: $connector-line;
			height: $connector-height;
			width: 0;
		}

		li {
			float: left; text-align: center;
			list-style-type: none;
			position: relative;
			padding: $connector-height $padding-sm 0 $padding-sm;
			transition: all 0.5s;

			// connectors
			&:before, &:after {
				content: '';
				position: absolute; top: 0; right: 50%;
				border-top: $connector-line;
				width: 50%; height: $connector-height;
			}

			&:after {
				right: auto; left: 50%;
				border-left: $connector-line;
			}

			&:only-child {
				padding-top: 0;
				&:after, &:before {
					display: none;
				}
			}

			&:first-child::before, &:last-child::after {
				border: 0 none;
			}

			&:last-child::before {
				border-right: $connector-line;
				border-radius: 0 $border-radius-lg 0 0;
			}

			&:first-child::after {
				border-radius: $border-radius-lg 0 0 0;
			}

			//hovers
			.plan-node:hover+ul::before {
				border-color: $highlight-color;
			}

			.plan-node:hover+ul li::after,
			.plan-node:hover+ul li::before,
			.plan-node:hover+ul ul::before{
					border-color:  $highlight-color-dark;
				}
		}
	}
}

.plan-stats {
   display: flex;
   font-size: $font-size-base;
   margin: $padding-lg auto $padding-lg auto;
   padding-bottom: $padding-lg;
   border-bottom: 1px solid $line-color;
   border-radius: $border-radius-lg*2;
   width: 650px;
   position: relative;

   div {
      padding-right: $padding-lg;
      flex-grow: 1;
   }

   .stat-value {
      display: block;
      text-align: center;
      font-size: $font-size-lg;
   }

   .stat-label {
      display: block;
      text-align: center;
      font-size: $font-size-sm;
   }

   $triangle-size: 9px;
   &:after {
      content:'';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: $triangle-size*-1;
      width: 0;
      height: 0;
      border-top: solid $triangle-size $line-color;
      border-left: solid $triangle-size transparent;
      border-right: solid $triangle-size transparent;
   }

   .btn-close {
      padding: $padding-base;
      background-color: transparent;
      font-size: $font-size-lg;
      text-align: center;
      @extend .text-muted;
      margin-left: $padding-base;
      cursor: pointer;
      border: 0;
   }
}