@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

// LEGEND STYLING (positioning is in chart-container.scss)
$single: #1c345f;
// stacked bar chart color scheme
$first: #4269d0;
$second: #efb117;
$third: #ff725c;
$fourth: #6cc5b0;

.legend-container {
  .dots {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
  }
  .legend-dot-total {
    background-color: $single;
  }
  // numbers are indices because chart legend is iterated over to ensure
  // legend colors match the correct stacked-bar-# class below
  .legend-dot-0 {
    background-color: $first;
  }
  .legend-dot-1 {
    background-color: $second;
  }
  .legend-dot-2 {
    background-color: $third;
  }
  .legend-dot-3 {
    background-color: $fourth;
  }
}

.chart-tooltip {
  background-color: hsl(0, 0%, 4%);
  color: white;
  font-size: size_variables.$size-9;
  padding: 6px;
  border-radius: size_variables.$radius-large;
  flex-wrap: nowrap;
  width: fit-content;

  .bold {
    font-weight: font_variables.$font-weight-bold;
  }
  // styling below handles tooltip position
  position: absolute;
  transform-style: preserve-3d;
  bottom: 30px;
  left: -20px;
  pointer-events: none;
  width: 140px;
  transform: translate(calc(1px * var(--x, 0)), calc(-1px * var(--y, 0)));
  transform-origin: bottom left;
  z-index: 100;
  margin-bottom: size_variables.$spacing-8;
}

.chart-tooltip-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 9px solid hsl(0, 0%, 4%);
  position: absolute;
  opacity: 0.8;
  bottom: -9px;
  left: calc(50% - 5px);
}

// LINEAL STYLING //
.lineal-chart {
  position: relative;
  padding: 10px 10px 20px 50px;
  width: 100%;
  svg {
    overflow: visible;
  }
}

.lineal-chart-bar {
  fill: $single;
}

.lineal-axis {
  color: var(--token-color-palette-neutral-400);
  text {
    font-size: 0.75rem;
  }
  line {
    color: var(--token-color-palette-neutral-300);
  }
}

// @colorScale arg for Lineal::VBars is "stacked-bar", numbers are added by lineal (not 0-indexed)
.stacked-bar-1 {
  color: $first;
  fill: $first;
}
.stacked-bar-2 {
  color: $second;
  fill: $second;
}
.stacked-bar-3 {
  color: $third;
  fill: $third;
}
// MUST BE LAST because conditionally renders and legend color mapping for stacked bars will be off otherwise
.stacked-bar-4 {
  color: $fourth;
  fill: $fourth;
}
