//
// Variables
// --------------------------------------------------
@chart-left-space: 50px;
@chart-bottom-space: 50px;

@chart-y-axis-color: #434a54;
@chart-x-axis-color: #434a54;

@chart-y-axis-bar-tagert-line-color: #1f2125;
@chart-x-axis-bar-tagert-line-color: #1f2125;

@chart-y-axis-tagert-line-color: #da4453;
@chart-x-axis-tagert-line-color: #da4453;

@chart-y-axis-tagert-label-color: #da4453;
@chart-x-axis-tagert-label-color: #da4453;

@chart-y-axis-tagert-label-font-size: 12px;
@chart-x-axis-tagert-label-font-size: 12px;

@chart-y-axis-tagert-line-offset: 190px;
@chart-x-axis-tagert-line-offset: 170px;

@chart-y-axis-line-color: #ccd1d9;
@chart-x-axis-line-color: #ccd1d9;

@chart-y-axis-label-color: #656d78;
@chart-x-axis-label-color: #656d78;

@chart-y-axis-label-font-size: 12px;
@chart-x-axis-label-font-size: 12px;

@chart-primary-bar-color: #656d78;
@chart-secondary-bar-color: #967adc;
@chart-tertiary-bar-color: #3bafda;
@chart-dashed-bar-color: #ccd1d9;

//
// Gradient mixin
// --------------------------------------------------
#gradient {

  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color));
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent));
    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color)));
  }

  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color));
    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent);
    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color)));
  }
  
} // #gradient

/**
  * Demo
  * --------------------------------------------------
  */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #f5f7fa;
  font-family: 'Open Sans', 'Arial', sans-serif;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}


#chart-1 {
  width: 600px;
  height: 300px;
}
#chart-2 {
  width: 400px;
  height: 600px;
}
#chart-3 {
  width: 600px;
  height: 130px;
}
#chart-4 {
  width: 130px;
  height: 500px;
}
#chart-5 {
  width: 300px;
  height: 200px;
}


/**
  * Chart container
  * --------------------------------------------------
  */
  
.metric-chart {
  position: relative;
  margin: 40px auto;
}

/**
  * Chart list reset
  * --------------------------------------------------
  */

.y-axis-line-list,
.x-axis-line-list,
.y-axis-label-list,
.x-axis-label-list,
.y-axis-bar-list,
.x-axis-bar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  &:before,
  &:after {
    display: table;
    content: " ";
    &:after {
      clear: both;
    }
  }
}

/**
  * X & Y lines
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <div class="{ y|x }-axis"></div>
  *
  */

.y-axis,
.x-axis {
  position: absolute;
  bottom: @chart-bottom-space;
  left: @chart-left-space;
}

.y-axis {
  top: 0;
  right: auto;
  width: 1px;
  background-color: @chart-y-axis-color;
}

.x-axis {
  top: auto;
  right: 0;
  height: 1px;
  background-color: @chart-x-axis-color;
}

/**
  * X & Y target lines
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <div class="{ y|x }-axis-target">
  *   <span class="{ y|x }-axis-target-line">
  *     <span class="{ y|x }-axis-target-line-label" data-label="{ label }"></span>
  *   </span>
  * </div>
  *
  */

.y-axis-target,
.x-axis-target {
  position: absolute;
  top: 0;
  right: 0;
  bottom: (@chart-bottom-space + 1);
  left: (@chart-left-space + 1);
  > .y-axis-target-line,
  > .x-axis-target-line {
    position: absolute;
  }
}

.y-axis-target {
  > .y-axis-target-line {
    top: 0;
    right: auto;
    bottom: 0;
    left: @chart-y-axis-tagert-line-offset;
    width: 0;
    border-right: 1px dashed @chart-y-axis-tagert-line-color;
  }
}

.y-axis-target-line-label {
  position: absolute;
  top: -18px;
  right: 0;
  width: 100px;
  text-align: right;
  &:after {
    content: attr(data-label);
    color: @chart-y-axis-tagert-label-color;
    font-size: @chart-y-axis-tagert-label-font-size;
    line-height: 1;
  }
}

.x-axis-target {
  > .x-axis-target-line {
    top: auto;
    right: 0;
    bottom: @chart-x-axis-tagert-line-offset;
    left: 0;
    height: 0;
    border-bottom: 1px dashed @chart-x-axis-tagert-line-color;
  }
}

.x-axis-target-line-label {
  position: absolute;
  top: -9px;
  right: -50px;
  width: 40px;
  text-align: left;
  &:after {
    content: attr(data-label);
    color: @chart-y-axis-tagert-label-color;
    font-size: @chart-y-axis-tagert-label-font-size;
    line-height: 1;
  }
}

/**
  * X axis background lines
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="x-axis-bar-list count-{ count }">
  *   <li class="x-axis-bar-item">
  *     <span class="x-axis-line"></span>
  *   </li>
  * </ul>
  *
  */
  
