@use 'apps/dashboard/src/variables' as *;

$chart-line-color: $color-neutral-light;
$chart-font-size: font-size(xs);

@mixin chart() {
  position: relative;

  .tick text,
  .unit {
    font-family: $font-family-body;
    font-size: $chart-font-size;
    font-weight: $font-weight-thin;
    cursor: default;
    user-select: none;
  }

  .grid-line {
    stroke: $chart-line-color;
  }

  .y-axis line {
    stroke: $chart-line-color;
  }

  .threshold {
    stroke: $color-tertiary-regular;
  }

  .tooltip {
    $tooltip-background: rgba(0, 0, 0, 0.7);

    background-color: $tooltip-background;
    border-radius: rhythm(1);
    color: $color-light-stronger;
    padding: rhythm(1);
    position: absolute;
    font-size: $chart-font-size;
    transform: translateX(-50%);
    pointer-events: none;

    &::after {
      border-top: rhythm(1) solid $tooltip-background;
      border-left: rhythm(1) solid transparent;
      border-right: rhythm(1) solid transparent;
      bottom: calc(#{rhythm(1)} * -1);
      content: '';
      height: 0;
      position: absolute;
      left: calc(50% - #{rhythm(0.5)});
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      min-width: rhythm(12);
    }
  }

  .legend {
    @include body-s();
  }
}
