.bar{--x1:calc(var(--offset) - 0.5);--y1:var(--max-y);--x2:calc(var(--offset) + 0.5);--y2:var(--min-y);transition:opacity .3s}.bar .bottom,.bar .median,.bar .top{--x:.5}.bar .bottom,.bar .top{height:.6rem;width:1.4rem}.bar .connector{--x1:.5;--y1:var(--top);--x2:.5;--y2:var(--bottom);background:linear-gradient(var(--top-color) 0 calc((var(--top) - var(--median))/(var(--top) - var(--bottom))*100%),var(--bottom-color) calc((var(--top) - var(--median))/(var(--top) - var(--bottom))*100%) 100%);width:.6rem}.bar .top{--y:var(--top);background-color:var(--top-color)}.bar .median{--y:var(--median);--r:.3rem;background-color:#fff;border:2px solid var(--median-color);border-radius:50%}.bar .bottom{--y:var(--bottom);background-color:var(--bottom-color)}.bar .bottom-label,.bar .median-label,.bar .top-label{--x:.5;color:#12324b;opacity:0;transition:opacity .2s,translate .2s;translate:.6rem -50%;z-index:2}.bar .top-label{--y:var(--top);transition-delay:.1s,.1s}.bar .median-label{--y:var(--median);transition-delay:.05s,.05s}.bar .bottom-label{--y:var(--bottom);transition-delay:0s,0s}.bar:hover .bottom-label,.bar:hover .median-label,.bar:hover .top-label{opacity:1;translate:1.2rem -50%}@container css-chart (width < 30rem){.bar .bottom-label,.bar .median-label,.bar .top-label{display:none}}