@use "../../../variables/index" as *;
@use "../../mixins/shadows-helper";

/**
 * Timelines Chart - Timeline visualization chart component
 *
 * Note: Uses $size-* and $font-size-* tokens throughout.
 *
 * Intentionally hardcoded values:
 * - Border widths (0): No borders
 * - Z-index values (1060): Stacking order for tooltips
 */

body > .c8y-timelines-chart-tooltip {
  position: absolute;
  z-index: 1060;
  padding: $size-base;
  border: 0;
  background: $component-background-default;
  font-size: $font-size-small;
  pointer-events: none;
  @include shadows-helper.boxShadowHelper(md);
}

.c8y-timelines-chart {
  position: relative;

  .axis {
    path,
    line {
      fill: none;
      stroke: $gray-60;
      shape-rendering: crispEdges;
    }

    text {
      font-size: $font-size-xs;
    }

    .tick line,
    .domain {
      stroke: $gray-80;
    }
  }
}