Gapminder/vizabi

$vzb-al-color-bubble: #999;
$vzb-al-color-stroke: #666;
$vzb-al-margin: 10px;
$vzb-al-margin-axis: 60px;
$vzb-al-color-axis: #999;
$vzb-al-year-size: 300px;

.vzb-tool {
  border-bottom: 1px solid #ccc;

  .vzb-axislabeler {
    @extend %vzb-chart-svg;
    margin: 0;
    font-family: $vzb-font-family;

    .vzb-al-axis {
      path,
      line {
        fill: none;
        stroke: $vzb-al-color-axis;
        shape-rendering: crispEdges;
      }
      text {
        fill: $vzb-al-color-axis;
        //@include font-size(15px);
      }
    }

    .vzb-al-axis-x,
    .vzb-al-axis-y {
      @extend .vzb-al-axis;
    }

    .vzb-al-line {
      fill: none;
      stroke: #3fb500;
      stroke-width: 1px;
    }
    .vzb-al-line-invert {
      fill: none;
      stroke: #00f;
      stroke-width: 1px;
    }
    .vzb-al-dots {
      cursor: pointer;
      fill: none;
      stroke: #3fb500;
      opacity: 0.5;
      &:hover {
        fill: #3fb500;
      }
    }
    .vzb-al-dots-invert {
      cursor: pointer;
      fill: none;
      stroke: #00f;
      opacity: 0.5;
      &:hover {
        fill: #00f;
      }
    }
  }

  &.vzb-medium {
    .vzb-axis-labeler {
      .vzb-al-year {
        @include font-size($vzb-al-year-size / 3 * 2);
      }
    }
  }

  &.vzb-small {
    .vzb-axis-labeler {
      .vzb-al-year {
        @include font-size($vzb-al-year-size / 3);
      }
    }
  }
}