@use '../config' as *;

.chart {
  --chart-min-height: #{$chart-min-height};

  display: block;
  min-height: var(--chart-min-height);

  text {
    font-family: inherit;
  }
}

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

  height: var(--chart-height-sm);
}

.chart-lg {
  --chart-height-lg: #{$chart-height-lg};

  height: var(--chart-height-lg);
}

.chart-square {
  --chart-height-square: #{$chart-height-square};

  height: var(--chart-height-square);
}

/**
Chart sparkline
 */
.chart-sparkline {
  --chart-sparkline-width: #{$chart-sparkline-width};
  --chart-sparkline-height: #{$chart-sparkline-height};

  position: relative;
  width: var(--chart-sparkline-width);
  height: var(--chart-sparkline-height);
  min-height: 0 !important;
  line-height: 1;
}

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

  height: var(--chart-sparkline-height-sm);
}

.chart-sparkline-square {
  --chart-sparkline-width-square: #{$chart-sparkline-width-square};

  width: var(--chart-sparkline-width-square);
}

.chart-sparkline-wide {
  --chart-sparkline-width-wide: #{$chart-sparkline-width-wide};

  width: var(--chart-sparkline-width-wide);
}

.chart-sparkline-label {
  --chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};

  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $h6-font-size;

  .icon {
    width: var(--chart-sparkline-label-icon-size);
    height: var(--chart-sparkline-label-icon-size);
    font-size: var(--chart-sparkline-label-icon-size);
  }
}