.x-axis-line-list {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: (@chart-bottom-space + 1);
  left: @chart-left-space;
}

.x-axis-line-item {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  .count-1 & {
    &:nth-of-type(1) { right: ((100% / 1) * 0); left: ((100% / 1) * 0); }
  } // .count-1
  .count-2 & {
    &:nth-of-type(1) { right: ((100% / 2) * 1); left: ((100% / 2) * 0); }
    &:nth-of-type(2) { right: ((100% / 2) * 0); left: ((100% / 2) * 1); }
  } // .count-2
  .count-3 & {
    &:nth-of-type(1) { right: ((100% / 3) * 2); left: ((100% / 3) * 0); }
    &:nth-of-type(2) { right: ((100% / 3) * 1); left: ((100% / 3) * 1); }
    &:nth-of-type(3) { right: ((100% / 3) * 0); left: ((100% / 3) * 2); }
  } // .count-3
  .count-4 & {
    &:nth-of-type(1) { right: ((100% / 4) * 3); left: ((100% / 4) * 0); }
    &:nth-of-type(2) { right: ((100% / 4) * 2); left: ((100% / 4) * 1); }
    &:nth-of-type(3) { right: ((100% / 4) * 1); left: ((100% / 4) * 2); }
    &:nth-of-type(4) { right: ((100% / 4) * 0); left: ((100% / 4) * 3); }
  } // .count-4
  .count-5 & {
    &:nth-of-type(1) { right: ((100% / 5) * 4); left: ((100% / 5) * 0); }
    &:nth-of-type(2) { right: ((100% / 5) * 3); left: ((100% / 5) * 1); }
    &:nth-of-type(3) { right: ((100% / 5) * 2); left: ((100% / 5) * 2); }
    &:nth-of-type(4) { right: ((100% / 5) * 1); left: ((100% / 5) * 3); }
    &:nth-of-type(5) { right: ((100% / 5) * 0); left: ((100% / 5) * 4); }
  } // .count-5
  .count-6 & {
    &:nth-of-type(1) { right: ((100% / 6) * 5); left: ((100% / 6) * 0); }
    &:nth-of-type(2) { right: ((100% / 6) * 4); left: ((100% / 6) * 1); }
    &:nth-of-type(3) { right: ((100% / 6) * 3); left: ((100% / 6) * 2); }
    &:nth-of-type(4) { right: ((100% / 6) * 2); left: ((100% / 6) * 3); }
    &:nth-of-type(5) { right: ((100% / 6) * 1); left: ((100% / 6) * 4); }
    &:nth-of-type(6) { right: ((100% / 6) * 0); left: ((100% / 6) * 5); }
  } // .count-6
  .count-7 & {
    &:nth-of-type(1) { right: ((100% / 7) * 6); left: ((100% / 7) * 0); }
    &:nth-of-type(2) { right: ((100% / 7) * 5); left: ((100% / 7) * 1); }
    &:nth-of-type(3) { right: ((100% / 7) * 4); left: ((100% / 7) * 2); }
    &:nth-of-type(4) { right: ((100% / 7) * 3); left: ((100% / 7) * 3); }
    &:nth-of-type(5) { right: ((100% / 7) * 2); left: ((100% / 7) * 4); }
    &:nth-of-type(6) { right: ((100% / 7) * 1); left: ((100% / 7) * 5); }
    &:nth-of-type(7) { right: ((100% / 7) * 0); left: ((100% / 7) * 6); }
  } // .count-7
  .count-8 & {
    &:nth-of-type(1) { right: ((100% / 8) * 7); left: ((100% / 8) * 0); }
    &:nth-of-type(2) { right: ((100% / 8) * 6); left: ((100% / 8) * 1); }
    &:nth-of-type(3) { right: ((100% / 8) * 5); left: ((100% / 8) * 2); }
    &:nth-of-type(4) { right: ((100% / 8) * 4); left: ((100% / 8) * 3); }
    &:nth-of-type(5) { right: ((100% / 8) * 3); left: ((100% / 8) * 4); }
    &:nth-of-type(6) { right: ((100% / 8) * 2); left: ((100% / 8) * 5); }
    &:nth-of-type(7) { right: ((100% / 8) * 1); left: ((100% / 8) * 6); }
    &:nth-of-type(8) { right: ((100% / 8) * 0); left: ((100% / 8) * 7); }
  } // .count-8
  .count-9 & {
    &:nth-of-type(1) { right: ((100% / 9) * 8); left: ((100% / 9) * 0); }
    &:nth-of-type(2) { right: ((100% / 9) * 7); left: ((100% / 9) * 1); }
    &:nth-of-type(3) { right: ((100% / 9) * 6); left: ((100% / 9) * 2); }
    &:nth-of-type(4) { right: ((100% / 9) * 5); left: ((100% / 9) * 3); }
    &:nth-of-type(5) { right: ((100% / 9) * 4); left: ((100% / 9) * 4); }
    &:nth-of-type(6) { right: ((100% / 9) * 3); left: ((100% / 9) * 5); }
    &:nth-of-type(7) { right: ((100% / 9) * 2); left: ((100% / 9) * 6); }
    &:nth-of-type(8) { right: ((100% / 9) * 1); left: ((100% / 9) * 7); }
    &:nth-of-type(9) { right: ((100% / 9) * 0); left: ((100% / 9) * 8); }
  } // .count-9
  .count-10 & {
    &:nth-of-type(1) { right: ((100% / 10) * 9); left: ((100% / 10) * 0); }
    &:nth-of-type(2) { right: ((100% / 10) * 8); left: ((100% / 10) * 1); }
    &:nth-of-type(3) { right: ((100% / 10) * 7); left: ((100% / 10) * 2); }
    &:nth-of-type(4) { right: ((100% / 10) * 6); left: ((100% / 10) * 3); }
    &:nth-of-type(5) { right: ((100% / 10) * 5); left: ((100% / 10) * 4); }
    &:nth-of-type(6) { right: ((100% / 10) * 4); left: ((100% / 10) * 5); }
    &:nth-of-type(7) { right: ((100% / 10) * 3); left: ((100% / 10) * 6); }
    &:nth-of-type(8) { right: ((100% / 10) * 2); left: ((100% / 10) * 7); }
    &:nth-of-type(9) { right: ((100% / 10) * 1); left: ((100% / 10) * 8); }
    &:nth-of-type(10) { right: ((100% / 10) * 0); left: ((100% / 10) * 9); }
  } // .count-10
} // .x-axis-line-item 

