//
// chart.scss
// Dashkit component
//

// Chart
//
// General styles

.chart {
  position: relative;
  height: $chart-height;
}

.chart.chart-appended {
  height: calc(#{$chart-height} - #{$chart-legend-height});
}

.chart-sm {
  height: $chart-height-sm;
}

.chart-sm.chart-appended {
  height: calc(#{$chart-height-sm} - #{$chart-legend-height});
}


// Sparkline

.chart-sparkline {
  width: $chart-sparkline-width;
  height: $chart-sparkline-height;
}


// Legend
//
// Custom legend

.chart-legend {
  display: flex;
  justify-content: center;
  margin-top: $chart-legend-margin-top;
  font-size: $chart-legend-font-size;
  text-align: center;
  color: $chart-legend-color;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;

  + .chart-legend-item {
    margin-left: 1rem;
  }
}

.chart-legend-indicator {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
}


// Tooltip
//
// Custom tooltip

#chart-tooltip {
  z-index: 0;
}

#chart-tooltip .arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateX(-.5rem);
}
