.AevocamBillingPlanCalculator {

  .CostCurve {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    aspect-ratio: 4;
    max-width: 100%;
    margin: 0 auto;

    & > svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .TickLabel {
      fill: var(--color-page-text);
      pointer-events: none;
    }

    .DataPointHit {
      fill: transparent;
      pointer-events: all;
    }

    .DataPointDot {
      fill: var(--color-page-accent);
      stroke: var(--color-page-bg-elevated);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      pointer-events: all;
      transition:
        fill 0.12s ease,
        stroke 0.12s ease;
    }

    .DataPoint:hover {

      .DataPointHit {
        fill: var(--color-page-accent-soft);
      }

      .DataPointDot {
        fill: var(--color-page-accent-secondary);
        stroke: var(--color-page-bg-elevated);
      }

    }  /* .DataPoint:hover */

  }  /* .CostCurve */

  .CostCurveTip {
    position: fixed;
    z-index: 10000;
    box-sizing: border-box;
    max-width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-page-text);
    background: var(--color-page-bg-elevated);
    border: 1px solid var(--color-page-hairline);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    margin: 0;

    &.Visible {
      visibility: visible;
      opacity: 1;
    }
  }

}  /* .AevocamBillingPlanCalculator */