.x-axis-line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-right: 1px solid @chart-x-axis-line-color;
} // .x-axis-line

/**
  * Y axis background lines
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="y-axis-bar-list count-{ count }">
  *   <li class="y-axis-bar-item">
  *     <span class="y-axis-line"></span>
  *   </li>
  * </ul>
  *
  */
  
.y-axis-line-list {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: @chart-bottom-space;
  left: (@chart-left-space + 1);
}

.y-axis-line-item {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  .count-1 & {
    &:nth-of-type(1) { bottom: ((100% / 1) * 1); }
  }
  .count-2 & {
    &:nth-of-type(1) { bottom: ((100% / 2) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 2) * 2); }
  }
  .count-3 & {
    &:nth-of-type(1) { bottom: ((100% / 3) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 3) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 3) * 3); }
  }
  .count-4 & {
    &:nth-of-type(1) { bottom: ((100% / 4) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 4) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 4) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 4) * 4); }
  }
  .count-5 & {
    &:nth-of-type(1) { bottom: ((100% / 5) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 5) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 5) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 5) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 5) * 5); }
  }
  .count-6 & {
    &:nth-of-type(1) { bottom: ((100% / 6) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 6) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 6) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 6) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 6) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 6) * 6); }
  }
  .count-7 & {
    &:nth-of-type(1) { bottom: ((100% / 7) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 7) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 7) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 7) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 7) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 7) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 7) * 7); }
  }
  .count-8 & {
    &:nth-of-type(1) { bottom: ((100% / 8) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 8) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 8) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 8) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 8) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 8) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 8) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 8) * 8); }
  }
  .count-9 & {
    &:nth-of-type(1) { bottom: ((100% / 9) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 9) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 9) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 9) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 9) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 9) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 9) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 9) * 8); }
    &:nth-of-type(9) { bottom: ((100% / 9) * 9); }
  }
  .count-10 & {
    &:nth-of-type(1) { bottom: ((100% / 10) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 10) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 10) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 10) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 10) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 10) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 10) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 10) * 8); }
    &:nth-of-type(9) { bottom: ((100% / 10) * 9); }
    &:nth-of-type(10) { bottom: ((100% / 10) * 10); }
  }
} // .y-axis-line-item

.y-axis-line {
  display: block;
  height: 1px;
  background-color: @chart-y-axis-line-color;
} // .x-axis-line

/**
  * X axis labels
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="x-axis-label-list count-{ count }">
  *   <li class="x-axis-label-item">
  *     <span class="x-axis-label">{ label }</span>
  *   </li>
  * </ul>
  *
  */
  
.x-axis-label-list {
  position: absolute;
  top: auto;
  right: 5px;
  bottom: (@chart-bottom-space - 20);
  .h-bar-chart & {
    right: 5px;
    left: (@chart-left-space + 6);
  }
  .v-bar-chart & {
    right: 10px;
    left: @chart-left-space;
  }
} // .x-axis-label-list

