// // 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);

}