.ax-line {
    position: relative;
    transition-property: opacity;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
    pointer-events: none;
}

.ax-line--faded {
    opacity: var(--cmp-chart-opacity-faded);
}

.ax-line__svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.ax-line__path {
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition-property: color, stroke;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
    vector-effect: non-scaling-stroke;
}

.ax-line__point {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
}

.ax-line__point--hoverable::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: var(--opacity-background--subtle);
    border-radius: 50%;
    background-color: currentcolor;
    z-index: -1;
    transition-property: transform;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
}

.ax-line__point--hover::before,
.ax-line__point--hoverable:hover::before {
    transform: scale(2.5);
}

.ax-line--subtle { color: var(--color-theme-background--subtle); }
.ax-line--overlay-light { color: var(--color-theme-background--overlay-light); }

.ax-line--forbidden-planet { color: var(--color-product-forbidden-planet); }
.ax-line--tiny-clanger { color: var(--color-product-tiny-clanger); }
.ax-line--critical-mass { color: var(--color-product-critical-mass); }
.ax-line--fantastic-voyage { color: var(--color-product-fantastic-voyage); }
.ax-line--paradise-lost { color: var(--color-product-paradise-lost); }
.ax-line--serene-sea { color: var(--color-product-serene-sea); }
.ax-line--event-horizon { color: var(--color-product-event-horizon); }
.ax-line--electric-dreams { color: var(--color-product-electric-dreams); }
.ax-line--outer-limits { color: var(--color-product-outer-limits); }
.ax-line--giant-leap { color: var(--color-product-giant-leap); }
.ax-line--moon-lagoon { color: var(--color-product-moon-lagoon); }
.ax-line--space-invader { color: var(--color-product-space-invader); }
.ax-line--extraterrestrial { color: var(--color-product-extraterrestrial); }
.ax-line--terra-form { color: var(--color-product-terra-form); }
.ax-line--primeval-soup { color: var(--color-product-primeval-soup); }
.ax-line--future-shock { color: var(--color-product-future-shock); }
.ax-line--sun-maker { color: var(--color-product-sun-maker); }
.ax-line--new-horizon { color: var(--color-product-new-horizon); }
.ax-line--blast-off { color: var(--color-product-blast-off); }
.ax-line--crash-course { color: var(--color-product-crash-course); }
.ax-line--solar-rust { color: var(--color-product-solar-rust); }
.ax-line--ground-control { color: var(--color-product-ground-control); }
.ax-line--space-oddity { color: var(--color-product-space-oddity); }
.ax-line--rocky-planet { color: var(--color-product-rocky-planet); }
.ax-line--deep-thought { color: var(--color-product-deep-thought); }
.ax-line--luna-dust { color: var(--color-product-luna-dust); }
.ax-line--sentiment-positive { color: var(--color-sentiment-positive); }
.ax-line--sentiment-negative { color: var(--color-sentiment-negative); }
.ax-line--sentiment-neutral { color: var(--color-sentiment-neutral); }
.ax-line--social-twitter { color: var(--color-social-twitter); }
.ax-line--social-facebook { color: var(--color-social-facebook); }
.ax-line--social-instagram { color: var(--color-social-instagram); }