.x-axis-label-item {
  display: block;
  float: left;
  width: 100%;
  .count-1 & { width: (100% / 1); }
  .count-2 & { width: (100% / 2); }
  .count-3 & { width: (100% / 3); }
  .count-4 & { width: (100% / 4); }
  .count-5 & { width: (100% / 5); }
  .count-6 & { width: (100% / 6); }
  .count-7 & { width: (100% / 7); }
  .count-8 & { width: (100% / 8); }
  .count-9 & { width: (100% / 9); }
  .count-10 & { width: (100% / 10); }
} // .x-axis-label-item

.x-axis-label {
  position: relative;
  display: block;
  color: @chart-x-axis-label-color;
  text-align: center;
  font-size: @chart-y-axis-label-font-size;
  line-height: 1;
  .h-bar-chart & {
    text-align: center;
  }
  .v-bar-chart & {
    text-align: right;
  }
} // .x-axis-label

/**
  * Y axis labels
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="y-axis-label-list count-{ count }">
  *   <li class="y-axis-label-item">
  *     <span class="y-axis-label">{ label }</span>
  *   </li>
  * </ul>
  *
  */
  
.y-axis-label-list {
  position: absolute;
  top: 10px;
  right: auto;
  bottom: @chart-bottom-space;
  left: 0;
  width: (@chart-left-space - 10);
} // .y-axis-label-list

.y-axis-label-item {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  .count-1 & {
    &:nth-of-type(1) { bottom: ((100% / 1) * 1); }
  } // .count-1
  .count-2 & {
    &:nth-of-type(1) { bottom: ((100% / 2) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 2) * 2); }
  } // .count-2
  .count-3 & {
    &:nth-of-type(1) { bottom: ((100% / 3) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 3) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 3) * 3); }
  } // .count-3
  .count-4 & {
    &:nth-of-type(1) { bottom: ((100% / 4) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 4) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 4) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 4) * 4); }
  } // .count-4
  .count-5 & {
    &:nth-of-type(1) { bottom: ((100% / 5) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 5) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 5) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 5) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 5) * 5); }
  } // .count-5
  .count-6 & {
    &:nth-of-type(1) { bottom: ((100% / 6) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 6) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 6) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 6) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 6) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 6) * 6); }
  } // .count-6
  .count-7 & {
    &:nth-of-type(1) { bottom: ((100% / 7) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 7) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 7) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 7) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 7) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 7) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 7) * 7); }
  } // .count-7
  .count-8 & {
    &:nth-of-type(1) { bottom: ((100% / 8) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 8) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 8) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 8) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 8) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 8) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 8) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 8) * 8); }
  } // .count-8
  .count-9 & {
    &:nth-of-type(1) { bottom: ((100% / 9) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 9) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 9) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 9) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 9) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 9) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 9) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 9) * 8); }
    &:nth-of-type(9) { bottom: ((100% / 9) * 9); }
  } // .count-9
  .count-10 & {
    &:nth-of-type(1) { bottom: ((100% / 10) * 1); }
    &:nth-of-type(2) { bottom: ((100% / 10) * 2); }
    &:nth-of-type(3) { bottom: ((100% / 10) * 3); }
    &:nth-of-type(4) { bottom: ((100% / 10) * 4); }
    &:nth-of-type(5) { bottom: ((100% / 10) * 5); }
    &:nth-of-type(6) { bottom: ((100% / 10) * 6); }
    &:nth-of-type(7) { bottom: ((100% / 10) * 7); }
    &:nth-of-type(8) { bottom: ((100% / 10) * 8); }
    &:nth-of-type(9) { bottom: ((100% / 10) * 9); }
    &:nth-of-type(10) { bottom: ((100% / 10) * 10); }
  } // .count-10
} // .y-axis-label-item

.y-axis-label {
  position: relative;
  display: block;
  color: @chart-y-axis-label-color;
  text-align: right;
  font-size: @chart-y-axis-label-font-size;
  line-height: 1;
  .h-bar-chart & {
    bottom: (-@chart-y-axis-label-font-size / 2);
  }
  .v-bar-chart & {
    bottom: (-(@chart-y-axis-label-font-size + (@chart-y-axis-label-font-size / 2)) );
  }
} // .y-axis-label

/**
  * X axis bars
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="x-axis-bar-list count-{ count }">
  *   <li class="x-axis-bar-item { nested-bars }">
  *     <span class="x-axis-bar { primary|secondary|tertiary }" style="top: { value in % };">
  *       <span class="x-axis-bar-value" data-value="{ value }"></span>
  *     </span>
  *     <span class="x-axis-bullet-bar" style="top: { value in % }"></span>
  *     <span class="x-axis-bar-target-line" style="bottom: { value in % };"></span>
  *   </li>
  * </ul>
  *
  */

.x-axis-bar-list {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: (@chart-bottom-space + 1);
  left: (@chart-left-space + 6);
}

