.chart {
  .user-select-none();
  display: inline-block;
  margin: 0;
  cursor: default;
  overflow: hidden;
  width: 33%;
  box-sizing: border-box;

  .tablet({
    width: 50%;
  });

  .largePhone({
    width: 100%;
  });

  h3 {
    text-align: center;

    &[ng-click] {
      cursor: pointer;
    }

  }
}

svg {

  .axis {

    line, path {
      fill: none;
      stroke: @primary-disabled;
    }

    text {
      font-size: 0.8em;
      fill: @primary-disabled;
    }

  }

  .label {
    text-transform: capitalize;
  }

  .metric {
    text-transform: none;
  }

  .marker {
    fill: @secondary;
  }

  .label {
    font-size: 0.75em;
    fill: @fg;
  }

  .tip {
    fill: @bgBlack;
    stroke: @secondary;
    stroke-width: 1px;
    font-size: 0.75em
  }
}