.x-axis-bar-item {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  .count-1 & {
    &:nth-of-type(1) { right: ((100% / 1) * 0); left: ((100% / 1) * 0); }
  } // .count-1
  .count-2 & {
    &:nth-of-type(1) { right: ((100% / 2) * 1); left: ((100% / 2) * 0); }
    &:nth-of-type(2) { right: ((100% / 2) * 0); left: ((100% / 2) * 1); }
  } // .count-2
  .count-3 & {
    &:nth-of-type(1) { right: ((100% / 3) * 2); left: ((100% / 3) * 0); }
    &:nth-of-type(2) { right: ((100% / 3) * 1); left: ((100% / 3) * 1); }
    &:nth-of-type(3) { right: ((100% / 3) * 0); left: ((100% / 3) * 2); }
  } // .count-3
  .count-4 & {
    &:nth-of-type(1) { right: ((100% / 4) * 3); left: ((100% / 4) * 0); }
    &:nth-of-type(2) { right: ((100% / 4) * 2); left: ((100% / 4) * 1); }
    &:nth-of-type(3) { right: ((100% / 4) * 1); left: ((100% / 4) * 2); }
    &:nth-of-type(4) { right: ((100% / 4) * 0); left: ((100% / 4) * 3); }
  } // .count-4
  .count-5 & {
    &:nth-of-type(1) { right: ((100% / 5) * 4); left: ((100% / 5) * 0); }
    &:nth-of-type(2) { right: ((100% / 5) * 3); left: ((100% / 5) * 1); }
    &:nth-of-type(3) { right: ((100% / 5) * 2); left: ((100% / 5) * 2); }
    &:nth-of-type(4) { right: ((100% / 5) * 1); left: ((100% / 5) * 3); }
    &:nth-of-type(5) { right: ((100% / 5) * 0); left: ((100% / 5) * 4); }
  } // .count-5
  .count-6 & {
    &:nth-of-type(1) { right: ((100% / 6) * 5); left: ((100% / 6) * 0); }
    &:nth-of-type(2) { right: ((100% / 6) * 4); left: ((100% / 6) * 1); }
    &:nth-of-type(3) { right: ((100% / 6) * 3); left: ((100% / 6) * 2); }
    &:nth-of-type(4) { right: ((100% / 6) * 2); left: ((100% / 6) * 3); }
    &:nth-of-type(5) { right: ((100% / 6) * 1); left: ((100% / 6) * 4); }
    &:nth-of-type(6) { right: ((100% / 6) * 0); left: ((100% / 6) * 5); }
  } // .count-6
  .count-7 & {
    &:nth-of-type(1) { right: ((100% / 7) * 6); left: ((100% / 7) * 0); }
    &:nth-of-type(2) { right: ((100% / 7) * 5); left: ((100% / 7) * 1); }
    &:nth-of-type(3) { right: ((100% / 7) * 4); left: ((100% / 7) * 2); }
    &:nth-of-type(4) { right: ((100% / 7) * 3); left: ((100% / 7) * 3); }
    &:nth-of-type(5) { right: ((100% / 7) * 2); left: ((100% / 7) * 4); }
    &:nth-of-type(6) { right: ((100% / 7) * 1); left: ((100% / 7) * 5); }
    &:nth-of-type(7) { right: ((100% / 7) * 0); left: ((100% / 7) * 6); }
  } // .count-7
  .count-8 & {
    &:nth-of-type(1) { right: ((100% / 8) * 7); left: ((100% / 8) * 0); }
    &:nth-of-type(2) { right: ((100% / 8) * 6); left: ((100% / 8) * 1); }
    &:nth-of-type(3) { right: ((100% / 8) * 5); left: ((100% / 8) * 2); }
    &:nth-of-type(4) { right: ((100% / 8) * 4); left: ((100% / 8) * 3); }
    &:nth-of-type(5) { right: ((100% / 8) * 3); left: ((100% / 8) * 4); }
    &:nth-of-type(6) { right: ((100% / 8) * 2); left: ((100% / 8) * 5); }
    &:nth-of-type(7) { right: ((100% / 8) * 1); left: ((100% / 8) * 6); }
    &:nth-of-type(8) { right: ((100% / 8) * 0); left: ((100% / 8) * 7); }
  } // .count-8
  .count-9 & {
    &:nth-of-type(1) { right: ((100% / 9) * 8); left: ((100% / 9) * 0); }
    &:nth-of-type(2) { right: ((100% / 9) * 7); left: ((100% / 9) * 1); }
    &:nth-of-type(3) { right: ((100% / 9) * 6); left: ((100% / 9) * 2); }
    &:nth-of-type(4) { right: ((100% / 9) * 5); left: ((100% / 9) * 3); }
    &:nth-of-type(5) { right: ((100% / 9) * 4); left: ((100% / 9) * 4); }
    &:nth-of-type(6) { right: ((100% / 9) * 3); left: ((100% / 9) * 5); }
    &:nth-of-type(7) { right: ((100% / 9) * 2); left: ((100% / 9) * 6); }
    &:nth-of-type(8) { right: ((100% / 9) * 1); left: ((100% / 9) * 7); }
    &:nth-of-type(9) { right: ((100% / 9) * 0); left: ((100% / 9) * 8); }
  } // .count-9
  .count-10 & {
    &:nth-of-type(1) { right: ((100% / 10) * 9); left: ((100% / 10) * 0); }
    &:nth-of-type(2) { right: ((100% / 10) * 8); left: ((100% / 10) * 1); }
    &:nth-of-type(3) { right: ((100% / 10) * 7); left: ((100% / 10) * 2); }
    &:nth-of-type(4) { right: ((100% / 10) * 6); left: ((100% / 10) * 3); }
    &:nth-of-type(5) { right: ((100% / 10) * 5); left: ((100% / 10) * 4); }
    &:nth-of-type(6) { right: ((100% / 10) * 4); left: ((100% / 10) * 5); }
    &:nth-of-type(7) { right: ((100% / 10) * 3); left: ((100% / 10) * 6); }
    &:nth-of-type(8) { right: ((100% / 10) * 2); left: ((100% / 10) * 7); }
    &:nth-of-type(9) { right: ((100% / 10) * 1); left: ((100% / 10) * 8); }
    &:nth-of-type(10) { right: ((100% / 10) * 0); left: ((100% / 10) * 9); }
  } // .count-10
} // .x-axis-bar-item

.x-axis-bar {
  position: absolute;
  top: auto;
  right: 5px;
  bottom: 0;
  left: 5px;
  display: block;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background-color: #4fc1e9;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
  transition: all 0.15s linear;
  &.primary {
    border-color: darken(@chart-primary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
  }
  &.secondary {
    border-color: darken(@chart-secondary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
  }
  &.tertiary {
    border-color: darken(@chart-tertiary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
  }
  &.dashed {
    border-color: darken(@chart-dashed-bar-color, 30%);
    border-style: dashed;
    border-bottom: none;
    background-color: #fff;
  }
  .nested-bars & {
    &:nth-of-type(1) { right: 5px; left: 5px; }
    &:nth-of-type(2) { right: 10px; left: 10px; }
    &:nth-of-type(3) { right: 15px; left: 15px; }
  }
} // .x-axis-bar

.x-axis-bar-value {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
  cursor: pointer;
  transition: all 0.15s linear;
  .primary & {
    border-color: darken(@chart-primary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
  }
  .secondary & {
    border-color: darken(@chart-secondary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
  }
  .tertiary & {
    border-color: darken(@chart-tertiary-bar-color, 30%);
    #gradient > .horizontal(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
  }
  .dashed & {
    border-color: darken(@chart-dashed-bar-color, 30%);
    background-color: #fff;
  }
  &:hover,
  &:focus {
    &:after,
    &:before {
      visibility: visible;
      opacity: 1;
      transition: all 0.15s linear;
    }
  }
  &:after {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 200;
    visibility: hidden;
    margin-left: -20px;
    padding: 2px 0;
    width: 40px;
    border-radius: 3px;
    background-color: #434a54;
    color: #fff;
    content: attr(data-value);
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: (18/12);
    opacity: 0;
  }
  &:before {
    position: absolute;
    top: -3px;
    left: 50%;
    z-index: 200;
    visibility: hidden;
    margin-left: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #434a54;
    content: '';
    opacity: 0;
  }
} // .x-axis-bar-value

.x-axis-bullet-bar {
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  left: 15px;
  border: 1px solid rgba(0,0,0,0.8);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background-color: rgba(0,0,0,0.6);
  box-shadow: inset 0px 0px 6px 1px rgba(0, 0, 0, 0.4);
  transition: all 0.15s linear;
} // .x-axis-bullet-bar

.x-axis-bar-target-line {
  position: absolute;
  top: auto;
  right: 2px;
  bottom: 0;
  left: 2px;
  height: 1px;
  background-color: @chart-x-axis-bar-tagert-line-color;
} // .x-axis-bar-target-line

/**
  * Y axis bars
  * --------------------------------------------------
  *
  * Recommended usage:
  *
  * <ul class="y-axis-bar-list count-{ count }">
  *   <li class="y-axis-bar-item { nested-bars }">
  *     <span class="y-axis-bar { primary|secondary|tertiary }" style="right: { value in % };">
  *       <span class="y-axis-bar-value" data-value="{ value }"></span>
  *     </span>
  *     <span class="y-axis-bullet-bar" style="right: { value in % }"></span>
  *     <span class="y-axis-bar-target-line" style="left: { value in % };"></span>
  *   </li>
  * </ul>
  *
  */
  
.y-axis-bar-list {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: (@chart-bottom-space + 6);
  left: (@chart-left-space + 1);
}

.y-axis-bar-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  .count-1 & {
    &:nth-of-type(1) { top: ((100% / 1) * 0); bottom: ((100% / 1) * 0); }
  } // .count-1
  .count-2 & {
    &:nth-of-type(1) { top: ((100% / 2) * 0); bottom: ((100% / 2) * 1); }
    &:nth-of-type(2) { top: ((100% / 2) * 1); bottom: ((100% / 2) * 0); }
  } // .count-2
  .count-3 & {
    &:nth-of-type(1) { top: ((100% / 3) * 0); bottom: ((100% / 3) * 2); }
    &:nth-of-type(2) { top: ((100% / 3) * 1); bottom: ((100% / 3) * 1); }
    &:nth-of-type(3) { top: ((100% / 3) * 2); bottom: ((100% / 3) * 0); }
  } // .count-3
  .count-4 & {
    &:nth-of-type(1) { top: ((100% / 4) * 0); bottom: ((100% / 4) * 3); }
    &:nth-of-type(2) { top: ((100% / 4) * 1); bottom: ((100% / 4) * 2); }
    &:nth-of-type(3) { top: ((100% / 4) * 2); bottom: ((100% / 4) * 1); }
    &:nth-of-type(4) { top: ((100% / 4) * 3); bottom: ((100% / 4) * 0); }
  } // .count-4
  .count-5 & {
    &:nth-of-type(1) { top: ((100% / 5) * 0); bottom: ((100% / 5) * 4); }
    &:nth-of-type(2) { top: ((100% / 5) * 1); bottom: ((100% / 5) * 3); }
    &:nth-of-type(3) { top: ((100% / 5) * 2); bottom: ((100% / 5) * 2); }
    &:nth-of-type(4) { top: ((100% / 5) * 3); bottom: ((100% / 5) * 1); }
    &:nth-of-type(5) { top: ((100% / 5) * 4); bottom: ((100% / 5) * 0); }
  } // .count-5
  .count-6 & {
    &:nth-of-type(1) { top: ((100% / 6) * 0); bottom: ((100% / 6) * 5); }
    &:nth-of-type(2) { top: ((100% / 6) * 1); bottom: ((100% / 6) * 4); }
    &:nth-of-type(3) { top: ((100% / 6) * 2); bottom: ((100% / 6) * 3); }
    &:nth-of-type(4) { top: ((100% / 6) * 3); bottom: ((100% / 6) * 2); }
    &:nth-of-type(5) { top: ((100% / 6) * 4); bottom: ((100% / 6) * 1); }
    &:nth-of-type(6) { top: ((100% / 6) * 5); bottom: ((100% / 6) * 0); }
  } // .count-6
  .count-7 & {
    &:nth-of-type(1) { top: ((100% / 7) * 0); bottom: ((100% / 7) * 6); }
    &:nth-of-type(2) { top: ((100% / 7) * 1); bottom: ((100% / 7) * 5); }
    &:nth-of-type(3) { top: ((100% / 7) * 2); bottom: ((100% / 7) * 4); }
    &:nth-of-type(4) { top: ((100% / 7) * 3); bottom: ((100% / 7) * 3); }
    &:nth-of-type(5) { top: ((100% / 7) * 4); bottom: ((100% / 7) * 2); }
    &:nth-of-type(6) { top: ((100% / 7) * 5); bottom: ((100% / 7) * 1); }
    &:nth-of-type(7) { top: ((100% / 7) * 6); bottom: ((100% / 7) * 0); }
  } // .count-7
  .count-8 & {
    &:nth-of-type(1) { top: ((100% / 8) * 0); bottom: ((100% / 8) * 7); }
    &:nth-of-type(2) { top: ((100% / 8) * 1); bottom: ((100% / 8) * 6); }
    &:nth-of-type(3) { top: ((100% / 8) * 2); bottom: ((100% / 8) * 5); }
    &:nth-of-type(4) { top: ((100% / 8) * 3); bottom: ((100% / 8) * 4); }
    &:nth-of-type(5) { top: ((100% / 8) * 4); bottom: ((100% / 8) * 3); }
    &:nth-of-type(6) { top: ((100% / 8) * 5); bottom: ((100% / 8) * 2); }
    &:nth-of-type(7) { top: ((100% / 8) * 6); bottom: ((100% / 8) * 1); }
    &:nth-of-type(8) { top: ((100% / 8) * 7); bottom: ((100% / 8) * 0); }
  } // .count-8
  .count-9 & {
    &:nth-of-type(1) { top: ((100% / 9) * 0); bottom: ((100% / 9) * 8); }
    &:nth-of-type(2) { top: ((100% / 9) * 1); bottom: ((100% / 9) * 7); }
    &:nth-of-type(3) { top: ((100% / 9) * 2); bottom: ((100% / 9) * 6); }
    &:nth-of-type(4) { top: ((100% / 9) * 3); bottom: ((100% / 9) * 5); }
    &:nth-of-type(5) { top: ((100% / 9) * 4); bottom: ((100% / 9) * 4); }
    &:nth-of-type(6) { top: ((100% / 9) * 5); bottom: ((100% / 9) * 3); }
    &:nth-of-type(7) { top: ((100% / 9) * 6); bottom: ((100% / 9) * 2); }
    &:nth-of-type(8) { top: ((100% / 9) * 7); bottom: ((100% / 9) * 1); }
    &:nth-of-type(9) { top: ((100% / 9) * 8); bottom: ((100% / 9) * 0); }
  } // .count-9
  .count-10 & {
    &:nth-of-type(1) { top: ((100% / 10) * 0); bottom: ((100% / 10) * 9); }
    &:nth-of-type(2) { top: ((100% / 10) * 1); bottom: ((100% / 10) * 8); }
    &:nth-of-type(3) { top: ((100% / 10) * 2); bottom: ((100% / 10) * 7); }
    &:nth-of-type(4) { top: ((100% / 10) * 3); bottom: ((100% / 10) * 6); }
    &:nth-of-type(5) { top: ((100% / 10) * 4); bottom: ((100% / 10) * 5); }
    &:nth-of-type(6) { top: ((100% / 10) * 5); bottom: ((100% / 10) * 4); }
    &:nth-of-type(7) { top: ((100% / 10) * 6); bottom: ((100% / 10) * 3); }
    &:nth-of-type(8) { top: ((100% / 10) * 7); bottom: ((100% / 10) * 2); }
    &:nth-of-type(9) { top: ((100% / 10) * 8); bottom: ((100% / 10) * 1); }
    &:nth-of-type(10) { top: ((100% / 10) * 9); bottom: ((100% / 10) * 0); }
  } // .count-10
} // .y-axis-bar-item

.y-axis-bar {
  position: absolute;
  top: 5px;
  right: auto;
  bottom: 5px;
  left: 0;
  display: block;
  border: 1px solid transparent;
  border-left: none;
  border-radius: 0 3px 3px 0;
  background-color: #4fc1e9;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
  transition: all 0.15s linear;
  &.primary {
    border-color: darken(@chart-primary-bar-color, 30%);
    #gradient > .vertical(lighten(#656d78, 10%), @chart-primary-bar-color);
  }
  &.secondary {
    border-color: darken(@chart-secondary-bar-color, 30%);
    #gradient > .vertical(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
  }
  &.tertiary {
    border-color: darken(@chart-tertiary-bar-color, 30%);
    #gradient > .vertical(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
  }
  &.dashed {
    border-color: darken(@chart-dashed-bar-color, 30%);
    border-style: dashed;
    border-left: none;
    background-color: #fff;
  }
  .nested-bars & {
    &:nth-of-type(1) { top: 5px; bottom: 5px; }
    &:nth-of-type(2) { top: 10px; bottom: 10px; }
    &:nth-of-type(3) { top: 15px; bottom: 15px; }
  }
} // .y-axis-bar

.y-axis-bar-value {
  position: absolute;
  top: 50%;
  right: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
  cursor: pointer;
  transition: all 0.15s linear;
  .primary & {
    border-color: darken(@chart-primary-bar-color, 30%);
    #gradient > .vertical(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
  }
  .secondary > & {
    border-color: darken(@chart-secondary-bar-color, 30%);
    #gradient > .vertical(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
  }
  .tertiary > & {
    border-color: darken(@chart-tertiary-bar-color, 30%);
    #gradient > .vertical(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
  }
  .dashed & {
    border-color: darken(@chart-dashed-bar-color, 30%);
    background-color: #fff;
  }
  &:hover,
  &:focus {
    &:after,
    &:before {
      visibility: visible;
      opacity: 1;
      transition: all 0.15s linear;
    }
  }
  &:after {
    position: absolute;
    top: 50%;
    right: -43px;
    z-index: 200;
    visibility: hidden;
    margin-top: -11px;
    padding: 2px 0;
    width: 40px;
    border-radius: 3px;
    background-color: #434a54;
    color: #fff;
    content: attr(data-value);
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: (18/12);
    opacity: 0;
  }
  &:before {
    position: absolute;
    top: 50%;
    right: -3px;
    z-index: 200;
    visibility: hidden;
    margin-top: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: #434a54;
    content: '';
    opacity: 0;
  }
} // .y-axis-bar-value

.y-axis-bullet-bar {
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 15px;
  left: 0;
  border: 1px solid rgba(0,0,0,0.8);
  border-left: none;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.6);
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.3),
    0 1px 0 0 rgba(255,255,255,0.3);
  transition: all 0.15s linear;
} // .y-axis-bar-target-line

.y-axis-bar-target-line {
  position: absolute;
  top: 2px;
  right: auto;
  bottom: 2px;
  left: 0;
  width: 1px;
  background-color: @chart-y-axis-bar-tagert-line-color;
} // .y-axis-bar-target-line